containers/Main/index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import ItemRouter from '../../ItemRouter';

import {
  getSelectedMenuItem,
  isFetched,
  hasError,
  getActiveModal,
  getModalData,
  getUser,
  getHeading,
  getSelectedTimezone,
} from '../../selectors/common';
import Section from '../../components/Section';
import Loader from '../../components/Loader';
import TimezoneSelect from '../../components/TimezoneSelect';
import Menu from '../Menu';
import ErrorModal from '../../components/Modals/ErrorModal';
import SuccessModal from '../../components/Modals/SuccessModal';
import { MODALS, PAGES } from '../../constants';
import { aSetOpenModal, aSetSelectedTimezone } from '../../reducers/common';
import { aLogout } from '../../reducers/actions';
import { withRouterHooks } from '../../utils/router';

const mapToProps = (state) => ({
  selectedMenuItem: getSelectedMenuItem(state),
  isFetched: isFetched(state),
  hasError: hasError(state),
  activeModal: getActiveModal(state),
  modalData: getModalData(state),
  user: getUser(state),
  heading: getHeading(state),
  selectedTimezone: getSelectedTimezone(state),
});

const actionsToProps = (dispatch) => ({
  setOpenModal: (payload) => dispatch(aSetOpenModal(payload)),
  logoutRequest: (payload) => dispatch(aLogout(payload)),
  setSelectedTimeZone: (payload) => dispatch(aSetSelectedTimezone(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {string} props.selectedMenuItem Selected menu item
 * @property {boolean} props.isFetched Is API fetched or panding
 * @property {string} props.activeModal
 * @property {string|null} props.hasError
 * @property {Function} props.logoutRequest
 * @property {Function} props.setOpenModal
 */
class Main extends Component {
  constructor() {
    super();
    /**
     * @member {object}
     */
    this.state = {};
  }

  componentDidUpdate() {
    if (!this.props.user) {
      this.props.navigate(PAGES.LOGIN);
    }
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <>
        <div className="content">
          <Menu />
          <div className="main-wrapper">
            <Section heading={this.props.heading}>
              {!this.props.isFetched && <Loader />}
              <ItemRouter />
            </Section>
          </div>
          {this.props.hasError && (
            <ErrorModal
              message={this.props.hasError}
              setOpenModal={this.props.setOpenModal}
              modal={this.props.activeModal}
              logoutRequest={this.props.logoutRequest}
              navigate={this.props.navigate}
            />
          )}
          {this.props.activeModal === MODALS.SUCCESS && (
            <SuccessModal modalData={this.props.modalData} setOpenModal={this.props.setOpenModal} />
          )}
          {this.props.activeModal && <div className="overlay-mask bg-grey open" />}
        </div>
        <TimezoneSelect
          setSelectedTimeZone={this.props.setSelectedTimeZone}
          selectedTimezone={this.props.selectedTimezone}
        />
      </>
    );
  }
}

export default connect(mapToProps, actionsToProps)(withRouterHooks(Main));