An ordinary code

ReassessmentLayout.js

import React, { useState } from 'react';
import { Fab, Grid, Menu, MenuItem, Paper, Table, TableBody, TableCell, TableRow, } from '@material-ui/core';
import { Done } from '@material-ui/icons';
import { withStyles, createStyles } from '@material-ui/core/styles';
import { compose, map, prop, find, isEmpty } from 'ramda';
import { usePopupState, bindTrigger, bindMenu } from 'material-ui-popup-state/hooks';
import { withRouter } from 'react-router';
import { useTranslation } from 'react-i18next';

import { loadedGraphql } from '~components/hoc';
import { compact } from '~utils';
import SKILL_REASSESSMENT_QUERY from './skillReassessment.graphql';
import EmployeeSearch from './EmployeeSearch';
import Knowledges from './Knowledges';

const styles = (theme) =>
  createStyles({
    container: {
      padding: theme.spacing.unit * 2,
    },
    paper: {
      marginTop: theme.spacing.unit * 2,
      padding: theme.spacing.unit * 2,
      overflowX: 'auto',
    },
    headCell: {
      padding: Number(theme.spacing.unit),
      verticalAlign: 'top',
      fontWeight: 'bold',
      fontSize: 'medium',
    },
    bodyCell: {
      padding: Number(theme.spacing.unit),
      verticalAlign: 'top',
    },
  });


const gotoEmployeeReassessment = (history) => (option) =>
  history.replace(`/reassessment/${option.value}`);

const ReassessmentLayout = ({
  match,
  history,
  classes,
  applyEffectiveSince,
  data: { employeesByIds, seniorities: viewerSeniorities },
}) => {
  const [compareToEmployees, setCompareToEmployees] = useState([]);
  const popupState = usePopupState({ variant: 'popper', popupId: 'effectiveSinceMenu' });
  const { t } = useTranslation();

  const employee = find(
    (employee) => employee.id === match.params.id,
    employeesByIds,
  );

  const toggleSelected = (employeeId) => [employeeId];
  const toggleEmployees = compose(
    setCompareToEmployees,
    toggleSelected,
    prop('value'),
  );

  const hasDraft = (employee) =>
    employee &&
    !isEmpty(
      compact(
        compose(
          map(prop('draft')),
          prop('knowledges'),
        )(employee),
      ),
    );

  const EffectiveMenuItem = ({ title }) =>
    <MenuItem onClick={async () => {
      await applyEffectiveSince(title);
      popupState.close();
    }}>
      {t(`reassessment.${title}`)}
    </MenuItem>

  return (
    <Grid container className={classes.container}>
      <Grid container justify="space-between" alignItems="center">
        <Grid item xs={9} sm={6} lg={4}>
          <EmployeeSearch
            onChange={gotoEmployeeReassessment(history)}
            selected={match.params.id}
            placeholder={t('reassessment.employeeSearch')}
          />
        </Grid>
        <Grid item>{employee && 'compare to'}</Grid>
        <Grid item xs={9} sm={6} lg={4}>
          {employee && (
            <EmployeeSearch
              onChange={toggleEmployees}
              withBlank
              selected={employeesByIds[0] && employeesByIds[0].id}
              placeholder={`${t('reassessment.employeeSearchToCompare')} ${employee.name}`}
            />
          )}
        </Grid>
        <Grid item>
          <Fab disabled={!hasDraft(employee)} color="primary" {...bindTrigger(popupState)}>
            <Done />
          </Fab>
          <Menu
            {...bindMenu(popupState)}
            getContentAnchorEl={null}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'right',
            }}
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
          >
            <EffectiveMenuItem title="effectiveNow" />
            <EffectiveMenuItem title="effectiveTomorrow" />
            <EffectiveMenuItem title="effectiveEndPeriod" />
          </Menu>
        </Grid>
      </Grid>

      <Paper className={classes.paper}>
        {employee && employee.id && employee.position.expectations.length > 0 ? (
          <Table>
            <TableBody>
              <TableRow>
                <TableCell />
                <TableCell className={classes.headCell}>
                  {t('reassessment.seniority.current')}
                </TableCell>
                <TableCell className={classes.headCell}>
                  {t('reassessment.seniority.reassessTo')}
                </TableCell>
                {employeesByIds.map((employee) => (
                  <TableCell className={classes.headCell} key={employee.id}>
                    {employee.name}
                  </TableCell>
                ))}
                <TableCell className={classes.headCell} />
              </TableRow>
              <Knowledges
                {...{ employee, classes, viewerSeniorities, compareToEmployees }}
              />
            </TableBody>
          </Table>
        ) : (
          <p>{t('reassessment.selectAnEmployee')}</p>
        )}
      </Paper>
    </Grid>
  );
};

const enhance = compose(
  withRouter,
  loadedGraphql(SKILL_REASSESSMENT_QUERY, {
    options: ({ match, compareToEmployees }) => ({
      variables: {
        employeeIds: [match.params.id].concat(compareToEmployees),
      },
    }),
  }),
  withStyles(styles),
);

export default enhance(ReassessmentLayout);