AutoMate/frontend/components/Instrument.js

import gql from 'graphql-tag'
import { Query, Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
import { InterfaceFormFields } from './Interface'
import InstrumentCommand, {
  InstrumentCommandFormFields,
  InstrumentCommandFields
} from './InstrumentCommand'
import File, { FileFormFields, FileFields } from './File'
import Gallery from './Gallery'
import { INTERFACES_FULL } from './InterfaceList'

const CREATE_INSTRUMENT = gql`
  mutation CREATE_INSTRUMENT(
    $id: ID
    $name: String!
    $manufacturer: String!
    $description: String
    $picture: ID
    $interfaces: [String]!
    $documents: [FileUpload]!
    $commands: [InstrumentCommandInput]!
  ) {
    createInstrument(
      id: $id
      name: $name
      manufacturer: $manufacturer
      description: $description
      picture: $picture
      interfaces: $interfaces
      documents: $documents
      commands: $commands
    ) {
      id
    }
  }
`

const INSTRUMENT_QUERY = gql`
  query INSTRUMENT_QUERY($id: ID!) {
    instrument(id: $id) {
      id
      name
      manufacturer
      description
      picture
      documents {
        id
        path
        name
        description
        filename
        mimetype
        size
      }
      interfaces
      commands {
        id
        tag
        name
        description
        readString
        writeString
      }
      parameters {
        id
        tag
        name
        description
        type
        values
      }
    }
  }
`

const INSTRUMENTS_QUERY = gql`
  query INSTRUMENTS_QUERY {
    instruments {
      id
      name
      manufacturer
      description
      picture
    }
  }
`

const InstrumentFields = {
  id: null,
  name: '',
  manufacturer: '',
  description: '',
  picture: '',
  documents: [],
  interfaces: [],
  commands: [],
  parameters: []
}

class InstrumentForm extends React.Component {
  state = {
    ...InstrumentFields,
    ...this.props.instrument
  }

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

  toSubState = (name, index, subState) => {
    this.setState({
      [name]: [
        ...this.state[name].slice(0, index),
        subState,
        ...this.state[name].slice(index + 1)
      ]
    })
  }

  render () {
    return (
      <Mutation
        mutation={CREATE_INSTRUMENT}
        variables={this.state}
        refetchQueries={[{ query: INSTRUMENTS_QUERY }]}
      >
        {(createInstrument, { data, error, loading }) => (
          <form
            onSubmit={event => {
              event.preventDefault()
              createInstrument()
            }}
          >
            <h1>Create new instrument.</h1>
            <h2>Instrument data</h2>
            <fieldset>
              <label htmlFor='name'>
                Name
                <input
                  type='text'
                  name='name'
                  id='name'
                  placeholder='Name'
                  required
                  value={this.state.name}
                  onChange={this.toState}
                />
              </label>
              <label htmlFor='manufacturer'>
                Manufacturer
                <input
                  type='text'
                  name='manufacturer'
                  id='manufacturer'
                  placeholder='Manufacturer'
                  required
                  value={this.state.manufacturer}
                  onChange={this.toState}
                />
              </label>
              <label htmlFor='description'>
                Description
                <textarea
                  name='description'
                  id='description'
                  placeholder='Description'
                  value={this.state.description}
                  onChange={this.toState}
                />
              </label>
            </fieldset>
            <h2>Documents</h2>
            {this.state.documents.map((file, index) => (
              <FileFormFields
                key={index}
                state={file}
                onChange={subState =>
                  this.toSubState('documents', index, subState)
                }
              />
            ))}
            <button
              type='button'
              onClick={event => {
                this.setState({
                  documents: [...this.state.documents, FileFields]
                })
              }}
            >
              Add document
            </button>
            <h2>Interfaces</h2>
            <InterfaceFormFields
              state={this.state.interfaces}
              onChange={interfaces => this.setState({ interfaces })}
            />
            <h2>Commands</h2>
            {this.state.commands.map((command, index) => (
              <InstrumentCommandFormFields
                key={index}
                state={command}
                onChange={subState =>
                  this.toSubState('commands', index, subState)
                }
              />
            ))}
            <button
              type='button'
              onClick={event => {
                this.setState({
                  commands: [...this.state.commands, InstrumentCommandFields]
                })
              }}
            >
              Add command
            </button>
            <button type='submit'>Save Instrument</button>
          </form>
        )}
      </Mutation>
    )
  }
}

const Instrument = props => {
  const { instrument } = props
  return instrument ? (
    <div>
      <h1>{instrument.name}</h1>
      <h2>{instrument.manufacturer}</h2>
      <p>{instrument.description}</p>
      <p>{instrument.picture}</p>
      <Gallery
        title='Documents'
        items={instrument.documents.map(document => (
          <File data={document} />
        ))}
      />
      <Gallery
        title='Interfaces'
        items={instrument.interfaces.map(iface => (
          <div>{iface}</div>
        ))}
      />
      <Gallery
        title='Commands'
        items={instrument.commands.map(command => (
          <InstrumentCommand command={command} />
        ))}
      />
    </div>
  ) : (
    <p>Instrument not found.</p>
  )
}

export default Instrument
export { InstrumentFields, InstrumentForm }
export { INSTRUMENT_QUERY, INSTRUMENTS_QUERY }