WDSUserInfoHeaderTemplate.jsx

import React, { Component } from 'react';
import { Menu, Icon, Button } from 'antd';
import _ from 'lodash';

import { accoutStyle } from './resources/style/jsx/headerStyle';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

export default class WDSUserInfoHeaderTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: {}
    };
  }

  componentDidMount() {
    this.props.eventEmitter.on(this.props.actionEmitter.setUserInfo, data => {
      this.setState({
        dataList: data
      });
    });
  }

  _handleLogout = async () => {
    this.props.eventEmitter.emit(this.props.actionEmitter.logout, {});
  };

  render() {
    return (
      <Menu mode="horizontal" style={accoutStyle} theme="dark">
        <SubMenu
          title={
            <span className="submenu-title-wrapper">
              <Icon type="user" />
              Account
            </span>
          }
        >
          {!_.isEmpty(this.state.dataList) &&
            this.state.dataList.map((data, index) => {
              return (
                <MenuItemGroup key={data.title} title={data.title}>
                  <Menu.Item key={data.title} disabled>
                    {data.item}
                  </Menu.Item>
                </MenuItemGroup>
              );
            })}

          <MenuItemGroup title="">
            <Menu.Item key="logout">
              <Button onClick={this._handleLogout} block>
                Logout
              </Button>
            </Menu.Item>
          </MenuItemGroup>
        </SubMenu>
      </Menu>
    );
  }
}