AutoMate/frontend/components/ProjectForm.js

import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'
import { ProjectVersionFields, ProjectVersionState } from './ProjectVersionForm'

const CREATE_PROJECT = gql`
  mutation CREATE_PROJECT(
    $name: String!
    $abbreviation: String!
    $description: String
  ) {
    createProject(
      name: $name
      abbreviation: $abbreviation
      description: $description
    ) {
      id
    }
  }
`

const QUERY_PROJECTS = gql`
  query QUERY_PROJECTS {
    projects {
      id
      name
      abbreviation
      description
      files {
        id
        path
        name
        description
        filename
        mimetype
        size
      }
      versions {
        id
        name
        changes
        date
      }
    }
  }
`

const ProjectSelector = props => (
  <Query query={QUERY_PROJECTS}>
    {({ data, loading, error }) => {
      if (error) return <p>Error loading project: ${error.message}</p>
      if (loading) return <p>Loading data...</p>
      if (!data || !data.projects.length) return <p>No project found.</p>
      if (!props.value) {
        props.onChange({
          target: { name: 'project', value: data.projects[0].id }
        })
      }
      const selector = (
        <select value={12} {...props}>
          {data.projects.map(project => (
            <option key={project.id} value={project.id}>
              {project.name}
            </option>
          ))}
        </select>
      )
      return selector
    }}
  </Query>
)

const ProjectState = {
  id: null,
  name: '',
  abbreviation: '',
  description: '',
  files: [],
  versions: []
}

const ProjectFields = props => {
  const [state, setState] = React.useState({ ...ProjectState })

  const updateState = event => {
    setState({
      ...state,
      [event.target.name]: event.target.value
    })
    props.onChange(event, state)
  }

  return (
    <fieldset>
      {props.title && <legend>{props.title}</legend>}
      <label htmlFor='name'> Project name</label>
      <input
        type='text'
        name='name'
        id='name'
        placeholder='Project name'
        value={state.name}
        onChange={updateState}
      />
      <label htmlFor='abbreviation'>Project abbreviation</label>
      <input
        type='text'
        name='abbreviation'
        id='abbreviation'
        placeholder='Project abbreviation'
        value={state.abbreviation}
        onChange={updateState}
      />
      <label htmlFor='description'>Project description</label>
      <textarea
        name='description'
        id='description'
        placeholder='Project description'
        value={state.description}
        onChange={updateState}
      />
    </fieldset>
  )
}

const Project = props => {
  const [state, setState] = React.useState({
    ...ProjectState,
    ...props.project
  })

  const toState = (event, newState) => {
    setState({ ...newState })
  }

  const updateVersions = (event, newState, index) => {
    const versions = [...state.versions]
    versions[index] = newState
    setState({ ...state, versions })
  }

  const updateFiles = (event, newState, index) => {
    const files = [...state.files]
    files[index] = newState
    setState({ ...state, files })
  }

  return (
    <Mutation
      mutation={CREATE_PROJECT}
      variables={state}
      refetchQueries={[{ query: QUERY_PROJECTS }]}
    >
      {(createProject, { data, error, loading }) => (
        <form
          onSubmit={async event => {
            event.preventDefault()
            console.log('form submitted.')
            const { data } = await createProject()
            state.id = data.createProject.id
          }}
        >
          <ProjectFields title='Project' state={state} onChange={toState} />
          {state.versions.map((version, index) => (
            <ProjectVersionFields
              title='Project version'
              key={index}
              state={version}
              onChange={(event, state) => updateVersions(event, state, index)}
            />
          ))}
          <button
            type='button'
            onClick={event => {
              setState({
                ...state,
                versions: [...state.versions, { ...ProjectVersionState }]
              })
            }}
          >
            Add project version
          </button>
          {state.files.map((file, index) => (
            <FileFields
              title='Files'
              key={index}
              state={file}
              onChange={(event, state) => updateFiles(event, state, index)}
            />
          ))}
          <button
            type='button'
            onClick={event => {
              setState({ ...state, files: [...state.files, { ...FileState }] })
            }}
          >
            Add file
          </button>
          <button type='submit'>
            {state.id && state.id !== '__NEW__' ? 'Save' : 'Add'}
          </button>
        </form>
      )}
    </Mutation>
  )
}

export default Project
export { ProjectSelector, QUERY_PROJECTS, ProjectFields }