active carpools page

src/components/ActiveCarpools/ActiveCarpools.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { getActiveCarpools } from '../api';
+import { ICarpool } from '../types';
+import UISecondaryBox from '../UI/UISecondaryBox';
+import UISecondaryHeader from '../UI/UISecondaryHeader';
+
+function ActiveCarpoolListItem({ carpool }: { carpool: ICarpool }) {
+	return (
+		<UISecondaryBox>
+			<UISecondaryHeader>
+				<a href={'/carpools/' + carpool.id}>{carpool.name}</a>
+			</UISecondaryHeader>
+		</UISecondaryBox>
+	);
+}
+
+export default function ActiveCarpools() {
+	const [activeCarpools, setActiveCarpools] = useState<ICarpool[]>([]);
+
+	useEffect(() => {
+		getActiveCarpools().then(setActiveCarpools);
+	}, []);
+
+	return (
+		<>
+			<h1>Carpools</h1>
+			<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+				{activeCarpools.map((carpool) => (
+					<ActiveCarpoolListItem carpool={carpool} key={carpool.id} />
+				))}
+			</div>
+		</>
+	);
+}

src/components/ActiveEvents/Events.tsx

@@ -1,17 +1,17 @@
 import { useEffect } from 'react';
-import { getEvents } from './api';
-import { IEvent } from './types';
-import EventStream from './EventStream';
-import useImmutable from './useImmutable';
+import { getActiveEvents } from '../api';
+import EventStream from '../EventStream';
+import { IEvent } from '../types';
+import useImmutable from '../useImmutable';
 
-export default function Events() {
+export default function ActiveEvents() {
 	const [events, setEvents] = useImmutable<IEvent[]>([]);
 
 	const hasEvents = events.length > 0;
 
 	useEffect(() => {
 		if (!hasEvents) {
-			getEvents().then(setEvents);
+			getActiveEvents().then(setEvents);
 		}
 	}, [hasEvents, setEvents]);
 

src/components/Event/EventCarpoolCreateButton.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { lightgrey } from '../../lib/colors';
 import { createCarpool } from '../api';
 import { useMe } from '../hooks';
 import UIButton from '../UI/UIButton';
 import UILink from '../UI/UILink';
 import EventContext from './EventContext';
+import { useMyCarpool } from './EventHooks';
 
 type CreationStatus = null | 'pending' | 'completed' | 'errored';
 
@@ -15,13 +16,7 @@ export default function EventCarpoolCreateButton() {
 	const [createdCarpoolId, setCreatedCarpoolId] = useState<null | number>(null);
 
 	const me = useMe()!;
-	const myCarpool = useMemo(
-		() =>
-			event.carpools.find((carpool) =>
-				carpool.members.some((member) => member.id === me.id)
-			),
-		[event.carpools, me.id]
-	);
+	const myCarpool = useMyCarpool();
 
 	const createCarpoolCallback = useCallback(async () => {
 		setCreationStatus('pending');

src/components/Event/EventHooks.ts

@@ -1,14 +1,39 @@
-import { useContext, useMemo } from 'react';
+import { useContext, useDebugValue, useMemo } from 'react';
 import { useMe } from '../hooks';
 import EventContext from './EventContext';
 
 export function useSignups() {
-	return useContext(EventContext).event.signups;
+	const signups = useContext(EventContext).event.signups;
+
+	useDebugValue(signups);
+
+	return signups;
 }
 
 export function useMySignup() {
 	const signups = useSignups();
 	const me = useMe()!;
 
-	return useMemo(() => signups[me.id] ?? null, [signups, me.id]);
+	const signup = useMemo(() => signups[me.id] ?? null, [signups, me.id]);
+
+	useDebugValue(signup);
+
+	return signup;
+}
+
+export function useMyCarpool() {
+	const me = useMe()!;
+	const { event } = useContext(EventContext);
+
+	const carpool = useMemo(
+		() =>
+			event.carpools.find((carpool) =>
+				carpool.members.some((member) => member.id === me.id)
+			),
+		[event.carpools, me.id]
+	);
+
+	useDebugValue(carpool);
+
+	return carpool;
 }

src/components/WheelShare.tsx

@@ -1,4 +1,5 @@
-import Events from './Events';
+import ActiveCarpools from './ActiveCarpools/ActiveCarpools';
+import ActiveEvents from './ActiveEvents/Events';
 import Groups from './Groups/Groups';
 import Header from './Header/Header';
 
@@ -8,7 +9,8 @@ export default function WheelShare() {
 			<Header />
 
 			<Groups />
-			<Events />
+			<ActiveCarpools />
+			<ActiveEvents />
 		</>
 	);
 }

src/components/api.ts

@@ -218,3 +218,11 @@ export async function cancelCarpoolRequest(carpoolId: number) {
 export async function getSentRequestsAndInvites() {
 	return (await get('/users/@me/sent_requests_and_invites')) as IInvitation[];
 }
+
+export async function getActiveEvents() {
+	return (await get('/users/@me/active_events')) as IEvent[];
+}
+
+export async function getActiveCarpools() {
+	return (await get('/users/@me/active_carpools')) as ICarpool[];
+}