From ec834c8f7f3634bfba4b23b4aa99367ea6d86dc3 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 11 Apr 2021 14:44:33 -0400
Subject: [PATCH] fix the individual pool page

---
 src/App.tsx                 | 4 ++--
 src/api/utils.ts            | 4 +---
 src/components/Pool.tsx     | 4 ++--
 src/components/PoolPage.tsx | 6 +++++-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8afc18d..d4775dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Nav from './components/Nav';
 
 import Group from './components/Group';
-import Pool from './components/Pool';
 import Profile from './components/Profile';
 import CreateGroup from './components/CreateGroup';
 import Groups from './components/Groups';
@@ -16,6 +15,7 @@ import './App.css';
 import Authenticator from './components/Authenticator';
 import AuthenticationWrapper from './components/AuthenticationWrapper';
 import Logout from './components/Logout';
+import PoolPage from './components/PoolPage';
 
 function App() {
 	return (
@@ -29,7 +29,7 @@ function App() {
 					<Route component={MyGroups} path="/mygroups" />
 					<Route component={UpdatePool} path="/update_pool" />
 					<Route component={Group} path="/groups/:id" />
-					<Route component={Pool} path="/pools/:id" />
+					<Route component={PoolPage} path="/pools/:id" />
 					<Route component={Groups} path="/groups" />
 					<Route component={Profile} path="/profile" />
 					<Route component={Logout} path="/logout" />
diff --git a/src/api/utils.ts b/src/api/utils.ts
index 894828e..249708d 100644
--- a/src/api/utils.ts
+++ b/src/api/utils.ts
@@ -87,9 +87,7 @@ export function makeAPIGetCall(
 export function makeAPIDeleteCall(url: string) {
 	return new Promise<AxiosResponse>((resolve, reject) => {
 		axios
-			.delete(url, {
-				headers: { Authorization: 'Bearer ' + getSessionId() },
-			})
+			.delete(url, { headers: { Authorization: 'Bearer ' + getSessionId() } })
 			.then((successfulResponse) => resolve(successfulResponse))
 			.catch((error) => {
 				if (error.response?.status === 401) {
diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx
index cdf0840..33fb99c 100644
--- a/src/components/Pool.tsx
+++ b/src/components/Pool.tsx
@@ -46,9 +46,9 @@ export default function Pool({
 	pool: Carpool.Pool;
 	triggerUpdate: Function;
 }) {
+	console.log(pool);
 	const { user } = useContext(AuthenticationContext);
 	const [address, setAddress] = useState('');
-	const [comment, setComment] = useState('');
 	const handleChange = (address: string) => {
 		setAddress(address);
 	};
@@ -88,7 +88,7 @@ export default function Pool({
 					setCommentStatus('errored');
 				});
 		},
-		[]
+		[pool._id, triggerUpdate]
 	);
 
 	const onRegister = useCallback(() => {
diff --git a/src/components/PoolPage.tsx b/src/components/PoolPage.tsx
index c9c4929..01f4343 100644
--- a/src/components/PoolPage.tsx
+++ b/src/components/PoolPage.tsx
@@ -17,5 +17,9 @@ export default function PoolPage() {
 
 	useEffect(() => fetchData(), [fetchData]);
 
-	return pool ? <Pool pool={pool} triggerUpdate={fetchData} /> : null;
+	if (pool != null) {
+		return <Pool pool={pool} triggerUpdate={fetchData} />;
+	} else {
+		return null;
+	}
 }