AutoMate/frontend/components/CharacterizationForm.js

import { Query, Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import { QUERY_PROJECTS } from './ProjectList'

const ADD_CHARACTERIZATION = gql`
  mutation ADD_CHARACTERIZATION($name: String!, $projectVersion: ID!) {
    createCharacterization(name: $name, projectVersion: $projectVersion) {
      id
      name
      projectVersion {
        id
        name
      }
      measurementRuns {
        id
        name
      }
    }
  }
`

const QUERY_PROJECT_VERSIONS = gql`
  query QUERY_PROJECT_VERSIONS($projectId: ID!) {
    projectVersions(where: { project: { id: $projectId } }) {
      id
      name
    }
  }
`

class CharacterziationForm extends React.Component {
  state = {
    id: null,
    name: '',
    project: null,
    projectVersion: null
  }

  toState = event => {
    this.setState({ [event.target.name]: event.target.value })
  }

  render () {
    return (
      <Mutation mutation={ADD_CHARACTERIZATION} variables={this.state}>
        {(addCharacterization, { data, error, loading }) => (
          <form
            onSubmit={async event => {
              event.preventDefault()
              const { data } = await addCharacterization()
              const { createCharacterization } = data
              this.setState({ id: createCharacterization.id })
            }}
          >
            <fieldset>
              <label htmlFor='name'>Characterization name</label>
              <input
                type='text'
                name='name'
                id='name'
                placeholder='Characterization name'
                value={this.state.name}
                onChange={this.toState}
              />
              <Query query={QUERY_PROJECTS}>
                {({ data, error, loading }) => {
                  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> }

                  const { projects } = data
                  if (!this.state.project && projects.length) { this.setState({ project: projects[0].id }) }
                  return (
                    <>
                      <label htmlFor='project'>Project</label>
                      <select
                        name='project'
                        id='project'
                        onChange={this.toState}
                      >
                        {data.projects.map(project => (
                          <option key={project.id} value={project.id}>
                            {project.name}
                          </option>
                        ))}
                      </select>
                      <Query
                        query={QUERY_PROJECT_VERSIONS}
                        variables={{ projectId: this.state.project }}
                      >
                        {({ data, error, loading }) => {
                          if (error) {
                            return (
                              <p>
                                Error loading project version: ${error.message}
                              </p>
                            )
                          }
                          if (loading) return <p>Loading data...</p>
                          if (!data || !data.projectVersions.length) { return <p>No project version found.</p> }

                          const { projectVersions } = data
                          if (!this.state.projectVersion) {
                            this.setState({
                              projectVersion: projectVersions[0].id
                            })
                          }
                          return (
                            <>
                              <label htmlFor='projectVersion' />
                              <select
                                name='projectVersion'
                                id='projectVersion'
                                onChange={this.toState}
                              >
                                {data.projectVersions.map(projectVersion => (
                                  <option
                                    key={projectVersion.id}
                                    value={projectVersion.id}
                                  >
                                    {projectVersion.name}
                                  </option>
                                ))}
                              </select>
                            </>
                          )
                        }}
                      </Query>
                    </>
                  )
                }}
              </Query>
              <button type='submit'>{data ? 'Save' : 'Add'}</button>
            </fieldset>
          </form>
        )}
      </Mutation>
    )
  }
}

export default CharacterziationForm