reactJS app

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

Amplify.Logger.LOG_LEVEL = "DEBUG"
const myAppConfig = {
  'aws_appsync_graphqlEndpoint': '...',
  'aws_appsync_region': '...',
  'aws_appsync_authenticationType': 'API_KEY',
  'aws_appsync_apiKey': '...'
}
Amplify.configure(myAppConfig);


const OnCommandSubscription = `
subscription OnCreateCommand {
  onCreateCommands {
    __typename
    command
    id
    timestamp
    action
  }
}`;


const ListCommands = `query listCommands($command: String!) {
  queryCommandsByCommandTimestampIndex(command: $command) {
    items {
      id
      timestamp
      action
    }
  }
}`;

class App extends Component {
  render() {
    const ListView = ({ events }) => (
      <div>
        <h3>All events</h3>
        <ul>
          {events.map(event => <li key={event.id}>{event.action} ({event.id} {event.timestamp})</li>)}
        </ul>
      </div>
    );

    return (
      <Connect query={graphqlOperation(ListCommands, { command: "Voice" })}
        subscription={graphqlOperation(OnCommandSubscription)}
        onSubscriptionMsg={(prev, { onCreateCommands }) => {
          const { queryCommandsByCommandTimestampIndex: { items } } = prev;
          items.push(onCreateCommands);
          return prev;
        }}
      >
        {({ data: { queryCommandsByCommandTimestampIndex } }) => (
          queryCommandsByCommandTimestampIndex && <ListView events={queryCommandsByCommandTimestampIndex.items} />
        )
        }
      </Connect>
    );
  }
}

export default App;