AutoMate/frontend/components/Instrument.js

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

const InstrumentForm = props => {
  const [state, setState] = React.useState({
    id: null,
    name: '',
    description: '',
    documents: [],
    interfaces: [],
    subsystems: [],
    ...props.instrument
  })

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

  return (
    <form>
      <fieldset>
        <label htmlFor='name'>Name</label>
        <input type='text' name='name' id='name' placeholder='Name' value={state.name} onChange={onChange} />
        <label htmlFor='description'>Name</label>
        <textarea name='description' id='description' placeholder='Description' value={state.description} onChange={onChange} />
      </fieldset>

    </form>
  )
}

const Instrument = props => {
  const { instrument } = props
  return instrument ? (
    <div>
      <h1>{instrument.name}</h1>
      <p>{instrument.description}</p>
      <Gallery title='Documents' items={['Hallo']} />
      <Gallery title='Interfaces' items={['serial', 'usbtmc'].map(item => <div>{item}</div>)} />
      <Gallery title='Subsystems' items={instrument.subsystems.map(subsystem =>
        <InstrumentSubsystem subsystem={subsystem} />)} />
    </div>
  ) : (
    <p>Instrument not found.</p>
  )
}

export default Instrument
export { InstrumentForm }