AutoMate/frontend/components/Connection.js

import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'
import { INTERFACES_FULL } 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 SEND_COMMAND = gql`
  mutation SEND_COMMAND($connectionId: ID!, $command: ConnectionCommand!) {
    sendCommand(connectionId: $connectionId, command: $command)
  }
`

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

class Connection extends React.Component {
  state = {
    data: '',
    type: 'ask',
    typeCustom: ''
  }

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

  render () {
    const { id } = this.props.data
    return (
      <Mutation
        mutation={SEND_COMMAND}
        variables={{
          connectionId: id,
          command: {
            type:
              this.state.type === 'custom'
                ? this.state.typeCustom
                : this.state.type,
            data: this.state.data
          }
        }}
        refetchQueries={[{ query: INTERFACES_FULL }]}
        fetchPolicy='no-cache'
      >
        {(sendCommand, { data, error, loading }) => {
          return (
            <StyledConnection>
              <h1>Connection</h1>
              <fieldset>
                <label htmlFor='data'>Command</label>
                <input
                  type='text'
                  value={this.state.data}
                  onChange={this.changeInput}
                  id='data'
                  name='data'
                  disabled={this.state.type === 'read'}
                  placeholder='Command'
                />
              </fieldset>
              <h2>Command type</h2>
              <label htmlFor='type-read'>read</label>
              <input
                id='type-read'
                name='type'
                type='radio'
                value='read'
                checked={this.state.type === 'read'}
                onChange={this.changeInput}
              />
              <label htmlFor='type-ask'>ask</label>
              <input
                id='type-ask'
                name='type'
                type='radio'
                value='ask'
                checked={this.state.type === 'ask'}
                onChange={this.changeInput}
              />
              <label htmlFor='type-write'>write</label>
              <input
                id='type-write'
                name='type'
                type='radio'
                value='write'
                checked={this.state.type === 'write'}
                onChange={this.changeInput}
              />
              <label htmlFor='type-custom'>Custom...</label>
              <input
                id='type-custom'
                name='type'
                type='radio'
                value='custom'
                checked={this.state.type === 'custom'}
                onChange={this.changeInput}
              />
              <input
                id='typeCustom'
                name='typeCustom'
                type='text'
                name='typeCustom'
                value={this.state.typeCustom}
                disabled={this.state.type !== 'custom'}
                onChange={this.changeInput}
              />
              <button type='submit' onClick={sendCommand} disabled={loading}>
                Send
              </button>
              <textarea
                id='response'
                value={data && data.sendCommand}
                readOnly
              />
              <textarea id='error' value={error} readOnly />
              <Query query={CONNECTION_QUERY} variables={{ id }}>
                {({ data, error, loading }) => {
                  if (loading) return null
                  if (error) return null
                  const {
                    connection: { workerProcess }
                  } = data
                  return (
                    <>
                      <p>pid: {workerProcess.pid}</p>
                      <p>killed: {workerProcess.killed ? 'yes' : 'no'}</p>
                      <p>exitCode: {workerProcess.exitCode}</p>
                      <p>signalCode: {workerProcess.signalCode}</p>
                      <p>spawnfile: {workerProcess.spawnfile}</p>
                      <p>spawnargs: {workerProcess.spawnargs.join(', ')}</p>
                    </>
                  )
                }}
              </Query>
            </StyledConnection>
          )
        }}
      </Mutation>
    )
  }
}

export default Connection