AutoMate/frontend/components/Interface.js

import gql from 'graphql-tag'
import { Query } from 'react-apollo'
import Gallery from './Gallery'
import Port from './Port'
import Connection from './Connection'
import InterfaceOption from './InterfaceOption'

const INTERFACES = gql`
  query INTERFACES {
    interfaces {
      name
    }
  }
`

const InterfaceFormFields = props => {
  const { state, onChange } = props

  const toState = event => {
    let interfaces = state
    const ifaceSelected = event.target.checked
    const index = state.findIndex(iface => iface === event.target.value)
    if (ifaceSelected && index < 0) {
      interfaces = [...state, event.target.value]
    }
    if (!ifaceSelected && index >= 0) {
      interfaces = [...state.slice(0, index), ...state.slice(index + 1)]
    }
    onChange(interfaces)
  }

  return (
    <Query query={INTERFACES}>
      {({ data, loading, error }) => {
        if (loading) return <p>Loading interfaces</p>
        if (error) return <p>Error loading interfaces: {error.message}</p>
        const { interfaces } = data
        if (!interfaces.length) return <p>No interfaces found</p>
        return (
          <fieldset>
            {interfaces.map(iface => (
              <label key={iface.name} htmlFor='interface'>
                {iface.name}
                <input
                  type='checkbox'
                  name='interface'
                  id='interface'
                  value={iface.name}
                  checked={state.includes(iface.name)}
                  onChange={toState}
                />
              </label>
            ))}
          </fieldset>
        )
      }}
    </Query>
  )
}

const Interface = props => {
  const {
    workerScript,
    interfaceName,
    options,
    ports,
    connections
  } = props.data
  return (
    <div>
      <h2>{interfaceName}</h2>
      <p>Script:</p>
      <p>{workerScript}</p>
      <Gallery
        title='ports'
        items={ports.map(port => (
          <Port key={port.device} data={port} />
        ))}
      />
      <Gallery
        title='connections'
        items={connections.map(connection => (
          <Connection key={connection.id} data={connection} />
        ))}
      />
      <Gallery
        title='options'
        items={options.map(option => (
          <InterfaceOption key={option.name} data={option} />
        ))}
      />
    </div>
  )
}

export default Interface
export { InterfaceFormFields }