diff --git a/src/components/Event/EventInterestForm.tsx b/src/components/Event/EventInterestForm.tsx index e4d3797..db39f61 100644 --- a/src/components/Event/EventInterestForm.tsx +++ b/src/components/Event/EventInterestForm.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useRef } from 'react'; import { green, lightgrey } from '../../lib/colors'; import getPlaceDetails from '../../lib/getPlaceDetails'; import { addOrUpdateEventSignup, removeEventSignup } from '../api'; @@ -12,31 +12,35 @@ import EventSignups from './EventSignups'; export default function EventInterestForm() { const event = useMutableEvent(); const me = useMe() || { id: 0, name: '' }; + const placeIdRef = useRef(null); + const canDriveRef = useRef(false); - const updateSignup = useCallback( - async (placeId: string | null) => { - await addOrUpdateEventSignup(event.id, placeId); + const updateSignup = useCallback(async () => { + const placeId = placeIdRef.current; + const canDrive = canDriveRef.current; - if (placeId) { - const details = await getPlaceDetails(placeId); + await addOrUpdateEventSignup(event.id, placeIdRef.current, canDrive); - event.signups[me.id] = { - user: { id: me.id, name: me.name }, - placeId, - ...details, - }; - } else { - event.signups[me.id] = { - user: { id: me.id, name: me.name }, - placeId: null, - latitude: null, - longitude: null, - formattedAddress: null, - }; - } - }, - [event.id, event.signups, me.id, me.name] - ); + if (placeId) { + const details = await getPlaceDetails(placeId); + + event.signups[me.id] = { + user: { id: me.id, name: me.name }, + placeId, + ...details, + canDrive, + }; + } else { + event.signups[me.id] = { + user: { id: me.id, name: me.name }, + placeId: null, + latitude: null, + longitude: null, + formattedAddress: null, + canDrive, + }; + } + }, [event.id, event.signups, me.id, me.name]); const removeSignup = useCallback(async () => { await removeEventSignup(event.id); @@ -48,10 +52,19 @@ export default function EventInterestForm() { const interested = !!event.signups[me.id]; + const canDrive = !!event.signups[me.id]?.canDrive; + return ( <> removeSignup() : () => updateSignup(null)} + onClick={ + interested + ? () => removeSignup() + : () => { + placeIdRef.current = null; + updateSignup(); + } + } style={{ backgroundColor: interested ? green : lightgrey, color: interested ? 'white' : 'black', @@ -62,10 +75,24 @@ export default function EventInterestForm() { {interested && ( <> + { + canDriveRef.current = !canDriveRef.current; + updateSignup(); + }} + style={{ + backgroundColor: canDrive ? green : lightgrey, + color: canDrive ? 'white' : 'black', + transition: 'color 0.2s, background-color 0.2s', + }} + > + {canDrive ? 'Can drive' : "Can't drive"} + { - updateSignup(placeId); + placeIdRef.current = placeId; + updateSignup(); }} style={ event.signups[me.id]?.placeId != null diff --git a/src/components/api.ts b/src/components/api.ts index 5133dee..8ede23c 100644 --- a/src/components/api.ts +++ b/src/components/api.ts @@ -70,9 +70,10 @@ export async function getEventSignups( export async function addOrUpdateEventSignup( eventId: number, - placeId: string | null + placeId: string | null, + canDrive: boolean ) { - await post(`/events/${eventId}/signup`, { placeId }); + await post(`/events/${eventId}/signup`, { placeId, canDrive }); } export async function removeEventSignup(eventId: number) { diff --git a/src/components/types.ts b/src/components/types.ts index c770d33..aa0d2bb 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -92,6 +92,7 @@ export type IEventSignupComplete = { id: number; name: string; }; + canDrive: boolean; placeId: string; formattedAddress: string; latitude: number; @@ -103,6 +104,7 @@ export type IEventSignupIncomplete = { id: number; name: string; }; + canDrive: boolean; placeId: null; formattedAddress: null; latitude: null; diff --git a/src/lib/estimateoptimalpath.ts b/src/lib/estimateoptimalpath.ts index 50b8f5c..794cacb 100644 --- a/src/lib/estimateoptimalpath.ts +++ b/src/lib/estimateoptimalpath.ts @@ -47,8 +47,6 @@ export default function estimateOptimalPath< const newWaypoints = sequence.slice(1, sequence.length - 1); - console.log({ sequence, path }); - return { path: { from,