working run detail and routing!

src/components/Home.js

@@ -0,0 +1,43 @@
+/* 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 todo:', 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;