openreplay/frontend/app/components/Header/Header.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { NavLink, withRouter } from 'react-router-dom';
import cn from 'classnames';
import { 
  sessions,
  assist,
  client,
  dashboard,
  withSiteId,
  CLIENT_DEFAULT_TAB,
} from 'App/routes';
import { logout } from 'Duck/user';
import { Icon, Popup } from 'UI';
import SiteDropdown from './SiteDropdown';
import styles from './header.module.css';
import OnboardingExplore from './OnboardingExplore/OnboardingExplore'
import Announcements from '../Announcements';
import Notifications from '../Alerts/Notifications';
import { init as initSite } from 'Duck/site';

import ErrorGenPanel from 'App/dev/components';
import Alerts from '../Alerts/Alerts';
import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
import { fetchList as fetchMetadata } from 'Duck/customField';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';

const DASHBOARD_PATH = dashboard();
const SESSIONS_PATH = sessions();
const ASSIST_PATH = assist();
const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);

const Header = (props) => {
  const { 
    sites, location, account, 
    onLogoutClick, siteId,
    boardingCompletion = 100, showAlerts = false,
  } = props;
  
  const name = account.get('name').split(" ")[0];
  const [hideDiscover, setHideDiscover] = useState(false)
  const { userStore, notificationStore } = useStore();
  const initialDataFetched = useObserver(() => userStore.initialDataFetched);
  let activeSite = null;

  useEffect(() => {
    if (!account.id || initialDataFetched) return;
    
    setTimeout(() => {
      Promise.all([
        userStore.fetchLimits(),
        notificationStore.fetchNotificationsCount(),
      ]).then(() => {
        userStore.updateKey('initialDataFetched', true);
      });
    }, 0);
  }, [account]);

  useEffect(() => {
    activeSite = sites.find(s => s.id == siteId);
    props.initSite(activeSite);
    props.fetchMetadata();
  }, [siteId])

  return (
    <div className={ cn(styles.header) }>
      <NavLink to={ withSiteId(SESSIONS_PATH, siteId) }>
        <div className="relative">
          <div className="p-2">
            <AnimatedSVG name={ICONS.LOGO_SMALL} size="30" />
          </div>
          <div className="absolute bottom-0" style={{ fontSize: '7px', right: '5px' }}>v{window.env.VERSION}</div>
        </div>
      </NavLink>
      <SiteDropdown />
      <div className={ styles.divider } />

      <NavLink
        to={ withSiteId(SESSIONS_PATH, siteId) }
        className={ styles.nav }
        activeClassName={ styles.active }
      >
        { 'Sessions' }
      </NavLink>
      <NavLink
        to={ withSiteId(ASSIST_PATH, siteId) }
        className={ styles.nav }
        activeClassName={ styles.active }
      >
        { 'Assist' }
      </NavLink>
      <NavLink
        to={ withSiteId(DASHBOARD_PATH, siteId) }
        className={ styles.nav }
        activeClassName={ styles.active }
      >         
        <span>{ 'Dashboards' }</span>
      </NavLink>
      <div className={ styles.right }>
        <Announcements />
        <div className={ styles.divider } />

        { (boardingCompletion < 100 && !hideDiscover) && (
          <React.Fragment>            
            <OnboardingExplore onComplete={() => setHideDiscover(true)} />
            <div className={ styles.divider } />
          </React.Fragment>
        )}
      
        <Notifications />
        <div className={ styles.divider } />
        <Popup content={ `Preferences` } >
          <NavLink to={ CLIENT_PATH } className={ styles.headerIcon }><Icon name="cog" size="20" /></NavLink>
        </Popup>
        
        <div className={ styles.divider } />
        <div className={ styles.userDetails }>
          <div className="flex items-center">
            <div className="mr-5">{ name }</div>
            <Icon color="gray-medium" name="ellipsis-v" size="24" />
          </div>

          <ul>
            <li><button onClick={ onLogoutClick }>{ 'Logout' }</button></li>
          </ul>
        </div>
      </div>
      { <ErrorGenPanel/> }
      {showAlerts && <Alerts />}
    </div>
  );
};

export default withRouter(connect(
  state => ({
    account: state.getIn([ 'user', 'account' ]),
    siteId: state.getIn([ 'site', 'siteId' ]),
    sites: state.getIn([ 'site', 'list' ]),
    showAlerts: state.getIn([ 'dashboard', 'showAlerts' ]),
    boardingCompletion: state.getIn([ 'dashboard', 'boardingCompletion' ])
  }),
  { onLogoutClick: logout, initSite, fetchMetadata },
)(Header));