AutoMate/frontend/components/InstrumentCommand.js

import gql from 'graphql-tag'
import { Query, Mutation } from 'react-apollo'

const CREATE_INSTRUMENT_SUBSYSTEM = gql`
  mutation CREATE_INSTRUMENT_SUBSYSTEM($name: String!, $description: String!, $interfaces: [String]!) {
    createInstrument(name: $name, description: $description, interfaces: $interfaces) {
      id
    }
  }
`

class InstrumentCommand extends React.Component {
  state = {
    id: this.props.instrumentCommand ? this.props.instrumentCommand.id : null,
    tag: '',
    name: '',
    description: '',
    instrument: null,
    readString: '',
    writeString: '',
    parameters: []
  }

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

  addComment = event => {
    event.preventDefault()
    const newState = { ...this.state }
    newState.changes.push(this.state.change)
    newState.change = ''
    this.setState(newState)
  }

  render() {
    return (
      <Mutation mutation={CREATE_PROJECT_VERSION} variables={this.state}>
        {(createProjectVersion, { data, error, loading }) => (
          <form onSubmit={async event => {
            event.preventDefault()
            const { data } = await createProjectVersion()
            this.state.id = data.createProjectVersion.id
          }}>
            {!this.props.title && <h1>Project Version</h1>}
            <fieldset id='project-generic'>
              <label htmlFor='name'>Project name</label>
              <input type='text' name='name' id='name' placeholder='Project version name' value={this.state.name} onChange={this.toState} />
              <label htmlFor='date'>Date</label>
              <input type='date' name='date' id='date' placeholder='Project date' value={this.state.date} onChange={this.toState} />
              <label htmlFor='change'>Comments</label>
              <input type='text' name='change' id='change' placeholder='Project change' value={this.state.change} onChange={this.toState} /><button onClick={this.addComment}>Add</button>
              {this.state.changes.map((change, index) => <p key={index}>{change}</p>)}
              {this.props.project || (
                <Query query={QUERY_PROJECTS}>
                  {({ data, error, loading }) => {
                    if (loading) return <p>Loading projects...</p>
                    if (error) return <p>Error: {error.message}</p>
                    if (!data || !data.projects.length) return <p>No projects found.</p>
                    if (!this.state.project) this.setState({ project: data.projects[0].id })
                    return (
                      <label htmlFor="version">
                        <select name="version" id="version">onChange={this.toState}>
                        {data.projects.map(project =>
                          <option key={project.id} value={project.id}>{project.name}</option>)
                          }
                        </select>
                      </label>
                    )
                  }}
                </Query>
              )}
            </fieldset>
            <button type='submit'>Save</button>
          </form>
        )}
      </Mutation>
    )
  }
}

export default InstrumentCommand