Function RiderMap

web/src/components/RiderMap.tsx:35–240

({ onRouteSelected }: RiderMapProps)

}

export default function RiderMap({ onRouteSelected }: RiderMapProps) {
    const [trip, setTrip] = useState<TripPreview | null>(null)
    const [selectedCarPackage] = useState<RouteFare | null>(null)
    const [destination, setDestination] = useState<[number, number] | null>(null)
    const mapRef = useRef<L.Map>(null)
    const userID = useMemo(() => crypto.randomUUID(), [])
    const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);

    const location = {
        latitude: 37.7749,
        longitude: -122.4194,
    };

    const {
        drivers,
        error,
        tripStatus,
        assignedDriver,
        paymentSession,
        resetTripStatus
    } = useRiderStreamConnection(location, userID);

    console.log(tripStatus)

    const handleMapClick = async (e: L.LeafletMouseEvent) => {
        if (trip?.tripID) {
            return
        }

        if (debounceTimeoutRef.current) {
            clearTimeout(debounceTimeoutRef.current);
        }

        debounceTimeoutRef.current = setTimeout(async () => {
            setDestination([e.latlng.lat, e.latlng.lng])

            const data = await requestRidePreview({
                pickup: [location.latitude, location.longitude],
                destination: [e.latlng.lat, e.latlng.lng],
            })
            console.log(data)

            const parsedRoute = data.route.geometry[0].coordinates
                .map((coord) => [coord.longitude, coord.latitude] as [number, number])

            setTrip({
                tripID: "",
                route: parsedRoute,
                rideFares: data.rideFares,
                distance: data.route.distance,
                duration: data.route.duration,
            })

            // Call onRouteSelected with the route distance
            onRouteSelected?.(data.route.distance)
        }, 500);
    }