AutoMate/frontend/components/InstrumentSubsystem.js

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

const CREATE_INSTRUMENT_SUBSYSTEM = gql`
  mutation CREATE_INSTRUMENT_SUBSYSTEM($name: String!, $description: String!, $interfaces: [String]!) {
    createInstrument(name: $name, description: $description, interfaces: $interfaces) {
      id
    }
  }
`

class InstrumentSubsystem extends React.Component {
  state = {
    id: null,
    name: '',
    description: '',
    commands: [],
    parameters: [],
    subsystems: [],
    ...this.props.instrumentSubsystem
  }

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

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p>{this.state.description}</p>
        <Gallery title='Commands' items={[]} />
        <Gallery title='Parameters' items={[]} />
        <Gallery title='Subsystems' items={[]} />
      </div>
    )
  }
}

export default InstrumentSubsystem