/* src/components/Home.js */
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { API, graphqlOperation } from 'aws-amplify';
import { createRun } from '../graphql/mutations';

const initialState = { name: '' };

const Home = () => {
  const [formState, setFormState] = useState(initialState);
  const history = useHistory();

  function setInput(key, value) {
    setFormState({ ...formState, [key]: value })
  }

  async function addRun() {
    try {
      if (!formState.name) return;
      const run = { ...formState }
      setFormState(initialState)
      let response = await API.graphql(graphqlOperation(createRun, { input: run }))
      history.push("/run/" + response.data.createRun.id);
    }
    catch (err) {
      console.log('error creating run:', err)
    }
  }

  return (
    <div>
      <h2>Start a run</h2>
      <input
        onChange={event => setInput('name', event.target.value)}
        value={formState.name}
        placeholder="Name"
      />
      <button onClick={addRun}>Run!</button>
    </div>
  )
}

export default Home;