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"></label>
                              <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