deleted protected routes

package.json

@@ -6,7 +6,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/bootstrap": "^5.0.12",
     "bootstrap": "^4.6.0",
+    "jquery": "^3.6.0",
+    "popper.js": "^1.16.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
@@ -37,5 +40,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Nav from './components/Nav';
 import Signin from './components/auth/Signin';
@@ -12,6 +12,7 @@ import Groups from './components/Groups';
 import MyGroups from './components/MyGroups';
 
 import UpdatePool from './components/UpdatePool';
+import Home from './components/Home';
 import Main from './components/Main';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
@@ -34,6 +35,7 @@ function App() {
 					<Route component={Group} path="/group/:id" />
 					<Route component={Pool} path="/group/:id/pool/:poolid" />
 					<Route component={Profile} path="/profile" />
+					<Route component={Home} path="/" />
 				</Switch>
 			</BrowserRouter>
 		</div>

src/components/CreatePool.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
 const CreatePool = (props) => {
 	const onSubmit = (e) => {

src/components/Group.js

@@ -60,7 +60,7 @@ const Group = (props) => {
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {
-					setState(data);
+					setPools(data.Pools);
 				}
 			});
 	};
@@ -88,9 +88,9 @@ const Group = (props) => {
 			</a>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
 				<br></br>
-				{state.Pools.map((Pool, el) => {
+				{pools.map((pool, index) => {
 					let background;
-					if (el % 2 == 0) {
+					if (index % 2 === 0) {
 						background = '#F1EAE8';
 					} else {
 						background = '#FFFFFF';
@@ -100,16 +100,16 @@ const Group = (props) => {
 							className="card card-body text-left"
 							style={{ backgroundColor: background }}
 						>
-							<a href={'/Pool/' + Pool.id} className="card-title">
-								{Pool.pool_title}
+							<a href={'/Pool/' + pool.id} className="card-title">
+								{pool.pool_title}
 							</a>
 							<p className="text-left">
-								Capacity: {Pool.participants.length} / {Pool.capacity}
+								Capacity: {pool.participants.length} / {pool.capacity}
 							</p>
-							<p className="text-left">Start Time: {Pool.start_time}</p>
-							<p className="text-left">End Time: {Pool.end_time}</p>
+							<p className="text-left">Start Time: {pool.start_time}</p>
+							<p className="text-left">End Time: {pool.end_time}</p>
 							<p className="text-warning">
-								{maybePluralize(Pool.comments.length, 'comment')}
+								{maybePluralize(pool.comments.length, 'comment')}
 							</p>
 						</div>
 					);

src/components/Home.js

@@ -0,0 +1,16 @@
+export default function Home() {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+			}}
+		>
+			<h1>Home</h1>
+			<div style={{ display: 'flex', flexDirection: 'row' }}>
+				<a href="/">Log In with Ion</a>
+			</div>
+		</div>
+	);
+}

src/components/UpdatePool.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 
 const UpdatePool = (props) => {
 	const id = props.match.params.id;
-	const [state, setState] = useState({
+	const [pool, setPool] = useState({
 		id: 1,
 		pool_title: 'TJ Carpool',
 		pool_text: 'Carpool from TJ track to homes',
@@ -13,15 +13,15 @@ const UpdatePool = (props) => {
 		comments: ['What is the covid vaccination status of all the participants?'],
 	});
 
-	const callAPI = () => {
+	const callAPI = useCallback(() => {
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {
-					setState(data);
+					setPool(data);
 				}
 			});
-	};
+	}, [id]);
 	const onSubmit = (e) => {
 		e.preventDefault();
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/update_pool`)
@@ -32,7 +32,7 @@ const UpdatePool = (props) => {
 	};
 	useEffect(() => {
 		callAPI();
-	}, []);
+	}, [callAPI]);
 	return (
 		<div
 			className="bg-dark"