AutoMate/frontend/components/Connection.js

import styled from 'styled-components'
import gql from 'graphql-tag'
import { ApolloConsumer } from 'react-apollo'

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_SEND_QUERY = gql`
  query CONNECTION_SEND_QUERY($connectionId: String!, $command: String!) {
    connectionCommand(connectionId: $connectionId, command: $command)
  }
`

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

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

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

  render() {
    const { connectionId } = this.props

    return (
      <ApolloConsumer>
        {(client) => (
          <StyledConnection>
            <h1>Connection</h1>
            <fieldset>

              {!connectionId && (
                <>
                  <label htmlFor='connectionId'>Connection ID</label>
                  <input type='text' value={this.state.connectionId} onChange={this.changeInput} id='connectionId' placeholder='Connection ID' />
                </>
              )}
              <label htmlFor='command'>Command</label>
              <input type='text' value={this.state.command} onChange={this.changeInput} id='command' placeholder='Command' />
            </fieldset>
            <button type='submit' onClick={event => this.sendCommand(event, client)}>Send</button>
            <textarea id='response' value={this.state.result} readOnly={true} />
          </StyledConnection>
        )}
      </ApolloConsumer>
    )
  }
}

export default Connection