add ability to specify if you can drive or not

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,10 +12,14 @@ import EventSignups from './EventSignups';
 export default function EventInterestForm() {
 	const event = useMutableEvent();
 	const me = useMe() || { id: 0, name: '' };
+	const placeIdRef = useRef<string | null>(null);
+	const canDriveRef = useRef(false);
 
-	const updateSignup = useCallback(
+	const updateSignup = useCallback(async () => {
-		async (placeId: string | null) => {
+		const placeId = placeIdRef.current;
-			await addOrUpdateEventSignup(event.id, placeId);
+		const canDrive = canDriveRef.current;
+
+		await addOrUpdateEventSignup(event.id, placeIdRef.current, canDrive);
 
 		if (placeId) {
 			const details = await getPlaceDetails(placeId);
@@ -24,6 +28,7 @@ export default function EventInterestForm() {
 				user: { id: me.id, name: me.name },
 				placeId,
 				...details,
+				canDrive,
 			};
 		} else {
 			event.signups[me.id] = {
@@ -32,11 +37,10 @@ export default function EventInterestForm() {
 				latitude: null,
 				longitude: null,
 				formattedAddress: null,
+				canDrive,
 			};
 		}
-		},
+	}, [event.id, event.signups, me.id, me.name]);
-		[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 (
 		<>
 			<UIButton
-				onClick={interested ? () => 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() {
 			</UIButton>
 			{interested && (
 				<>
+					<UIButton
+						onClick={() => {
+							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"}
+					</UIButton>
 					<UIPlacesAutocomplete
 						placeholder="Pickup and dropoff location"
 						onSelected={(_address, placeId) => {
-							updateSignup(placeId);
+							placeIdRef.current = placeId;
+							updateSignup();
 						}}
 						style={
 							event.signups[me.id]?.placeId != null

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) {

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;

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,