High Order Function -> Form of forms!

AddTaskContainer.js

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { withForm } from './withForm';

import { AddTask } from '../ui/AddTask';

export const addTaskMutation = graphql(
  gql`
    mutation addTask($task: AddTaskInput!) {
      addTask(task: $task) {
        _id
        description
        details
      }
    }
  `,
  {
    name: 'addTask',
  }
);

const taskQuery = gql`
  query Task($taskId: ID!) {
    task(_id: $taskId) {
      _id
      description
      details
      dueDate
    }
  }
`;

const data = graphql(taskQuery, {
  skip: ownProps => !ownProps.match.params._id,
  options: ownProps => ({ variables: { taskId: ownProps.match.params._id } }),
});


export const AddTaskContainer = withForm(AddTask, addTaskMutation, data);

withForm.js

import { withRouter } from 'react-router-dom';
import { withAlert } from '@codeftw/future-web-ui-alert';
import { withContext, withState, compose } from 'recompose';
import { withApollo } from 'react-apollo';


export const withForm = (Component, ...args) => {
  return compose(
    withRouter,
    withApollo,
    withAlert,
    ...args
  )(Component);
};