AutoMate/frontend/components/ProjectForm.js

import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'
import { FileFields, FileState, uploadFile } from './FileUpload'
import { ProjectVersionFields, ProjectVersionState } from './ProjectVersionForm'

const CREATE_PROJECT = gql`
  mutation CREATE_PROJECT($name: String!, $abbreviation: String!, $description: String) {
    createProject(name: $name, abbreviation: $abbreviation, description: $description) {
      id
    }
  }
`

const QUERY_PROJECTS = gql`
  query QUERY_PROJECTS {
    projects {
      id
      name
      abbreviation
      description
      files {
        id
        path
        name
        description
        filename
        mimetype
        size
      }
      versions {
        id
        name
        changes
        date
      }
    }
  }
`

const ProjectSelector = props => (
  <Query query={QUERY_PROJECTS}>
    {({ data, loading, error }) => {
      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>)
      if (!props.value) props.onChange({ target: { name: 'project', value: data.projects[0].id } })
      const selector = (
        <select {...props}>
          {data.projects.map(project =>
            <option key={project.id} value={project.id}>{project.name}</option>
          )}
        </select>
      )
      return selector
    }}
  </Query >
)

const ProjectFields = props => (
  <fieldset>
    {props.title && <legend>{props.title}</legend>}
    <label htmlFor='name'>Project name</label>
    <input type='text' name='name' id='name' placeholder='Project name' value={props.state.name} onChange={props.onChange} />
    <label htmlFor='abbreviation'>Project abbreviation</label>
    <input type='text' name='abbreviation' id='abbreviation' placeholder='Project abbreviation' value={props.state.abbreviation} onChange={props.onChange} />
    <label htmlFor='description'>Project description</label>
    <textarea name='description' id='description' placeholder='Project description' value={props.state.description} onChange={props.onChange} />
  </fieldset>
)

class Project extends React.Component {
  state = {
    id: null,
    name: '',
    abbreviation: '',
    description: '',
    files: [],
    versions: [],
    ...this.props.project
  }

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

  render() {
    return (
      <Mutation mutation={CREATE_PROJECT} variables={this.state} refetchQueries={[{ query: QUERY_PROJECTS }]}>
        {(createProject, { data, error, loading }) => (
          <form onSubmit={async event => {
            event.preventDefault()
            const { data } = await createProject()
            this.state.id = data.createProject.id
          }}>
            <ProjectFields title="Project" state={this.state} onChange={this.toState} />
            {this.state.versions.map(version =>
              <ProjectVersionFields title="Project version" state={version} onChange={this.toState} />
            )}
            <button onClick={event => this.state.versions.push(ProjectVersionState)}>Add project version</button>
            {this.state.files.map(file =>
              <FileFields state={file} onChange={this.toState} />
            )}
            <button onClick={event => this.state.files.push(FileState)}>Add file</button>
            <button type='submit'>{this.state.id && this.state.id !== "__NEW__" ? "Save" : "Add"}</button>
          </form>
        )}
      </Mutation>
    )
  }
}

export default Project
export { ProjectSelector, QUERY_PROJECTS, ProjectFields }