Add React Router (#9)

* Added router and CSS

* re-ordered some components, made CSS changes, added 404 page

* Added alt text to image on Error404 component

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/components/App.js

@@ -1,12 +1,17 @@
 import React from "react";
+import { Routes, Route } from "react-router-dom";
 import TruthTally from "./TruthTally";
 import Header from "./Header";
+import Error404 from "./Error404";
 
 const App = () => {
   return (
     <div className="main-container">
       <Header />
-      <TruthTally />
+      <Routes>
+        <Route path="/" element={<TruthTally />} />
+        <Route path="/*" element={<Error404 />} />
+      </Routes>
     </div>
   );
 };

src/components/Error404.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+const Error404 = () => {
+  return (
+    <div className="error404-div">
+      <h1>Error 404</h1>
+      <img
+        src={require("../images/logo192.png")}
+        alt="Truth Tally logo"
+        width="100px"
+      ></img>
+      <h2>Not Found</h2>
+      <NavLink to="/">Start a new list</NavLink>
+    </div>
+  );
+};
+
+export default Error404;

src/components/Header.js

@@ -1,12 +1,7 @@
-import React from 'react';
-
+import React from "react";
 
 const Header = () => {
-    return (
-        <header>
-            Truth Tally
-        </header>
-    );
-}
+  return <header>Truth Tally's</header>;
+};
 
-export default Header;
+export default Header;

src/components/TruthTally/ItemsList.js

@@ -1,30 +1,24 @@
-import React from 'react';
-import Item from './Item';
-import AddItemForm from './AddItemForm';
+import React from "react";
+import Item from "./Item";
+import AddItemForm from "./AddItemForm";
 
-const ItemsList = ({items, handleAddItem, gameState, handleRemoveItem}) => {
-
-  if (gameState === 'start') {
+const ItemsList = ({ items, handleAddItem, gameState, handleRemoveItem }) => {
+  if (gameState === "start") {
     return (
-        <div className="items-list">
-
-        <AddItemForm 
-        handleAddItem={handleAddItem}
-        items={items}
-        />
-                  {items.map(item =>
-        <Item
-          item={item.item}
-          handleRemoveItem={handleRemoveItem}
-          score={item.score}
-          id={item.id}
-          key={item.id.toString()}
-        />
-      )}
-
-        </div>
+      <div className="items-list">
+        <AddItemForm handleAddItem={handleAddItem} items={items} />
+        {items.map((item) => (
+          <Item
+            item={item.item}
+            handleRemoveItem={handleRemoveItem}
+            score={item.score}
+            id={item.id}
+            key={item.id.toString()}
+          />
+        ))}
+      </div>
     );
   }
-}
+};
 
-export default ItemsList;
+export default ItemsList;

src/components/TruthTally/TruthTally.js

@@ -63,13 +63,13 @@ function TruthTally() {
     <div className="truthtally-container">
       <LoadingSpinner {...props} />
 
-      <ItemsList {...props} />
+      <Controls {...props} />
 
       <Stage {...props} />
 
       <Results {...props} />
 
-      <Controls {...props} />
+      <ItemsList {...props} />
     </div>
   );
 }

src/components/TruthTally/index.css

@@ -1,11 +1,21 @@
 .truthtally-container {
-  background: #ffffff;
+  background: white;
   min-width: 375px;
-  max-width: 700px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
   margin: auto;
   box-shadow: 0 2px 0 rgb(119, 0, 0);
   overflow: hidden;
   border: 1px;
+  border-style: solid;
+  overflow-y: scroll;
+  justify-content: flex-start;
+}
+
+.items-list {
+  flex-grow: 1;
 }
 
 .list-item {
@@ -16,16 +26,13 @@
   font-size: 1.2em;
   border-bottom: solid 2px #eeeeee;
   letter-spacing: 2px;
+  color: #2f2366;
 }
 
 .list-item:hover .remove-item {
   visibility: visible;
 }
 
-.list-item {
-  color: #2f2366;
-}
-
 .player-item {
   flex-grow: 1;
   line-height: 3.5em;
@@ -166,16 +173,17 @@
   }
 }
 
+/* Mobile View */
+
 @media screen and (max-width: 768px) {
   .truthtally-container {
     width: 100%;
-    height: 100%;
     box-shadow: none;
     border-radius: 0;
     border: none;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex-grow: 1;
   }
 
   .list-item {
@@ -185,12 +193,9 @@
   }
 
   .items-list {
-    flex: 1 1 auto;
-    display: flex;
     flex-direction: column;
-    overflow-y: scroll;
     justify-content: left;
-    align-items: center;
+    justify-content: flex-end;
   }
 
   .player-item {
@@ -217,18 +222,18 @@
   }
 
   .stage-container {
-    height: auto;
     flex-direction: column;
     padding: 10px;
     flex: 1 1 auto;
     display: flex;
     justify-content: center;
     align-items: center;
+
+    height: 100px;
   }
 
   .item-card {
     width: 100%;
-    min-height: 60px;
     margin-bottom: 10px;
     font-size: 1.8em;
     padding: 0px;
@@ -283,10 +288,10 @@
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    overflow-y: scroll;
     justify-content: left;
     align-items: center;
     width: 100%;
+    flex-grow: 1;
   }
 
   li {
@@ -314,4 +319,10 @@
     font-weight: bold;
     margin-top: 10px;
   }
+  .controls {
+    padding: 10px;
+    background-color: rgb(119, 0, 0);
+    display: flex;
+    justify-content: center;
+  }
 }