u-fit/frontend/components/trainingForm.js

import { Formik, Form } from 'formik'
import { Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
import * as Yup from 'yup'

import { TextInput } from '../lib/forms'
import { CREATE_TRAINING } from '../lib/graphql'

const TrainingAdoption = adopt({
  mutation: ({ render }) => (
    <Mutation mutation={CREATE_TRAINING}>
      {(createTraining, { loading, data, error }) => render({ createTraining, loading, data, error })}
    </Mutation>
  ),
  formik: ({ mutation: { createTraining }, render }) => (
    <Formik
      initialValues={{
        title: 'Winter HIIT 7',
        type: 'HIIT',
        content: [],
        trainingDate: Date.now(),
        location: 'Yoga room',
        attendance: 0,
        published: false
      }}
      validationSchema={Yup.object({
        title: Yup.string()
          .required('required'),
        type: Yup.string(),
        trainingDate: Yup.date()
          .required('required'),
        location: Yup.string()
          .required('required'),
        attendance: Yup.number()
          .integer('integer number'),
        published: Yup.bool()
      })}
      onSubmit={values => console.log(values)}
    >
      {render}
    </Formik>
  )
})

const TrainingForm = props => (
  <TrainingAdoption>
    {({ mutation: { createTraining, data, loading, error }, formik }) => (
      <Form>
        <h2>Create Training</h2>
        <TextInput
          label='Title'
          name='title'
          type='text'
          placeholder='title'
        />
        <TextInput
          label='Type'
          name='type'
          type='text'
          placeholder='type'
        />
        <TextInput
          label='Training date'
          name='trainingDate'
          type='date'
        />
        <TextInput
          label='Location'
          name='location'
          type='text'
          placeholder='location'
        />
        <TextInput
          label='Attendance'
          name='attendance'
          type='number'
          placeholder='attendance'
        />
        <TextInput
          label='Published'
          name='published'
          type='text'
          placeholder='published'
        />
        <button type='submit'>Create!</button>
      </Form>
    )}
  </TrainingAdoption>
)

export default TrainingForm