Actions.jsx

// @flow
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { useApolloClient } from '@apollo/react-hooks';

import type { Dispatch } from 'redux';

import consumerRequestActions from './consumerRequestActionsMap';
import jobActions from './jobActionsMap';

import type { GET_JOB_getJob as Job } from './workbench/queries/__generated__/GET_JOB';
import type { GET_CONSUMER_REQUEST_getConsumerRequest as ConsumerRequest } from './workbench/queries/__generated__/GET_CONSUMER_REQUEST';

type Props = {|
  consumerRequest?: ConsumerRequest,
  dispatch: Dispatch<any>,
  job?: Job,
|};

const Actions = ({ consumerRequest, dispatch, job }: Props) => {
  const client = useApolloClient();

  let actions = [];

  if (consumerRequest) {
    actions = consumerRequestActions.get(consumerRequest.status) || [];
  } else if (job) {
    actions = jobActions.get(job.status) || [];
  }

  return (
    <div>
      {actions.map(({ action, label }) => (
        <button
          onClick={() => {
            if (consumerRequest) {
              action({ client, dispatch, data: consumerRequest });
            } else if (job) {
              action({ client, dispatch, data: job });
            }
          }}
          key={label}
          type="button"
        >
          {label}
        </button>
      ))}
    </div>
  );
};

Actions.propTypes = {
  consumerRequest: PropTypes.object,
  dispatch: PropTypes.func.isRequired,
  job: PropTypes.object,
};

Actions.defaultProps = {
  consumerRequest: undefined,
  job: undefined,
};

export default connect()(Actions);

common.js

// @flow
import type ApolloClient from 'apollo-client';
import type { Dispatch } from 'redux';

import type { GET_JOB_getJob as Job } from './components/workbench/queries/__generated__/GET_JOB';
import type { GET_CONSUMER_REQUEST_getConsumerRequest as ConsumerRequest } from './components/workbench/queries/__generated__/GET_CONSUMER_REQUEST';

export type Action = {|
  action: ({
    client: ApolloClient,
    dispatch: Dispatch<any>,
    data: Job | ConsumerRequest,
  }) => any,
  label: string,
|};

ConsumerRequestActionsMap.js

// @flow
import { CONSUMER_REQUEST_STATUS } from '../constants/consumerRequestStatuses';

import type { Action } from './common';

const consumerRequestActions: Map<number, Action[]> = new Map([
  [
    CONSUMER_REQUEST_STATUS.pending_approval,
    [
      {
        action: () => {},
        label: 'Test',
      },
    ],
  ],
]);

export default consumerRequestActions;

jobActionsMap.js

// @ flow
import { JOB_STATUS } from '../constants/jobStatuses';
import {
  requestSuspendJob,
  updateJobStatus,
} from '../redux/actions/jobActions';

import type { Action } from './common';

const jobActions: Map<number, Action[]> = new Map([
  [
    JOB_STATUS.provider_paused,
    [
      {
        action: ({ dispatch, client, data }) =>
          dispatch(
            updateJobStatus(
              data.id,
              client,
              JOB_STATUS.provider_resume_requested,
            ),
          ),
        label: 'Resume',
      },
      {
        action: ({ dispatch, data }) => dispatch(requestSuspendJob(data.id)),
        label: 'Suspend',
      },
      {
        action: ({ dispatch, client, data }) =>
          dispatch(
            updateJobStatus(data.id, client, JOB_STATUS.provider_completed),
          ),
        label: 'Complete',
      },
    ],
  ],
]);

export default jobActions;