AutoMate/frontend/components/InterfaceList.js

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

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

const INTERFACES = gql`
  query INTERFACES {
    interfaces {
      interfaceName
      ports {
        id
      }
      connections {
        id
      }
    }
  }
`

const InterfaceList = props => (
  <Query query={INTERFACES_FULL}>
    {({ data }, loading, error) => {
      if (!data) return <p>No interfaces found.</p>

      const { interfaces } = data
      return (
        <div>
          <h1>Interface List</h1>
          {loading ? (
            <p>Loading interfaces...</p>
          ) : (
              interfaces && interfaces.map(iface => <Interface key={iface.interfaceName} data={iface} />)
            )}
        </div>
      )
    }}
  </Query>
)

export default InterfaceList
export { INTERFACES, INTERFACES_FULL }