From a4eeefb9a648af2af155e8b0eebd29c7016a66ac Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Mon, 26 Jul 2021 20:03:22 -0400
Subject: [PATCH] improve carpool members list
---
src/components/Carpool/Carpool.tsx | 2 +-
.../Carpool/CarpoolRouteEstimator.tsx | 27 ++++---------------
src/components/Carpool/MemberList.tsx | 27 +++++++++++++------
src/components/Carpool/useSignups.tsx | 17 ++++++++++++
4 files changed, 42 insertions(+), 31 deletions(-)
create mode 100644 src/components/Carpool/useSignups.tsx
diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx
index ad0690b..e0713ad 100644
--- a/src/components/Carpool/Carpool.tsx
+++ b/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>
);
diff --git a/src/components/Carpool/CarpoolRouteEstimator.tsx b/src/components/Carpool/CarpoolRouteEstimator.tsx
index df59e27..8d972e0 100644
--- a/src/components/Carpool/CarpoolRouteEstimator.tsx
+++ b/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
diff --git a/src/components/Carpool/MemberList.tsx b/src/components/Carpool/MemberList.tsx
index 180a409..849cc20 100644
--- a/src/components/Carpool/MemberList.tsx
+++ b/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)}>
diff --git a/src/components/Carpool/useSignups.tsx b/src/components/Carpool/useSignups.tsx
new file mode 100644
index 0000000..925e7ef
--- /dev/null
+++ b/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;
+}