add api for fetching carpool

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' }}>
+			{carpool && (
+				<>
 					<h2 style={{ textAlign: 'center' }}>{carpool.name}</h2>
 					{carpool.description}
 					<h3>Members</h3>
 					<MemberList members={carpool.members} />
+				</>
+			)}
 		</UISecondaryBox>
 	);
 }

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
+			{name}
-				carpool={{
-					name: 'Carpool',
-					id: 0,
-					description: 'Test carpool',
-					eventId: null,
-					members: [],
-					invitations: [],
-				}}
-			/>
-
-			{user.name}
 			<UIPressable onClick={logout}>Log out</UIPressable>
 
 			<Groups />

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);
+}