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
    }
  }
`

const ProjectVersionFields = props => (
  <fieldset>
    {props.title && <legend>{props.title}</legend>}
    <label htmlFor='name'>Project name</label>
    <input type='text' name='name' id='name' placeholder='Project version name' value={props.state.name} onChange={props.onChange} />
    <label htmlFor='date'>Date</label>
    <input type='date' name='date' id='date' placeholder='Project date' value={props.state.date} onChange={props.onChange} />
    <label htmlFor='change'>Comments</label>
    <input type='text' name='change' id='change' placeholder='Project change' value={props.state.change} onChange={props.onChange} /><button onClick={props.addChange}>Add</button>
  </fieldset>
)

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

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

  addComment = event => {
  }

  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
          }}>
            <ProjectVersionFields title="Project Version" state={this.state} addChange={event => {
              event.preventDefault()
              const newChanges = this.state.changes
              newChanges.push(this.state.change)
              this.setState({ changes: newChanges, change: '' })
            }} onChange={this.toState} />
            {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} />}
            <button type='submit'>Save</button>
          </form>
        )}
      </Mutation>
    )
  }
}

export default ProjectVersionForm