AutoMate/frontend/components/Connection.js

import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation } 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)
  }
`

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
    return (
      <Mutation
        mutation={CONNECTION_COMMAND}
        variables={{
          connectionId: this.props.data.id,
          type: 'ask',
          string: this.state.command
        }}
        refetchQueries={[{ query: INTERFACE_LIST }]}>
        {(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} />
          </StyledConnection>
        )}
      </Mutation>
    )
  }
}

export default Connection