From 7de92f4773de1c2fd0268f8ac057707dd8f0e022 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 14 Jul 2021 08:56:56 -0400
Subject: [PATCH] make event signups only show people who don't have a carpool

---
 src/components/Event/EventCarpools.tsx | 46 ++++++++++++--------------
 src/components/Event/EventSignups.tsx  | 14 ++++++--
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/Event/EventCarpools.tsx b/src/components/Event/EventCarpools.tsx
index 0807733..4702251 100644
--- a/src/components/Event/EventCarpools.tsx
+++ b/src/components/Event/EventCarpools.tsx
@@ -122,33 +122,29 @@ export default function Carpools() {
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<h3 style={{ marginBottom: '0' }}>Carpools</h3>
-			{alreadyInCarpool ? (
-				<span>You are already in a carpool for this event</span>
+			{creationStatus === 'completed' ? (
+				<span>
+					Created{' '}
+					<UILink href={`/carpools/${createdCarpoolId}`}>your carpool</UILink>!
+				</span>
+			) : myCarpool ? (
+				<span>
+					You are already in a carpool for this event:{' '}
+					<UILink href={`/carpools/${myCarpool.id}`}>{myCarpool.name}</UILink>
+				</span>
 			) : (
 				<>
-					{creationStatus !== 'completed' ? (
-						<>
-							<span>Available to drive?</span>
-							<UIButton
-								onClick={createEmptyCarpool}
-								style={{ backgroundColor: lightgrey }}
-							>
-								{creationStatus === null
-									? 'Create Empty Carpool'
-									: creationStatus === 'pending'
-									? 'Creating...'
-									: 'Errored'}
-							</UIButton>
-						</>
-					) : (
-						<span>
-							Created{' '}
-							<UILink href={`/carpools/${createdCarpoolId}`}>
-								your carpool
-							</UILink>
-							!
-						</span>
-					)}
+					<span>Available to drive?</span>
+					<UIButton
+						onClick={createEmptyCarpool}
+						style={{ backgroundColor: lightgrey }}
+					>
+						{creationStatus === null
+							? 'Create Empty Carpool'
+							: creationStatus === 'pending'
+							? 'Creating...'
+							: 'Errored'}
+					</UIButton>
 				</>
 			)}
 			{event.carpools.map((carpool) => (
diff --git a/src/components/Event/EventSignups.tsx b/src/components/Event/EventSignups.tsx
index 50d9b09..643ebcb 100644
--- a/src/components/Event/EventSignups.tsx
+++ b/src/components/Event/EventSignups.tsx
@@ -3,6 +3,7 @@ import { useMe } from '../hooks';
 import latlongdist, { R_miles } from '../../lib/latlongdist';
 import { IEventSignup, IEvent } from '../types';
 import usePlace from '../usePlace';
+import { useMemo } from 'react';
 
 export default function EventSignups({
 	event,
@@ -13,15 +14,24 @@ export default function EventSignups({
 	signups: IEventSignup[];
 	myPlaceId: string | null;
 }) {
+	const carpools = event.carpools;
 	const placeDetails = usePlace(myPlaceId);
 	const locationLongitude = event.latitude;
 	const locationLatitude = event.longitude;
 	const me = useMe();
 
+	const signupsWithoutCarpool = useMemo(() => {
+		// A list of users not in any carpool
+		const members = carpools.map((c) => c.members);
+		const allMembers = members.reduce((a, b) => a.concat(b), []);
+		const allMembersIds = allMembers.map((m) => m.id);
+		return signups.filter((s) => !allMembersIds.includes(s.user.id));
+	}, [signups, carpools]);
+
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
-			<h3 style={{ marginBlockEnd: '0' }}>People</h3>
-			{signups.map(({ latitude, longitude, user }) => {
+			<h3 style={{ marginBlockEnd: '0' }}>People without a carpool</h3>
+			{signupsWithoutCarpool.map(({ latitude, longitude, user }) => {
 				if (user.id === me?.id) {
 					return null;
 				}