MainPage.jsx 3.13 KB
import React from 'react';
import Axios from 'axios';
import { Layout } from 'antd';
import uuid from 'uuid/v4';

import ContentRoutes from '../../routes/contentRoutes';
import SubmenuRoutes from '../../routes/submenuRoutes';

import Header from '../../templates/layout/header/WDSHeaderTemplate';
import Sider from '../../templates/layout/sider/WDSSiderTemplate';
import Breadcrumb from '../../templates/layout/breadcrumb/WDSBreadcrumbTemplate';
import Footer from '../../templates/layout/footer/WDSFooterTemplate';

import * as UrlConstants from '../../resources/js/constants/urlConstants';
import history from '../../history';

import './resources/style/css/mainPage.css';

const headerAction = {
  setSystemInfo: uuid(),
  logout: uuid()
};

const mainMenuAction = {
  setMainMenu: uuid(),
  setBreadcrumb: uuid()
};

const breadcrumbAction = {
  setMainMenu: uuid(),
  setBreadcrumb: uuid()
};

const footerAction = {
  setFooter: uuid()
};

export default class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { collapsed: false };
  }

  componentDidMount() {
    this._requestGetSystemInfoApi();
    this._requestGetMenuApi();
    this._handleLogout();
  }

  componentWillUnmount() {
    this.props.eventEmitter.removeAllListeners(
      headerAction.setSystemInfo,
      headerAction.logout
    );
  }

  _requestGetSystemInfoApi = async () => {
    const params = {};
    const results = await Axios.post(UrlConstants.URL_GET_SYSTEM_INFO, params);

    if (results.data.success) {
      const { eventEmitter } = this.props;
      eventEmitter.emit(headerAction.setSystemInfo, results.data);
    }
  };

  _requestGetMenuApi = async () => {
    const params = {};
    const results = await Axios.post(UrlConstants.URL_GET_MENU, params);

    if (results.data.success) {
      const { eventEmitter } = this.props;
      eventEmitter.emit(mainMenuAction.setMainMenu, results.data.dataList);
    }
  };

  _handleLogout = () => {
    this.props.eventEmitter.on(headerAction.logout, async data => {
      const params = {};
      const results = await Axios.post(UrlConstants.URL_LOGOUT, params);

      if (results.data.success) {
        history.push('/login');
      }
    });
  };

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Header
          actionEmitter={headerAction}
          eventEmitter={this.props.eventEmitter}
        />
        <Sider
          actionEmitter={mainMenuAction}
          eventEmitter={this.props.eventEmitter}
        />
        <Layout>
          <Breadcrumb
            actionEmitter={breadcrumbAction}
            eventEmitter={this.props.eventEmitter}
          />

          <div className="content" style={{ margin: 10 }}>
            <ContentRoutes
              match={this.props.match}
              eventEmitter={this.props.eventEmitter}
            />
            <SubmenuRoutes
              match={this.props.match}
              eventEmitter={this.props.eventEmitter}
            />
          </div>

          <Footer
            actionEmitter={footerAction}
            eventEmitter={this.props.eventEmitter}
          />
        </Layout>
      </Layout>
    );
  }
}