improve carpool members list

src/components/Carpool/Carpool.tsx

@@ -167,8 +167,8 @@ export default function Carpool({ id }: { id: number }) {
 				<CarpoolDetails />
 				<Members>
 					<CarpoolRouteEstimator />
+					<MemberList />
 				</Members>
-				<MemberList />
 			</UISecondaryBox>
 		</CarpoolContext.Provider>
 	);

src/components/Carpool/CarpoolRouteEstimator.tsx

@@ -1,27 +1,10 @@
-import { useMemo, useState } from 'react';
-import { useEffect } from 'react';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { Location } from '../../lib/estimateoptimalpath';
 import getDistance from '../../lib/getdistance';
-import { getEventSignupsBulk } from '../api';
-import { IEventSignupComplete, IEventSignup } from '../types';
+import { IEventSignupComplete } from '../types';
 import useOptimalPath from '../useOptimalPath';
 import { CarpoolContext } from './Carpool';
-
-function useSignups(eventId: number, userIds: number[]) {
-	// Fetchs bulk signups from the API for the given event and user ids
-	// and returns a memoized result.
-
-	const [signups, setSignups] = useState<IEventSignup[]>([]);
-
-	useEffect(() => {
-		getEventSignupsBulk(eventId, userIds).then((signups) => {
-			setSignups(signups);
-		});
-	}, [eventId, userIds]);
-
-	return signups;
-}
+import useSignups from './useSignups';
 
 export default function CarpoolRouteEstimator() {
 	const { carpool } = useContext(CarpoolContext);
@@ -34,7 +17,7 @@ export default function CarpoolRouteEstimator() {
 
 	const signups = useSignups(carpool.event.id, memberIds);
 
-	const signupsWithLocation = useMemo(
+	const completedSignups = useMemo(
 		() =>
 			signups.filter(
 				(signup) => signup.latitude !== null
@@ -42,7 +25,7 @@ export default function CarpoolRouteEstimator() {
 		[signups]
 	);
 
-	const path = useOptimalPath(signupsWithLocation, carpool.event);
+	const path = useOptimalPath(completedSignups, carpool.event);
 
 	return (
 		<div

src/components/Carpool/MemberList.tsx

@@ -1,13 +1,19 @@
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { useContext, useMemo, useState } from 'react';
+import { IEventSignup } from '../types';
 import UIPressable from '../UI/UIPressable';
 import { CarpoolContext } from './Carpool';
+import useSignups from './useSignups';
 
-function MemberRow({ member }: { member: { id: number; name: string } }) {
+function MemberRow({ signup }: { signup: IEventSignup }) {
 	return (
-		<div style={{ display: 'flex', alignItems: 'center' }} key={member.id}>
-			<AccountCircleIcon style={{ marginRight: '8px' }} />
-			<div>{member.name}</div>
+		<div
+			style={{ display: 'flex', flexDirection: 'column', padding: '0.5rem' }}
+		>
+			<div style={{ display: 'flex', alignItems: 'center' }}>
+				<div>{signup.user.name}</div>
+			</div>
+			<span>{signup.formattedAddress}</span>
+			{signup.canDrive && <b>Can drive</b>}
 		</div>
 	);
 }
@@ -24,13 +30,18 @@ function formatOthers(hiddenMemberCount: number) {
 	return `${hiddenMemberCount} others...`;
 }
 
-const shownMembersCount = 2;
+const shownMembersCount = 4;
 
 export default function MemberList() {
 	const { carpool } = useContext(CarpoolContext);
 	const [expanded, setExpanded] = useState(false);
 
-	const members = carpool.members;
+	const memberIDs = useMemo(
+		() => carpool.members.map((member) => member.id),
+		[carpool]
+	);
+	const members = useSignups(carpool.id, memberIDs);
+
 	const membersToShow = useMemo(
 		() => (expanded ? members : members.slice(0, shownMembersCount)),
 		[members, expanded]
@@ -60,7 +71,7 @@ export default function MemberList() {
 					}}
 				>
 					{membersToShow.map((member) => (
-						<MemberRow member={member} key={member.id} />
+						<MemberRow signup={member} key={member.user.id} />
 					))}
 					<br />
 					<UIPressable onClick={() => setExpanded((e) => !e)}>

src/components/Carpool/useSignups.tsx

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import { getEventSignupsBulk } from '../api';
+import { IEventSignup } from '../types';
+
+// Fetchs bulk signups from the API for the given event and user ids
+// and returns a memoized result.
+export default function useSignups(eventId: number, userIds: number[]) {
+	const [signups, setSignups] = useState<IEventSignup[]>([]);
+
+	useEffect(() => {
+		getEventSignupsBulk(eventId, userIds).then((signups) => {
+			setSignups(signups);
+		});
+	}, [eventId, userIds]);
+
+	return signups;
+}