AutoMate/frontend/components/InterfaceList.js

import gql from 'graphql-tag'
import { Query } from 'react-apollo'
import Interface from './Interface'

const INTERFACE_LIST = gql`
  query INTERFACE_LIST {
    interfaces {
      interfaceName
      workerScript
      ports {
        id
        device
        interfaceName
        name
        description
      }
      connections {
        id
        device
        interfaceName
      }
      options {
        name
        type
        description
        values
      }
    }
  }
`

class InterfaceList extends React.Component {
  state = {
    connectionId: '',
    command: '',
    result: ''
  }

  sendCommand = async (event, client) => {
    event.preventDefault()
    const { data, error } = await client.query({
      query: CONNECTION_SEND_QUERY,
      variables: this.state
    })
    console.log(data, error)
    const { result } = data
    this.setState({ result })
  }

  changeInput = event => {
    this.setState({ [event.target.id]: event.target.value })
  }

  render() {
    return (
      <Query query={INTERFACE_LIST}>
        {({data}, loading, error) => {
          const {interfaces} = data
          return (
            <div>
            <h1>Interface List</h1>
            {interfaces.map(iface => <Interface key={iface.interfaceName} data={iface} />)}
            </div>
        )}}
      </Query>
    )
  }
}

export default InterfaceList
export {INTERFACE_LIST}