Voice Commands - ReactApp - List Only

App.js

import React, { Component } from 'react';
import './App.css';
import Amplify, { graphqlOperation } from "aws-amplify";
import { Connect } from "aws-amplify-react";

// TODO configure to point to your API
Amplify.configure({
  'aws_appsync_region': 'us-west-2',
  'aws_appsync_authenticationType': 'API_KEY',
  'aws_appsync_graphqlEndpoint': '...',
  'aws_appsync_apiKey': '...'
});

// GraphQL query to get list of commands.
const ListColorCommands = `
query listColorCommands {
  listColorCommands {
    items {
      id
      timestamp
      color
    }
  }
}
`;

class App extends Component {
  render() {
    const ListView = ({ commands }) => (
      <div>
        <h2>All commands</h2>
        <ul>
          {commands.map(command => <li key={command.id}>[{command.timestamp} {command.id}] {command.color}</li>)}
        </ul>
      </div>
    );

    return (
      <Connect query={graphqlOperation(ListColorCommands)}>
        {({ data: { listColorCommands } }) => (
          listColorCommands && <ListView commands={listColorCommands.items} />
        )
        }
      </Connect>
    );
  }
}

export default App;