containers/Profile/index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getProfileInfo, getActiveModal, getModalData, getSelectedTimezone } from '../../selectors/common';
import { aChangeUserPWD, aGetProfileInfo } from '../../reducers/actions';
import { MODALS } from '../../constants';
import { getCountryDateTime } from '../../utils/common';
import ChangePasswordModal from '../../components/Profil/ChangePasswordModal';
import { aSetOpenModal } from '../../reducers/common';

const mapToProps = (state) => ({
  profileInfo: getProfileInfo(state),
  activeModal: getActiveModal(state),
  modalData: getModalData(state),
  selectedTimezone: getSelectedTimezone(state),
});

const actionsToProps = (dispatch) => ({
  getProfileInfo: (payload) => dispatch(aGetProfileInfo(payload)),
  setOpenModal: (payload) => dispatch(aSetOpenModal(payload)),
  changePwd: (payload) => dispatch(aChangeUserPWD(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {object} props.profileInfo Info of logged user
 * @property {object} props.modalData Modal Data
 * @property {string} props.activeModal Indicate active modal
 * @property {Function} props.getProfileInfo API call to get user data
 * @property {Function} props.setOpenModal Open modal
 * @property {Function} props.changePwd API call to change password
 */
class Profile extends Component {
  /**
   * Get user data
   *
   * @returns {void}
   */
  componentDidMount() {
    this.props.getProfileInfo();
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user mt-20">
        <div className="user__details-wrap bg-primary">
          <div className="user__details">
            <div className="user__details-left">
              <div className="user__details-row">
                <span className="user__details-txt">Username :</span>
                <div className="user__details-value">{this.props.profileInfo && this.props.profileInfo.username}</div>
              </div>
              <div className="user__details-row">
                <span className="user__details-txt">Email :</span>
                <div className="user__details-value">{this.props.profileInfo && this.props.profileInfo.email}</div>
              </div>
              <div className="user__details-row">
                <span className="user__details-txt">Last Login:</span>
                <div className="user__details-value">
                  {this.props.profileInfo &&
                    getCountryDateTime(this.props.profileInfo.lastLogin, this.props.selectedTimezone)}
                </div>
              </div>
            </div>
            <div className="user__details-right">
              <div className="user__details-row align-items-start">
                <span className="user__details-txt mt-1">Roles :</span>
                <div className="user__details-value-wrap">
                  {this.props.profileInfo &&
                    this.props.profileInfo.roles.map((role, key) => (
                      <div className="user__details-value" id={key} key={role}>
                        {role}
                      </div>
                    ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <button
          id="profilePage_Changepassword"
          type="button"
          className="btn btn-primary ch-password mt-20"
          onClick={this.props.setOpenModal.bind(this, { modal: MODALS.USER_PWD_CHANGE })}
        >
          Change Password
        </button>
        {this.props.activeModal === MODALS.USER_PWD_CHANGE && (
          <ChangePasswordModal setOpenModal={this.props.setOpenModal} changePwd={this.props.changePwd} />
        )}
      </div>
    );
  }
}

export default connect(mapToProps, actionsToProps)(Profile);