MyAccountRoot.js

import React, { Component } from 'react';
import MenuItem from 'material-ui/MenuItem';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import moment from 'moment';

import updateUser from '../../actions/mutations/updateUser';
import updateUserPassword from '../../actions/mutations/updateUserPassword';
import logoutUser from '../../actions/aux/logoutUser';
import requestEmail from '../../actions/queries/requestEmail';
import showSnackbar from '../../actions/aux/showSnackbar';
import cleanError from '../../actions/aux/cleanError';

import MyAccount from './components/MyAccount';
import ConfirmationBlock from '../../components/ConfirmationBlock';

class MyAccountRoot extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: this.props.user.name,
      lastName: this.props.user.lastName,
      gender: this.props.user.gender === 'male' ? 'DR.' : 'DRA.',
      cpf: this.props.user.cpf,
      crm: this.props.user.crm,
      birthDate: moment(this.props.user.birthDate).format('DD/MM/YYYY'),
      email: this.props.user.email,
      cep: this.props.user.cep,
      number: this.props.user.number,
      complement: this.props.user.complement,
      address: this.props.user.address,
      city: this.props.user.city,
      state: this.props.user.state,
      phone: this.props.user.phone,
      celphone: this.props.user.celphone,
      specialty: this.props.user.specialty,
      society: this.props.user.society,
      notificationsAuthorized: this.props.user.notificationsAuthorized,
      error: '',
      logoutUser: this.props.logoutUser,
      editEnabled: false,
      openLogout: false,
      openChangePasswordModal: false,
      updateLabel: 'Alterar Dados',
      openConfirmationBlock: true,
    };

    this.baseState = this.state;
  }

  componentWillReceiveProps(nextProps) {
    /*
    * If receiving error prop from the reducer
    * meaning the API returned an error
    * enable form for edition again as
    * previous submission failed
    */
    if (nextProps.error && !this.props.error) {
      this.setState({ editEnabled: true });
    }
  }

  toggleLogout = () => {
    this.props.cleanError();
    this.setState({ openLogout: !this.state.openLogout });
  }

  toggleChangePasswordModal = () => {
    this.props.cleanError();
    this.setState({ openChangePasswordModal: !this.state.openChangePasswordModal });
  }

  cancelEditable = async () => {
    await this.setState({ editEnabled: false, updateLabel: 'Alterar Dados' });
    this.setState(this.baseState);
  }

  handleSelectChange = field => (event, index, value) => this.setState({ [field]: value });

  toggleFormEdit = (formData) => {
    this.setState({ updateLabel: 'Salvar Dados' });
    const { editEnabled } = this.state;
    const validated = false;

    if (editEnabled) {
      this.handleUpdateUser({ ...formData, _id: this.props.user._id });
      this.setState({ updateLabel: 'Alterar Dados' });
    }

    this.setState({ editEnabled: !validated });
  }

  selectionRenderer = (values) => {
    switch (values.length) {
      case 0:
        return '';
      case 1:
        return '1 selecionada';
      default:
        return `${values.length} selecionadas`;
    }
  }

  menuItems(value, items) {
    return items.map(item => (
      <MenuItem
        key={item}
        insetChildren
        checked={value && value.indexOf(item) > -1}
        value={item}
        primaryText={item}
      />
    ));
  }

  handleUpdateUser = async (input) => {
    const { token } = this.props;

    const submitedUpdateUser = await this.props.updateUser(input, token);
    if (submitedUpdateUser) this.props.showSnackbar('Pronto! Seus dados foram atualizados com sucesso!');
  }

  handleUpdatePass = async (input) => {
    const success = await this.props.updateUserPassword(input, this.props.token);
    if (success) {
      this.props.showSnackbar('Pronto! Sua senha foi alterada com sucesso!');
    }
  }

  handleEmailRequest = async () => {
    const { requestEmail, token } = this.props;
    const emailRequested = await requestEmail(token);
    // this.setState({ openConfirmationBlock: false });
    if (emailRequested) {
      this.props.showSnackbar('O seu E-mail foi enviado com sucesso.');
    } else {
      this.props.showSnackbar('Não foi possível reenviar o E-mail de confirmação, tente novamente.');
    }
  }

  updateUser = async (formData) => {
    await this.props.updateUser(formData);
  }

  render() {
    const { name,
      lastName,
      gender,
      cpf,
      birthDate,
      cep,
      email,
      crm,
      number,
      complement,
      address,
      city,
      state,
      phone,
      celphone,
      specialty,
      society,
      notificationsAuthorized,
      error,
      logoutUser,
      editEnabled,
      updateLabel,
      openLogout,
    } = this.state;

    const stateFields = {
      name,
      lastName,
      gender,
      cpf,
      birthDate,
      cep,
      email,
      crm,
      number,
      complement,
      address,
      city,
      state,
      phone,
      celphone,
      specialty,
      society,
      notificationsAuthorized,
      error,
      logoutUser,
      editEnabled,
      updateLabel,
      openLogout,
    };

    const { user, requestedEmailSent } = this.props;

    return (
      <div>
        <Helmet title="Minha Conta" />
        <MyAccount
          logoutUser={this.props.logoutUser}
          menuItems={this.menuItems}
          stateFields={stateFields}
          handleUpdateUser={this.handleUpdateUser}
          handleUpdatePass={this.handleUpdatePass}
          handleSelectChange={this.handleSelectChange}
          handleGenderChange={this.handleGenderChange}
          toggleChangePasswordModal={this.toggleChangePasswordModal}
          toggleFormEdit={this.toggleFormEdit}
          toggleLogout={this.toggleLogout}
          selectionRenderer={this.selectionRenderer}
          handleInput={this.handleInput}
          cancelEditable={this.cancelEditable}
          user={user}
          updateLabel={updateLabel}
          editEnabled={editEnabled}
          openLogout={openLogout}
          openChangePasswordModal={this.state.openChangePasswordModal}
          {...this.props}
        />
        {
          (!user.accountVerified && !requestedEmailSent) &&
          <ConfirmationBlock
            open={this.state.openConfirmationBlock}
            close={() => { this.setState({ openConfirmationBlock: !this.state.openConfirmationBlock }); }}
            handleEmailRequest={this.handleEmailRequest}
            {...this.props}
          />
        }
      </div>
    );
  }
}

MyAccountRoot.propTypes = {
  requestedEmailSent: PropTypes.bool,
  loggedIn: PropTypes.bool.isRequired,
  token: PropTypes.string.isRequired,
  error: PropTypes.string.isRequired,
  user: PropTypes.shape().isRequired,

  updateUserPassword: PropTypes.func.isRequired,
  requestEmail: PropTypes.func.isRequired,
  logoutUser: PropTypes.func.isRequired,
  updateUser: PropTypes.func.isRequired,
  showSnackbar: PropTypes.func.isRequired,
  cleanError: PropTypes.func.isRequired,
};

MyAccountRoot.defaultProps = {
  requestedEmailSent: false,
};

const mapStateToProps = ({ auth }) => {
  const { user, token, error, loading, loggedIn, requestedEmailSent } = auth;
  const loadingAuth = auth.loading;

  return { user, token, error, loading, loggedIn, requestedEmailSent, loadingAuth };
};

const mapDispatchToProps = {
  logoutUser,
  updateUser,
  updateUserPassword,
  requestEmail,
  showSnackbar,
  cleanError,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyAccountRoot);