make event signups only show people who don't have a carpool

This commit is contained in:
Michael Fatemi 2021-07-14 08:56:56 -04:00
parent 0f3d477dc3
commit 7de92f4773
2 changed files with 33 additions and 27 deletions

View File

@ -122,33 +122,29 @@ export default function Carpools() {
return ( return (
<div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBottom: '0' }}>Carpools</h3> <h3 style={{ marginBottom: '0' }}>Carpools</h3>
{alreadyInCarpool ? ( {creationStatus === 'completed' ? (
<span>You are already in a carpool for this event</span> <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
<span>Available to drive?</span> onClick={createEmptyCarpool}
<UIButton style={{ backgroundColor: lightgrey }}
onClick={createEmptyCarpool} >
style={{ backgroundColor: lightgrey }} {creationStatus === null
> ? 'Create Empty Carpool'
{creationStatus === null : creationStatus === 'pending'
? 'Create Empty Carpool' ? 'Creating...'
: creationStatus === 'pending' : 'Errored'}
? 'Creating...' </UIButton>
: 'Errored'}
</UIButton>
</>
) : (
<span>
Created{' '}
<UILink href={`/carpools/${createdCarpoolId}`}>
your carpool
</UILink>
!
</span>
)}
</> </>
)} )}
{event.carpools.map((carpool) => ( {event.carpools.map((carpool) => (

View File

@ -3,6 +3,7 @@ import { useMe } from '../hooks';
import latlongdist, { R_miles } from '../../lib/latlongdist'; import latlongdist, { R_miles } from '../../lib/latlongdist';
import { IEventSignup, IEvent } from '../types'; import { IEventSignup, IEvent } from '../types';
import usePlace from '../usePlace'; import usePlace from '../usePlace';
import { useMemo } from 'react';
export default function EventSignups({ export default function EventSignups({
event, event,
@ -13,15 +14,24 @@ export default function EventSignups({
signups: IEventSignup[]; signups: IEventSignup[];
myPlaceId: string | null; myPlaceId: string | null;
}) { }) {
const carpools = event.carpools;
const placeDetails = usePlace(myPlaceId); const placeDetails = usePlace(myPlaceId);
const locationLongitude = event.latitude; const locationLongitude = event.latitude;
const locationLatitude = event.longitude; const locationLatitude = event.longitude;
const me = useMe(); 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 ( return (
<div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBlockEnd: '0' }}>People</h3> <h3 style={{ marginBlockEnd: '0' }}>People without a carpool</h3>
{signups.map(({ latitude, longitude, user }) => { {signupsWithoutCarpool.map(({ latitude, longitude, user }) => {
if (user.id === me?.id) { if (user.id === me?.id) {
return null; return null;
} }