From 72972ba8cdc33935af80d3e240339ff6493cad34 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Mon, 12 Jul 2021 23:15:10 -0400 Subject: [PATCH 1/2] ADD BUTTON FOR CREATING A CARPOOL --- src/components/Carpool/Carpool.tsx | 33 +++++++------------------- src/components/Event/Event.tsx | 25 ------------------- src/components/Event/EventCarpools.tsx | 33 ++++++++++++++++++++++++-- src/components/api.ts | 10 ++++++++ 4 files changed, 50 insertions(+), 51 deletions(-) diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx index cc6a6aa..b51d4ce 100644 --- a/src/components/Carpool/Carpool.tsx +++ b/src/components/Carpool/Carpool.tsx @@ -3,7 +3,7 @@ import LocationOnIcon from '@material-ui/icons/LocationOn'; import MailOutlineIcon from '@material-ui/icons/MailOutline'; import PersonAddIcon from '@material-ui/icons/PersonAdd'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { ICarpool } from '../types'; @@ -11,6 +11,7 @@ import { ICarpool } from '../types'; import UISecondaryBox from '../UI/UISecondaryBox'; import UIButton from '../UI/UIButton'; import { lightgrey } from '../colors'; +import { getCarpool } from '../api'; function MemberList({ members }: { members: ICarpool['members'] }) { return ( @@ -26,34 +27,18 @@ function MemberList({ members }: { members: ICarpool['members'] }) { export default function Carpool() { const id = +useParams<{ id: string }>().id; - const [carpool, setCarpool] = useState({ - id, - name: 'carpoollo2398', - eventId: 0, - event: { - id: 0, - name: 'test event', - latitude: 0, - longitude: 0, - formattedAddress: 'your house', - placeId: 'secret', - }, - members: [], - invitations: [], - }); + const [carpool, setCarpool] = useState(null); - // useEffect(() => { - // getCarpool(id).then(setCarpool); - // }, [id]); - - const { event, name } = carpool!; + useEffect(() => { + getCarpool(id).then(setCarpool); + }, [id]); return ( {carpool ? ( <> -

{name}

-

{event.name}

+

{carpool.name}

+

{carpool.event.name}

- {event.formattedAddress} + {carpool.event.formattedAddress}
(null); const [interested, setInterested] = useState(false); const [updating, setUpdating] = useState(false); @@ -143,29 +141,6 @@ export default function Event({ event }: { event: IEvent }) { placeId={placeId} />
- {false && ( -
- - I don't have any way to get there yet -
- )} {signups !== null && ( diff --git a/src/components/Event/EventCarpools.tsx b/src/components/Event/EventCarpools.tsx index 61557fd..ac80ea6 100644 --- a/src/components/Event/EventCarpools.tsx +++ b/src/components/Event/EventCarpools.tsx @@ -1,8 +1,11 @@ // import CallMergeIcon from '@material-ui/icons/CallMerge'; import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople'; +import { useCallback } from 'react'; // import ScheduleIcon from '@material-ui/icons/Schedule'; import { useState } from 'react'; +import { createCarpool } from '../api'; import { lightgrey } from '../colors'; +import { useMe } from '../hooks'; import { ICarpool } from '../types'; import UIButton from '../UI/UIButton'; import { IEvent } from './Event'; @@ -65,14 +68,40 @@ const dummyCarpoolData: ICarpool[] = [ export default function Carpools({ event }: { event: IEvent }) { // eslint-disable-next-line const [carpools, _setCarpools] = useState(dummyCarpoolData); + const [creationStatus, setCreationStatus] = + useState(null); + const me = useMe()!; + + const createEmptyCarpool = useCallback(() => { + setCreationStatus('pending'); + + createCarpool({ name: me.name + "'s Carpool", eventId: event.id }) + .then(() => { + setCreationStatus('completed'); + }) + .catch(() => { + setCreationStatus('errored'); + }); + + setTimeout(() => setCreationStatus('completed'), 1000); + }, [event.id, me.name]); return (

Carpools


<>Available to drive? - {}} style={{ backgroundColor: lightgrey }}> - I'm not available + + {creationStatus === null + ? 'Create Empty Carpool' + : creationStatus === 'pending' + ? 'Creating...' + : creationStatus === 'completed' + ? 'Created!' + : 'Errored'} {carpools.map((carpool) => ( diff --git a/src/components/api.ts b/src/components/api.ts index 4a5bc4e..e939aff 100644 --- a/src/components/api.ts +++ b/src/components/api.ts @@ -167,3 +167,13 @@ export async function getReceivedInvitationsAndRequests() { export async function getCarpool(id: number) { return await get('/carpools/' + id); } + +export async function createCarpool({ + eventId, + name, +}: { + eventId: number; + name: string; +}) { + return await post('/carpools/', { eventId, name }); +} From 0c2032f9da0f63cef902f30f6ea90d91f878ac8a Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Mon, 12 Jul 2021 23:53:48 -0400 Subject: [PATCH 2/2] 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;