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