From 1d20268443c70753cf66b7829da8a9186540c456 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sat, 10 Apr 2021 13:20:31 -0400
Subject: [PATCH] add sign in with ion button

---
 src/App.js              |   2 +-
 src/components/Home.js  |   7 +--
 src/components/Pools.js | 120 ++++++++++++++++++++--------------------
 3 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7aa52c7..a888e3c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,7 +20,6 @@ function App() {
 			<BrowserRouter>
 				<Nav />
 				<Switch>
-					<Route component={Home} path="/" />
 					<Route component={Signup} path="/register" />
 					<Route component={Signin} path="/login" />
 					<Route component={Main} path="/about" />
@@ -29,6 +28,7 @@ function App() {
 					<Route component={Pools} path="/pools" />
 					<Route component={Pool} path="/pool/:id" />
 					<Route component={Profile} path="/profile" />
+					<Route component={Home} path="/" />
 				</Switch>
 			</BrowserRouter>
 		</div>
diff --git a/src/components/Home.js b/src/components/Home.js
index 7263234..116ca78 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -9,12 +9,7 @@ export default function Home() {
 		>
 			<h1>Home</h1>
 			<div style={{ display: 'flex', flexDirection: 'row' }}>
-				<a href="/signin" className="mx-2">
-					Sign In
-				</a>
-				<a href="/signup" className="mx-2">
-					Sign Up
-				</a>
+				<a href="/">Log In with Ion</a>
 			</div>
 		</div>
 	);
diff --git a/src/components/Pools.js b/src/components/Pools.js
index deaa176..8590347 100644
--- a/src/components/Pools.js
+++ b/src/components/Pools.js
@@ -1,65 +1,63 @@
 import React, { useState, useEffect } from 'react';
 
 const Pools = (props) => {
-	const [state, setState] = useState({
-		Pools: [
-			{
-				id: 1,
-				pool_title: 'TJ Carpool',
-				pool_text: 'Carpool from TJ track to homes',
-				start_time: '4/10/2021 3:00 PM',
-				end_time: '4/10/2021 4:00 PM',
-				capacity: 2,
-				participants: [],
-				comments: [
-					'What is the covid vaccination status of all the participants?',
-				],
-			},
-			{
-				id: 2,
-				pool_title: 'TJ Carpool',
-				pool_text: 'Carpool from TJ track to homes',
-				start_time: '4/10/2021 3:00 PM',
-				end_time: '4/10/2021 4:00 PM',
-				capacity: 2,
-				participants: [],
-				comments: [
-					'What is the covid vaccination status of all the participants?',
-				],
-			},
-			{
-				id: 3,
-				pool_title: 'TJ Carpool',
-				pool_text: 'Carpool from TJ track to homes',
-				start_time: '4/10/2021 3:00 PM',
-				end_time: '4/10/2021 4:00 PM',
-				capacity: 2,
-				participants: [],
-				comments: [
-					'What is the covid vaccination status of all the participants?',
-				],
-			},
-			{
-				id: 4,
-				pool_title: 'TJ Carpool',
-				pool_text: 'Carpool from TJ track to homes',
-				start_time: '4/10/2021 3:00 PM',
-				end_time: '4/10/2021 4:00 PM',
-				capacity: 2,
-				participants: [],
-				comments: [
-					'What is the covid vaccination status of all the participants?',
-				],
-			},
-		],
-	});
+	const [pools, setPools] = useState([
+		{
+			id: 1,
+			pool_title: 'TJ Carpool',
+			pool_text: 'Carpool from TJ track to homes',
+			start_time: '4/10/2021 3:00 PM',
+			end_time: '4/10/2021 4:00 PM',
+			capacity: 2,
+			participants: [],
+			comments: [
+				'What is the covid vaccination status of all the participants?',
+			],
+		},
+		{
+			id: 2,
+			pool_title: 'TJ Carpool',
+			pool_text: 'Carpool from TJ track to homes',
+			start_time: '4/10/2021 3:00 PM',
+			end_time: '4/10/2021 4:00 PM',
+			capacity: 2,
+			participants: [],
+			comments: [
+				'What is the covid vaccination status of all the participants?',
+			],
+		},
+		{
+			id: 3,
+			pool_title: 'TJ Carpool',
+			pool_text: 'Carpool from TJ track to homes',
+			start_time: '4/10/2021 3:00 PM',
+			end_time: '4/10/2021 4:00 PM',
+			capacity: 2,
+			participants: [],
+			comments: [
+				'What is the covid vaccination status of all the participants?',
+			],
+		},
+		{
+			id: 4,
+			pool_title: 'TJ Carpool',
+			pool_text: 'Carpool from TJ track to homes',
+			start_time: '4/10/2021 3:00 PM',
+			end_time: '4/10/2021 4:00 PM',
+			capacity: 2,
+			participants: [],
+			comments: [
+				'What is the covid vaccination status of all the participants?',
+			],
+		},
+	]);
 
 	const callAPI = () => {
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/pools/`)
 			.then((response) => response.json())
 			.then((data) => {
 				if (data !== undefined) {
-					setState(data);
+					setPools(data.Pools);
 				}
 			});
 	};
@@ -86,9 +84,9 @@ const Pools = (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';
@@ -98,16 +96,16 @@ const Pools = (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>
 					);