4-a.js

// const EmploymentHistory = withRemoteData(
//   fetchEmploymentHistory,
//   getEmployeeEmploymentHistory
// )(EmploymentHistoryTable);

// const EmploymentHistoryMobile = withRemoteData(
//   fetchEmploymentHistory,
//   getEmployeeEmploymentHistory
// )(EmploymentHistoryView);

const EmploymentHistory = withRemoteData(
  fetchEmploymentHistory,
  getEmployeeEmploymentHistory
)(
  withMobileView(
    mediaQuery
  )(
    EmploymentHistoryTable,
    EmploymentHistoryView
  )
);

// 1
const AlumnosDataTable = createDataTable('http://api.utec.edu.pe/alumnos', {
  onItemClick: (item) => console.log(item),
  onHeaderClick: (header) => console.log(item),
  onClick:
})(DataTable);

// 2
const AlumnosDataTable = <DataTable url='http://api.utec.edu.pe/alumnos' />;

const createDataTable = (url, configuration) => (Component) => {
  return class DataTableComponent extends React.Component {
    // componentDidMount() {
    //   this._container.addEventListener('mouseenter', configuration.onMouseEnter);
    //   this._container.addEventListener('click', configuration.onClick);
    // }
    render() {
      <DataTable {...this.props} onMouseEnter={configuration.onMouseEnter}  />
    }
  }
}

// render ->
{
  // this.state.isMobile
  // ? (
  //   <EmploymentHistoryMobile id={employee.get('id')} onActionClick={() => dispatch(showModal(employmentDetailsModal))} />
  // )
  // : <EmploymentHistory id={employee.get('id')} onActionClick={() => dispatch(showModal(employmentDetailsModal))} />

  <EmploymentHistory id={employee.get('id')} onActionClick={() => dispatch(showModal(employmentDetailsModal))} />
}

4-b.js

function withMobileView(mediaQuery) {
  return function(DesktopComponent, MobileComponent) {
    return ...
  }
}

const Table = withMobileView('max-width: 360px')(DesktopTable, MobileTable);

const View = () => (
  <Table data={data} />
);

const withMobileView = (mediaQuery) =>
  (DesktopComponent, MobileComponent) => (
 class ResponsiveComponent extends React.Component {
   constructor(props) {
     super(props);

     this.matchMediaForMobile = window.matchMedia(mediaQuery);
     this.onChangeMatchMedia = matchMedia => this.setState({ isMobile: matchMedia.matches });
     this.state = { isMobile: this.matchMediaForMobile.matches };
   }
   componentDidMount() {
     this.matchMediaForMobile.addListener(this.onChangeMatchMedia);
   }
   componentWillUnmount() {
     this.matchMediaForMobile.removeListener(this.onChangeMatchMedia);
   }
   render() {
     if (this.state.isMobile && MobileComponent) {
       return <MobileComponent {...this.props} />;
     }

     return <DesktopComponent {...this.props} />;
   }
 }
);

4-c.js

<ToggleableTable
    className='payroll-table'
    data={employees.get('results').toJS()}
    summary={() => <PayrollCalculatorSummary {...formatOptions} />}
    summaryData={initialPayrollTotal || updatedPayrollTotal}
    headers={payrollHeaders}
    row={() => <PayrollCalculatorRow {...formatOptions} />}
    detailedData={allEmployeesPayroll}
  />

4-d.js

import React, { PureComponent } from 'react';
import { mediaQueries } from '~utils/constants';

const enhacer = (params) => (Component) => (
  class HigherOrderComponent extends React.Component {
    render() {
      return <Component />;
    }
  }
);

function enhancer(params) {
  return function(Component) {
    return class HigherOrderComponent extends React.Component {
      render() {
        return <Component />;
      }
    }
  }
}

export default enhacer;