\n \n

{title}

\n \n ${cost.toFixed(2)}\n \n

\n {`2 mins away • ${new Date(Date.now()).toLocaleTimeString()}`}\n

{description}

\n \n);\n\nconst calculateCost = () => {\n // Base cost for the ride\n return 20;\n};\n\nconst Toast = ({ isVisible, onClose }) => {\n useEffect(() => {\n if (isVisible) {\n const timer = setTimeout(() => {\n onClose();\n }, 3000);\n\n return () => clearTimeout(timer);\n }\n }, [isVisible, onClose]);\n\n if (!isVisible) return null;\n\n return (\n

\n \n Success!\n

\n );\n};\n\nconst DropOffSelector = ({ title }) => {\n const urlParams = new URLSearchParams(window.location.search);\n const [pickupLocation, setPickupLocation] = useState(urlParams.get(\"pickup\") || \"\");\n const [dropoffLocation, setDropoffLocation] = useState(urlParams.get(\"dropoff\") || \"\");\n const [selectedOption, setSelectedOption] = useState(\"notUberX\");\n const [showToast, setShowToast] = useState(false);\n\n const db = init({ appId: INSTANTDB_APP_ID });\n const { isLoading, user, error: authError } = db.useAuth();\n const query = {\n users: {\n $: {\n where: {\n email: !isLoading && user?.email,\n },\n },\n },\n };\n\n const { queryIsLoading, queryError, data } = db.useQuery(query);\n\n const cost = useMemo(() => calculateCost(), []);\n\n useEffect(() => {\n const isMobile = window.matchMedia(\"(max-width: 768px)\").matches;\n if (isMobile) {\n window.scrollTo(0, document.body.scrollHeight);\n }\n }, []);\n\n const swapLocations = () => {\n setPickupLocation(dropoffLocation);\n setDropoffLocation(pickupLocation);\n };\n\n const handleLocationChange = (setter) => (newLocation) => {\n if (newLocation === (setter === setPickupLocation ? dropoffLocation : pickupLocation) && newLocation !== \"\") {\n swapLocations();\n } else {\n setter(newLocation);\n }\n };\n\n const handleProductSelection = async () => {\n await db.transact(\n tx.rides[id()].update({\n pickupLocation: pickupLocation,\n dropoffLocation: dropoffLocation,\n selectedOption: selectedOption,\n cost: `$${cost}`,\n createdAt: Date.now(),\n }).link({ users: data.users[0].id }),\n );\n setShowToast(true);\n setTimeout(() => {\n setShowToast(false);\n window.location.href = \"/rides\";\n }, 3000);\n };\n\n const isFormValid = pickupLocation && dropoffLocation;\n\n return (\n

\n {title &&

{title}

}\n

\n \n

Select Ride Option

\n setSelectedOption(\"notUberX\")}\n cost={cost}\n />\n setSelectedOption(\"notUberXL\")}\n cost={cost + 5}\n />\n

\n \n {selectedOption} - ${(selectedOption === \"notUberX\" ? cost : cost + 5).toFixed(2)}\n \n

\n \n

\n setShowToast(false)}\n />\n

\n );\n};\n\nexport function New() {\n return (\n

\n \n

\n );\n}\n\nconst css = `\n@keyframes toastIn {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@keyframes toastOut {\n from {\n transform: scale(1);\n opacity: 1;\n }\n to {\n transform: scale(0);\n opacity: 0;\n }\n}\n\n.animate-toast {\n animation: toastIn 0.5s ease-out forwards, toastOut 0.5s ease-in forwards 2.5s;\n}\n`;\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Get a ride\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/cameron/notUber/code/notUberNew","extension","actionData","errors"]