WDSHeaderTemplate.jsx

import React, { Component } from 'react';
import { Avatar } from 'antd';
import { style, logoStyle } from './resources/style/jsx/headerStyle';
import uuid from 'uuid/v4';

import UserInfo from './WDSUserInfoHeaderTemplate';

let userInfoAction = {
  setUserInfo: uuid()
};

export default class WDSHeaderTemplate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      systemLogo: '',
      systemName: ''
    };
    userInfoAction.logout = this.props.actionEmitter.logout;
  }

  componentDidMount() {
    const eventEmitter = this.props.eventEmitter;

    eventEmitter.on(this.props.actionEmitter.setSystemInfo, data => {
      this.setState({
        systemLogo: data.systemLogo,
        systemName: data.systemName
      });

      eventEmitter.emit(userInfoAction.setUserInfo, data.dataList);
    });
  }

  componentWillUnmount() {
    this.props.eventEmitter.removeAllListeners(userInfoAction.setUserInfo);
  }

  render() {
    return (
      <div className="header" style={style}>
        <span style={logoStyle}>
          <Avatar
            shape="square"
            src={this.state.systemLogo}
            style={{ marginRight: 20 }}
          />
          {this.state.systemName}
        </span>

        <UserInfo
          actionEmitter={userInfoAction}
          eventEmitter={this.props.eventEmitter}
        />
      </div>
    );
  }
}