AutoMate/frontend/components/ProjectVersionForm.js

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

const CREATE_PROJECT_VERSION = gql`
  mutation CREATE_PROJECT_VERSION($name: String!, $date: String!, $project: ID!, $changes: [String]!) {
    createProjectVersion(name: $name, date: $date, project: $project, changes: $changes) {
      id
    }
  }
`

class ProjectVersionForm extends React.Component {
  state = {
    id: this.props.project ? this.props.project.id : null,
    name: '',
    date: '',
    change: '',
    changes: [],
    project: null
  }

  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 || <ProjectSelector name='project' id='project' value={this.state.project} onChange={this.toState} />}
            </fieldset>
            <button type='submit'>Save</button>
          </form>
        )}
      </Mutation>
    )
  }
}

export default ProjectVersionForm