2. As a user, I want to be able to navigate within the app

README.md

@@ -7,9 +7,11 @@ How it works is that you will enter items (e.g., “Greek yogurt” or “Paper
 The app will work in many of the same ways as [iNeedToBuy.xyz](https://app.ineedtobuy.xyz/) (on which our project is based) with the exception that we will not be implementing barcode scanning (that feature would add a lot of scope to the project and in my experience wasn’t all that useful).
 
 For additional details, please check out the [project brief](PROJECT-BRIEF.md).
+
 <hr>
 
 ## ↓↓↓ create-react-app boilerplate ↓↓↓
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ### Available Scripts

package.json

@@ -10,6 +10,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-firestore": "^1.0.1",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0"
   },
   "scripts": {

src/App.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import List from './pages/List';
-import AddItem from './pages/AddItem';
+import AppRouter from './AppRouter';
 
 function App() {
   return (
     <main>
-      <AddItem />
-      <List />
+      <AppRouter/>
     </main>
   );
 }

src/AppRouter.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route, Switch } from 'react-router';
+import AddItem from './pages/AddItem';
+import List from './pages/List';
+
+export default function AppRouter() {
+  return (
+    <>
+      <Switch>
+        <Route exact path="/" component={List} />
+        <Route path="/add-item" component={AddItem} />
+      </Switch>
+    </>
+  );
+}

src/index.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import * as serviceWorker from './serviceWorker';
 import { FirestoreProvider } from 'react-firestore';
 import { fb as firebase } from './lib/firebase.js';
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 
 ReactDOM.render(
   <FirestoreProvider firebase={firebase}>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </FirestoreProvider>,
   document.getElementById('root'),
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/pages/AddItem.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { withFirestore } from 'react-firestore';
+import { Link } from 'react-router-dom';
 
 const AddItem = ({ firestore }) => {
   const [name, setName] = useState('');
@@ -22,18 +23,21 @@ const AddItem = ({ firestore }) => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <label>
-        Add Item:
-        <input
-          value={name}
-          placeholder="apples"
-          type="text"
-          onChange={handleChange}
-        />
-      </label>
-      <input type="submit" value="Add Item" />
-    </form>
+    <>
+      <Link to="/">Go back to list</Link>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Add Item:
+          <input
+            value={name}
+            placeholder="apples"
+            type="text"
+            onChange={handleChange}
+          />
+        </label>
+        <input type="submit" value="Add Item" />
+      </form>
+    </>
   );
 };
 // Wrap this component in the higher order component withFirestore to directly access the database

src/pages/List.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { FirestoreCollection } from 'react-firestore';
+import { Link } from 'react-router-dom';
 import Loading from '../components/Loading';
 
 const List = () => {
   return (
-    <section>
+    <>
+      <Link to="/add-item">Click here to add an item</Link>
       <FirestoreCollection
         // Specify the path to the collection you're pulling data from
         path="items"
@@ -24,7 +26,7 @@ const List = () => {
           );
         }}
       />
-    </section>
+    </>
   );
 };