From 0c2032f9da0f63cef902f30f6ea90d91f878ac8a Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Mon, 12 Jul 2021 23:53:48 -0400 Subject: [PATCH] add start of Invite Somebody list --- src/components/Carpool/Carpool.tsx | 9 +- src/components/Carpool/InvitationList.tsx | 103 ++++++++++++++++++++++ src/components/Carpool/MemberList.tsx | 6 +- src/components/Event/Event.tsx | 12 +-- src/components/Event/EventSignups.tsx | 5 +- src/components/api.ts | 3 +- src/components/types.ts | 4 + 7 files changed, 123 insertions(+), 19 deletions(-) create mode 100644 src/components/Carpool/InvitationList.tsx diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx index 6d8f5c5..7f09c02 100644 --- a/src/components/Carpool/Carpool.tsx +++ b/src/components/Carpool/Carpool.tsx @@ -10,9 +10,11 @@ import { ICarpool } from '../types'; import UISecondaryBox from '../UI/UISecondaryBox'; import MemberList from './MemberList'; +import InvitationList from './InvitationList'; import UIButton from '../UI/UIButton'; import { lightgrey } from '../colors'; import { getCarpool } from '../api'; +import useToggle from '../useToggle'; export default function Carpool() { const id = +useParams<{ id: string }>().id; @@ -22,6 +24,8 @@ export default function Carpool() { getCarpool(id).then(setCarpool); }, [id]); + const [invitationsOpen, toggleInvitationsOpen] = useToggle(false); + return ( {carpool ? ( @@ -35,6 +39,7 @@ export default function Carpool() { margin: '0.5rem 0', }} > + {/* Requests */} 1 request + {/* Invitations */} Invite + {invitationsOpen && }
+ {userName} +
+ ); +} + +export default function InvitationList({ carpool }: { carpool: ICarpool }) { + const eventId = carpool.event.id; + + const [availableSignups, setAvailableSignups] = + useState(null); + + useEffect(() => { + getEventSignups(eventId).then(setAvailableSignups); + }, [eventId]); + + const existingSignups = useMemo( + () => + new Set( + carpool.invitations + .filter((invitation) => !invitation.isRequest) + .map((invitation) => invitation.user.id) + ), + [carpool] + ); + + const availableSignupsAlreadyInvited = useMemo( + () => + availableSignups + ? availableSignups.filter((signup) => + existingSignups.has(signup.userId) + ) + : null, + [availableSignups, existingSignups] + ); + + const availableSignupsNotInvited = useMemo( + () => + availableSignups + ? availableSignups.filter( + (signup) => !existingSignups.has(signup.userId) + ) + : null, + [availableSignups, existingSignups] + ); + + return ( +
+

Invite Somebody

+ {availableSignups === null && 'Loading'} + {availableSignupsNotInvited?.map((signup) => ( + + ))} + {availableSignupsAlreadyInvited?.map((signup) => ( + + ))} +
+ ); +} diff --git a/src/components/Carpool/MemberList.tsx b/src/components/Carpool/MemberList.tsx index c3cdb40..839825b 100644 --- a/src/components/Carpool/MemberList.tsx +++ b/src/components/Carpool/MemberList.tsx @@ -26,17 +26,17 @@ export default function MemberList({
- {} -
{member.name}
+
{member.name}
) : ( '' ); })} {members.length > 2 - ? members.length - 2 == 1 + ? members.length - 2 === 1 ? members.length - 2 + ' other...' : members.length - 2 + ' others...' : ''}{' '} diff --git a/src/components/Event/Event.tsx b/src/components/Event/Event.tsx index 79702e5..5ddd3eb 100644 --- a/src/components/Event/Event.tsx +++ b/src/components/Event/Event.tsx @@ -6,6 +6,7 @@ import { } from '../api'; import { green, lightgrey } from '../colors'; import { useMe } from '../hooks'; +import { IEventSignup } from '../types'; import UIButton from '../UI/UIButton'; import UIPlacesAutocomplete from '../UI/UIPlacesAutocomplete'; import UISecondaryBox from '../UI/UISecondaryBox'; @@ -30,17 +31,6 @@ function GroupName({ name }: { name: string }) { return {name}; } -export type IEventSignup = { - user: { - id: number; - name: number; - }; - placeId: string; - formattedAddress: string; - latitude: number; - longitude: number; -}; - export default function Event({ event }: { event: IEvent }) { const { name, group, formattedAddress, startTime, endTime } = event; const [placeId, setPlaceId] = useState(null); diff --git a/src/components/Event/EventSignups.tsx b/src/components/Event/EventSignups.tsx index cdf30ce..77f8ddb 100644 --- a/src/components/Event/EventSignups.tsx +++ b/src/components/Event/EventSignups.tsx @@ -1,8 +1,9 @@ +import PersonAddIcon from '@material-ui/icons/PersonAdd'; import { useMe } from '../hooks'; import latlongdist, { R_miles } from '../latlongdist'; +import { IEventSignup } from '../types'; import usePlace from '../usePlace'; -import { IEvent, IEventSignup } from './Event'; -import PersonAddIcon from '@material-ui/icons/PersonAdd'; +import { IEvent } from './Event'; export default function EventSignups({ event, diff --git a/src/components/api.ts b/src/components/api.ts index e939aff..8647bbd 100644 --- a/src/components/api.ts +++ b/src/components/api.ts @@ -1,6 +1,5 @@ -import { IEventSignup } from './Event/Event'; import { GroupPreview } from './GroupJoinerLink'; -import { IInvitation } from './types'; +import { IInvitation, IEventSignup } from './types'; const base = process.env.REACT_APP_API_DOMAIN + 'api'; diff --git a/src/components/types.ts b/src/components/types.ts index 79cca55..81068a2 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -70,6 +70,10 @@ export type IEvent = { export type IEventSignup = { eventId: number; userId: number; + user: { + id: number; + name: string; + }; placeId: string | null; formattedAddress: string | null; latitude: number | null;