/** @jsxImportSource https://esm.sh/react */ import { init } from "https://esm.sh/@instantdb/react?bundle-deps"; import { IconChevronDown, IconChevronUp, IconDeviceGamepad2, IconDeviceLaptop, IconDeviceMobile, IconDeviceTablet, IconLoader2, } from "https://esm.sh/@tabler/icons-react@2.47.0"; import React, { useEffect, useState } from "https://esm.sh/react"; import MapComponent from "https://esm.town/v/vawogbemi/smtnMapComponent"; import { INSTANTDB_APP_ID } from "https://esm.town/v/vawogbemi/notUberConsts"; const IconWithNumber = ({ Icon, number }) => (

{number}

); const Tracking = () => { const [showDetails, setShowDetails] = useState(false); const [status, setStatus] = useState("Created"); const [pickupLocation, setPickupLocation] = useState(null); const [dropoffLocation, setDropoffLocation] = useState(null); const [active, setActive] = useState(false); const db = init({ appId: INSTANTDB_APP_ID }); const { isLoading, user, error } = db.useAuth(); const query = { rides: { $: { where: { "id": window.location.pathname.split("/")[2], }, }, $users: {}, }, }; const { queryIsLoading, queryError, data } = db.useQuery(query); useEffect(() => { const isMobile = window.matchMedia("(max-width: 768px)").matches; if (isMobile) { window.scrollTo(0, document.body.scrollHeight); } }, []); useEffect(() => { if (data && data.rides && data.rides.length > 0) { const ride = data.rides[0]; console.log("Ride:", ride); const rideStatus = ride.status; if (rideStatus === 0) { setStatus("Confirmed"); setPickupLocation(ride.pickupLocation); setDropoffLocation(null); setActive(false); } else if (rideStatus === 1) { setStatus("In Transit"); setPickupLocation(ride.pickupLocation); setDropoffLocation(ride.dropoffLocation); setActive(true); } else if (rideStatus === 2) { setStatus("Arrived"); setPickupLocation(null); setDropoffLocation(ride.dropoffLocation); setActive(false); } else { setStatus("Created"); setPickupLocation(null); setDropoffLocation(null); setActive(false); } } }, [data]); const toggleDetails = () => { setShowDetails(!showDetails); }; if (queryIsLoading) { return (

); } if (queryError) { console.error("Query error:", queryError); return (

Error loading data: {queryError.message}

); } if (!data || !data.rides || data.rides.length === 0) { console.error("No data or empty rides:", data); return (

No data available for this ride.

); } const ride = data.rides[0]; return (

{`${ride.dropoffLocation || "Unknown Location"} • ${status}`}

{`${new Date(ride.createdAt).toDateString()} • ${new Date(ride.createdAt).toLocaleTimeString()}`}

{`${ride.cost} • ${ride.paid ? "Paid" : "Unpaid"}`}

{`${ride.selectedOption}`}

{ride.description || "No description available"}

{showDetails && (

)}

); }; export function Package() { return (

); }

notUberRide

Version 6