From 08e0a0aed23ed3ddb20ee4071bc7f6bb81f36d8c Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 8 Jul 2021 00:41:55 -0400
Subject: [PATCH] add api for fetching carpool

---
 src/components/Carpool.tsx    | 24 +++++++++++++++++++-----
 src/components/WheelShare.tsx | 16 ++--------------
 src/components/api.ts         |  4 ++++
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/Carpool.tsx b/src/components/Carpool.tsx
index ffce9dc..a852c04 100644
--- a/src/components/Carpool.tsx
+++ b/src/components/Carpool.tsx
@@ -1,3 +1,6 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getCarpool } from './api';
 import { ICarpool } from './types';
 import UISecondaryBox from './UISecondaryBox';
 
@@ -13,13 +16,24 @@ function MemberList({ members }: { members: ICarpool['members'] }) {
 	);
 }
 
-export default function Carpool({ carpool }: { carpool: ICarpool }) {
+export default function Carpool() {
+	const id = +useParams<{ id: string }>().id;
+	const [carpool, setCarpool] = useState<ICarpool | null>(null);
+
+	useEffect(() => {
+		getCarpool(id).then(setCarpool);
+	}, [id]);
+
 	return (
 		<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
-			<h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
-			{carpool.description}
-			<h3>Members</h3>
-			<MemberList members={carpool.members} />
+			{carpool && (
+				<>
+					<h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
+					{carpool.description}
+					<h3>Members</h3>
+					<MemberList members={carpool.members} />
+				</>
+			)}
 		</UISecondaryBox>
 	);
 }
diff --git a/src/components/WheelShare.tsx b/src/components/WheelShare.tsx
index fe8a1b2..ffdada2 100644
--- a/src/components/WheelShare.tsx
+++ b/src/components/WheelShare.tsx
@@ -1,5 +1,4 @@
 import logout from './Authentication/logout';
-import Carpool from './Carpool';
 import Events from './Events';
 import Groups from './Groups';
 import { useMe } from './hooks';
@@ -7,24 +6,13 @@ import UIPressable from './UIPressable';
 import UIPrimaryTitle from './UIPrimaryTitle';
 
 export default function WheelShare() {
-	const user = useMe()!;
+	const { name } = useMe()!;
 
 	return (
 		<>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
 
-			<Carpool
-				carpool={{
-					name: 'Carpool',
-					id: 0,
-					description: 'Test carpool',
-					eventId: null,
-					members: [],
-					invitations: [],
-				}}
-			/>
-
-			{user.name}
+			{name}
 			<UIPressable onClick={logout}>Log out</UIPressable>
 
 			<Groups />
diff --git a/src/components/api.ts b/src/components/api.ts
index ba09bd2..86e93f1 100644
--- a/src/components/api.ts
+++ b/src/components/api.ts
@@ -178,3 +178,7 @@ export async function getReceivedInvitationsAndRequests() {
 		'/users/@me/received_requests_and_invites'
 	)) as IInvitation[];
 }
+
+export async function getCarpool(id: number) {
+	return await get('/carpools/' + id);
+}