thinkful-ui/lib/AppBar/AppBar.js

Shared UI resources for Thinkful.

"use strict";

var _lodash = _interopRequireDefault(require("lodash"));

var _moment = _interopRequireDefault(require("moment"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _universalCookie = _interopRequireDefault(require("universal-cookie"));

var _classnames = _interopRequireDefault(require("classnames"));

var _ConciergeModal = _interopRequireDefault(require("./ConciergeModal"));

var _ConciergeToggle = _interopRequireDefault(require("./ConciergeToggle"));

var _ConciergeTooltip = _interopRequireDefault(require("./ConciergeTooltip"));

var _DesktopMenuToggle = _interopRequireDefault(require("./DesktopMenuToggle"));

var _Logo = _interopRequireDefault(require("../Logo"));

var _MenuList = _interopRequireDefault(require("./MenuList"));

var _MobileMenuToggle = _interopRequireDefault(require("./MobileMenuToggle"));

var _NavLink = _interopRequireDefault(require("./NavLink"));

var _Notifications = _interopRequireDefault(require("./notifications/Notifications"));

var _UnauthedAppBar = _interopRequireDefault(require("./UnauthedAppBar"));

var _currentEnrollment = require("./currentEnrollment");

var _linkSet = require("./linkSet");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var LEGACY_PLATFORM = 'legacy';
var CONCIERGE_FLAG = 'flexperiment-concierge';
var TOOLTIP_KEY_OLD = 'hasSeenConciergeTooltip';
var TOOLTIP_KEY = 'hasSeenConcierge';

var AppBar = /*#__PURE__*/function (_React$Component) {
  _inherits(AppBar, _React$Component);

  var _super = _createSuper(AppBar);

  function AppBar(props) {
    var _this;

    _classCallCheck(this, AppBar);

    _this = _super.call(this, props);
    _this._handleGetCurrentEnrollmentSucceeded = _this._handleGetCurrentEnrollmentSucceeded.bind(_assertThisInitialized(_this));
    _this._handleGetCurrentEnrollmentFailed = _this._handleGetCurrentEnrollmentFailed.bind(_assertThisInitialized(_this));
    _this._toggleMenu = _this._toggleMenu.bind(_assertThisInitialized(_this));
    _this._toggleConcierge = _this._toggleConcierge.bind(_assertThisInitialized(_this));
    _this._handleMouseEnter = _this._handleMouseEnter.bind(_assertThisInitialized(_this));
    _this._handleMouseLeave = _this._handleMouseLeave.bind(_assertThisInitialized(_this));
    _this._hasConciergeAccess = _this._hasConciergeAccess.bind(_assertThisInitialized(_this));
    _this._shouldInitNotifications = _this._shouldInitNotifications.bind(_assertThisInitialized(_this));
    _this._shouldShowTooltip = _this._shouldShowTooltip.bind(_assertThisInitialized(_this));
    _this._setTooltipDismissed = _this._setTooltipDismissed.bind(_assertThisInitialized(_this));
    _this.cookies = new _universalCookie["default"]();
    _this.state = {
      isConciergeVisible: false,
      isConciergeTooltipVisible: true,
      isMenuVisible: false,
      isPrepUser: false,
      linkSet: props.user ? (0, _linkSet.getLinkSet)(props.config, props.user) : null,
      openSessionsUrl: null,
      slackUrl: null,
      technicalSlackUrl: null
    };
    return _this;
  }

  _createClass(AppBar, [{
    key: "getChildContext",
    value: function getChildContext() {
      return {
        user: this.props.user
      };
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          config = _this$props.config,
          user = _this$props.user;
      (0, _currentEnrollment.getCurrentEnrollment)(config, user, this._handleGetCurrentEnrollmentSucceeded, this._handleGetCurrentEnrollmentFailed);
    }
  }, {
    key: "_handleGetCurrentEnrollmentSucceeded",
    value: function _handleGetCurrentEnrollmentSucceeded(res) {
      var slackUrl = _lodash["default"].get(res.body, 'enrollment.course.slack_channel_web_url', null);

      var technicalSlackUrl = _lodash["default"].get(res.body, 'enrollment.course.technical_slack_channel_web_url', null);

      var openSessionsUrl = _lodash["default"].get(res.body, 'enrollment.course.default_open_sessions_url', null);

      var courseDeliveryFormatSlug = _lodash["default"].get(res.body, 'enrollment.course.delivery_format.slug');

      var isPrepUser = courseDeliveryFormatSlug === 'prep';
      this.setState({
        isPrepUser: isPrepUser,
        openSessionsUrl: openSessionsUrl,
        slackUrl: slackUrl,
        technicalSlackUrl: technicalSlackUrl
      });
    }
  }, {
    key: "_handleGetCurrentEnrollmentFailed",
    value: function _handleGetCurrentEnrollmentFailed(err) {
      console.warn("getCurrentEnrollment failed: ".concat(err));
    } // visibility of menu and concierge is mutually exclusive
    // when opening menu or concierge, close the other one
    // when closing menu or concierge, leave the other one alone

  }, {
    key: "_toggleMenu",
    value: function _toggleMenu() {
      var _this$state = this.state,
          isMenuVisible = _this$state.isMenuVisible,
          isConciergeVisible = _this$state.isConciergeVisible;
      var newIsMenuVisible = !isMenuVisible;
      var newIsConciergeVisible = newIsMenuVisible ? false : isConciergeVisible;
      this.setState({
        isMenuVisible: newIsMenuVisible,
        isConciergeVisible: newIsConciergeVisible
      });
    }
  }, {
    key: "_toggleConcierge",
    value: function _toggleConcierge() {
      var _this$state2 = this.state,
          isMenuVisible = _this$state2.isMenuVisible,
          isConciergeVisible = _this$state2.isConciergeVisible;

      if (this._shouldShowTooltip()) {
        this._setTooltipDismissed();
      }

      var newIsConciergeVisible = !isConciergeVisible;
      var newIsMenuVisible = newIsConciergeVisible ? false : isMenuVisible;
      this.setState({
        isConciergeVisible: newIsConciergeVisible,
        isMenuVisible: newIsMenuVisible,
        isConciergeTooltipVisible: false
      });
    }
  }, {
    key: "_handleMouseEnter",
    value: function _handleMouseEnter(event) {
      if (this.mouseTimeout) {
        clearTimeout(this.mouseTimeout);
      }
    }
  }, {
    key: "_handleMouseLeave",
    value: function _handleMouseLeave(event) {
      var _this2 = this;

      clearTimeout(this.mouseTimeout);
      this.mouseTimeout = setTimeout(function () {
        _this2.setState({
          isMenuVisible: false,
          isCourseDropdownVisible: false
        });
      }, 400);
    }
  }, {
    key: "_hasConciergeAccess",
    value: function _hasConciergeAccess(user) {
      var isPrepUser = this.state.isPrepUser;
      return _lodash["default"].includes(user.access, CONCIERGE_FLAG) || isPrepUser;
    }
  }, {
    key: "_shouldInitNotifications",
    value: function _shouldInitNotifications() {
      var user = this.props.user;
      return !/mentor|admin/.test(user.role) && user.platform === LEGACY_PLATFORM;
    }
  }, {
    key: "_setTooltipDismissed",
    value: function _setTooltipDismissed() {
      this.cookies.set(TOOLTIP_KEY, true, {
        domain: location.hostname == 't.ful' ? 't.ful' : '.thinkful.com',
        path: '/',
        expires: (0, _moment["default"])().add(1, 'month').toDate()
      });
    }
  }, {
    key: "_shouldShowTooltip",
    value: function _shouldShowTooltip() {
      if (this.cookies.get(TOOLTIP_KEY_OLD)) {
        this.cookies.remove(TOOLTIP_KEY_OLD, {
          path: '/'
        });

        this._setTooltipDismissed();
      }

      return !this.cookies.get(TOOLTIP_KEY);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          brand = _this$props2.brand,
          className = _this$props2.className,
          config = _this$props2.config,
          EnrollmentView = _this$props2.EnrollmentView,
          user = _this$props2.user;
      var _this$state3 = this.state,
          isMenuVisible = _this$state3.isMenuVisible,
          isConciergeVisible = _this$state3.isConciergeVisible,
          isConciergeTooltipVisible = _this$state3.isConciergeTooltipVisible,
          isPrepUser = _this$state3.isPrepUser,
          linkSet = _this$state3.linkSet,
          openSessionsUrl = _this$state3.openSessionsUrl,
          slackUrl = _this$state3.slackUrl,
          technicalSlackUrl = _this$state3.technicalSlackUrl;

      if (!user) {
        return /*#__PURE__*/_react["default"].createElement(_UnauthedAppBar["default"], {
          config: config
        });
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])('tui-app-nav-container', className)
      }, /*#__PURE__*/_react["default"].createElement("nav", {
        onMouseLeave: this._handleMouseLeave,
        className: (0, _classnames["default"])('tui-app-nav', {
          'tui-app-nav__visible': isMenuVisible,
          'tui-app-nav__concierge-visible': isConciergeVisible,
          'tui-app-nav__concierge-tooltip-visible': isConciergeTooltipVisible
        }),
        key: "main-navigation",
        rel: "main-navigation"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "nav-bar-container"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "tui-app-nav-left"
      }, /*#__PURE__*/_react["default"].createElement("a", {
        className: "tui-app-nav-logo",
        href: linkSet.home.url
      }, /*#__PURE__*/_react["default"].createElement(_Logo["default"], {
        brand: brand || user.brand
      })), EnrollmentView, /*#__PURE__*/_react["default"].createElement("ul", {
        className: "tui-app-nav-main"
      }, linkSet.main.map(function (link) {
        return /*#__PURE__*/_react["default"].createElement("li", {
          key: _lodash["default"].uniqueId('link_')
        }, /*#__PURE__*/_react["default"].createElement(_NavLink["default"], link));
      }))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "tui-app-nav-right"
      }, this._hasConciergeAccess(user) && /*#__PURE__*/_react["default"].createElement(_ConciergeToggle["default"], {
        conciergeVisible: isConciergeVisible,
        onClick: this._toggleConcierge
      }), this._shouldInitNotifications() && /*#__PURE__*/_react["default"].createElement(_Notifications["default"], null), /*#__PURE__*/_react["default"].createElement(_DesktopMenuToggle["default"], {
        onClick: this._toggleMenu,
        config: config
      }), /*#__PURE__*/_react["default"].createElement(_MobileMenuToggle["default"], {
        isOpen: isMenuVisible,
        onClick: this._toggleMenu
      }))), /*#__PURE__*/_react["default"].createElement(_MenuList["default"], {
        linkSet: linkSet,
        onMouseEnter: this._handleMouseEnter,
        EnrollmentView: EnrollmentView
      }), this._hasConciergeAccess(user) && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_ConciergeModal["default"], {
        isPrepUser: isPrepUser,
        openSessionsUrl: openSessionsUrl,
        slackUrl: slackUrl,
        technicalSlackUrl: technicalSlackUrl,
        toggleConcierge: this._toggleConcierge,
        visible: isConciergeVisible
      }), this._shouldShowTooltip() && /*#__PURE__*/_react["default"].createElement(_ConciergeTooltip["default"], {
        toggleConcierge: this._toggleConcierge
      }))));
    }
  }]);

  return AppBar;
}(_react["default"].Component);

AppBar.propTypes = {
  brand: _propTypes["default"].string,
  config: _propTypes["default"].object.isRequired,
  EnrollmentView: _propTypes["default"].object,
  user: _propTypes["default"].object
};
AppBar.defaultProps = {
  brand: null,
  EnrollmentView: null
};
AppBar.childContextTypes = {
  user: _propTypes["default"].object.isRequired
};
module.exports = AppBar;