He rb new list setup

src/App.js

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
 import { Switch, Route, BrowserRouter } from "react-router-dom";
 import "./App.css";
-import List from "./List/List";
-import AddItem from "./AddItem/AddItem";
 import Footer from "./Footer/Footer";
 import Header from "./Header/Header";
-import Item from "./Item";
+import ItemList from "./List/ItemList";
+import getToken from "./lib/token";
+import Form from "./Form/Form";
 
 function App() {
   const [isListSelected, setIsListSelected] = useState(true);
   const [isAddSelected, setIsAddSelected] = useState(false);
+  const [token, setToken] = useState("");
 
   const selectListHandler = () => {
     setIsListSelected(true);
@@ -21,16 +22,29 @@ function App() {
     setIsAddSelected(true);
   };
 
+  const generateTokenHandler = () => {
+    let newToken = getToken();
+    setToken(newToken);
+    localStorage.setItem(newToken, newToken);
+  };
+
+  const enterTokenHandler = e => {
+    setToken(e.target.value);
+  };
+
   return (
     <BrowserRouter>
       <Header isAddSelected={isAddSelected} onListSelect={selectListHandler} />
       <div className="App">
         <Switch>
           <Route exact path="/">
-            <List />
+            <button onClick={generateTokenHandler}>Get your list token!</button>
+            <p>{token}</p>
+            <p>Or enter an existing token to see your list below.</p>
+            <ItemList token={token} onEnterToken={enterTokenHandler} />
           </Route>
           <Route exact path="/add">
-            <AddItem />
+            <Form token={token} onEnterToken={enterTokenHandler} />
           </Route>
         </Switch>
       </div>

src/Form/Form.js

@@ -1,28 +1,45 @@
 import React, { useState } from "react";
 import classes from "./Form.module.css";
-import firebase from "firebase/app";
+import * as firebase from "../lib/firebase";
 
-const Form = () => {
+const Form = props => {
   const [name, setName] = useState("");
   const [frequency, setFrequency] = useState(0);
   const [date, setDate] = useState("");
 
   const handleSubmit = e => {
     e.preventDefault();
-    let db = firebase.firestore();
+    let db = firebase.fb.firestore();
     let data = {
       name,
       frequency,
       date
     };
-    db.collection("userThree").add(data);
-    // userThree will be replaced by user token
-    // a new doc is created with each submission.
+    db.collection(props.token)
+      .add(data)
+      .then(function() {
+        alert("Item added!");
+      })
+      .catch(function(error) {
+        alert("Something went wrong!");
+        console.error("Error writing document: ", error);
+      });
   };
 
   return (
     <form className={classes.form} onSubmit={e => handleSubmit(e)}>
       <h3 className={classes.formTitle}>Add New Item</h3>
+      <input
+        className={classes.inputName}
+        type="text"
+        name="token"
+        placeholder="List Token"
+        value={props.token}
+        onChange={e => {
+          props.onEnterToken(e);
+        }}
+        required
+      />
       <input
         className={classes.inputName}
         type="text"

src/List/ItemList.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import "firebase/firestore";
+import * as firebase from "../lib/firebase";
+
+const Items = props => {
+  const [dbItems, setdbItems] = useState([]);
+
+  useEffect(() => {
+    if (props.token) {
+      let db = firebase.fb.firestore();
+      db.collection(props.token)
+        .get()
+        .then(querySnapshot => {
+          const data = querySnapshot.docs.map(doc => doc.data());
+          setdbItems(data);
+        });
+    }
+  }, [props.token]);
+
+  return (
+    <div>
+      <input
+        type="text"
+        name="token"
+        placeholder="enter token"
+        onChange={e => {
+          props.onEnterToken(e);
+        }}
+        value={props.token}
+      />
+      <ul>
+        {dbItems.map((item, index) => {
+          return <li key={index}>{item.name}</li>;
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Items;