AutoMate/frontend/components/ProjectForm.js

import { useState } from 'react'
import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'
import { FileFields, FileState, uploadFile } from './FileUpload'
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] = 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] = 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 }