HighOrderComponents Problems Example

HighOrderComponentsProblemsExample.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { recompose } from 'recompose';
import translate from './highOrderComponents/withTranslate';
import clickOutside from './highOrderComponents/clickOutside';
import withUser from './highOrderComponents/withUser';

import {
  configureUser,
} from './store/actions';

class MyCoolComponent extends Component {
  render() {
    const {
      translate,
      isActive,
      onClick,
      user,
      preferences,
      onConfigureUser,
    } = this.props;

    if (!isActive) {
      return null;
    }
    
    return (
      <div onClick={onClick}>
        {translate('welcome', user.name)}
        <button onClick={onConfigureUser}>
          {translate('configure', preferences)}
        </button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  preferences: state.preferences,
});

const mapDispatchToProps = {
  configureUser,
};

export default compose(
  translate,
  clickOutside,
  withUser,
  connect(mapStateToProps, mapDispatchToProps),
)(MyCoolComponent);