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