AutoMate/frontend/components/Connection.js

import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'
import { INTERFACE_LIST } from './InterfaceList'

const StyledConnection = styled.div`
  fieldset {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  textarea {
    display: block;
    font-family: 'roboto_mono';
  }

  h1 {
    grid-column: span 2;
  }
`

const CONNECTION_COMMAND = gql`
  mutation CONNECTION_COMMAND($connectionId: ID!, $type: String!, $string: String!, $options: String) {
    connectionCommand(connectionId: $connectionId, type: $type, string: $string, options: $options)
  }
`

const CONNECTION_QUERY = gql`
  query CONNECTION_QUERY($id: ID!) {
    connection(id: $id) {
      workerInfo {
        pid
        killed
        exitCode
        signalCode
      }
    }
  }
`

class Connection extends React.Component {
  state = {
    command: ''
  }

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

  render() {
    const { id, device, interfaceName } = this.props.data
    console.log(id, device, interfaceName)
    return (
      <Mutation
        mutation={CONNECTION_COMMAND}
        variables={{
          connectionId: id,
          type: 'ask',
          string: this.state.command
        }}
        refetchQueries={[{ query: INTERFACE_LIST }]}
        fetchPolicy='no-cache'>
        {(connectionCommand, { data, error, loading }) => (
          <StyledConnection>
            <h1>Connection</h1>
            <fieldset>
              <label htmlFor='command'>Command</label>
              <input type='text' value={this.state.command} onChange={this.changeInput} id='command' placeholder='Command' />
            </fieldset>
            <button type='submit' onClick={connectionCommand} disabled={loading}>Send</button>
            <textarea id='response' value={data && data.connectionCommand} readOnly={true} />
            <textarea id='error' value={error} readOnly={true} />
            <Query query={CONNECTION_QUERY} variables={{ id }}>
              {({ data, error, loading }) => {
                if (loading) return null
                if (error) return null
                console.log(data)
                const { connection: { workerInfo } } = data
                return (
                  <>
                    <p>pid: {workerInfo.pid}</p>
                    <p>killed: {workerInfo.killed ? 'yes' : 'no'}</p>

                  </>
                )
              }}
            </Query>
          </StyledConnection>
        )}
      </Mutation>
    )
  }
}

export default Connection