\n {children}\n

\n );\n}\n\nfunction MobileNav() {\n const location = useLocation();\n\n return (\n

\n \n \n

\n {location.pathname === \"/\" ? : }\n Home\n

\n \n \n

\n \n Rides\n

\n \n \n

\n \n Account\n

\n \n \n \n \n

\n {location.pathname === \"/\" ? : }\n Home\n

\n \n \n

\n {location.pathname === \"/rides\" ? : }\n Rides\n

\n \n \n

\n {location.pathname === \"/account\" ? : }\n Account\n

\n \n \n

\n );\n}\n\nfunction DesktopNav() {\n const navigate = useNavigate();\n const location = useLocation();\n return (\n \n );\n}\n\nfunction UnauthenticatedApp() {\n return (\n

\n \n

\n \n \n } />\n \n \n

\n \n

\n );\n}\n\nfunction Modal({ isOpen, onClose, children }) {\n if (!isOpen) return null;\n\n return (\n

\n {children}\n

\n );\n}\n\nfunction AuthenticatedApp() {\n const db = init({ appId: INSTANTDB_APP_ID });\n const [modalOpen, setModalOpen] = useState(false);\n const [textInput, setTextInput] = useState(\"\");\n const [numberInput, setNumberInput] = useState(\"\");\n\n // Reducer for managing additional profile fields\n const initialProfileState = {\n phone: \"\",\n address: \"\",\n };\n\n const profileReducer = (state, action) => {\n switch (action.type) {\n case \"UPDATE_PHONE\":\n return { ...state, phone: action.payload };\n case \"UPDATE_ADDRESS\":\n return { ...state, address: action.payload };\n case \"RESET\":\n return initialProfileState;\n default:\n return state;\n }\n };\n\n const [profileState, dispatchProfile] = useReducer(profileReducer, initialProfileState);\n\n const { getToken, signOut } = useAuth();\n\n const signInToInstantWithClerkToken = async () => {\n const idToken = await getToken();\n\n if (!idToken) {\n return;\n }\n\n db.auth.signInWithIdToken({\n clientName: \"notUber\",\n idToken: idToken,\n });\n };\n\n useEffect(() => {\n signInToInstantWithClerkToken();\n }, []);\n\n const { isLoading, user, error } = db.useAuth();\n\n const query = {\n users: {\n $: {\n where: {\n email: !isLoading && user && user.email,\n },\n },\n receivers: {},\n },\n };\n\n const { queryIsLoading, queryError, data } = db.useQuery(query);\n const { user: clerkUser } = useUser();\n\n // Render profile field\n const renderField = (\n label: string,\n value: string,\n onChange: (e: React.ChangeEvent) => void,\n placeholder?: string,\n type: \"text\" | \"phone\" = \"text\",\n ) => {\n const handlePhoneChange = (e: React.ChangeEvent) => {\n // Only allow + at the start and digits after\n const input = e.target.value;\n if (type === \"phone\") {\n // Ensure starts with +, then only digits\n const sanitizedInput = input.startsWith(\"+\")\n ? input.replace(/[^\\d+]/g, \"\").replace(/(?<=^.{1})\\+/g, \"\")\n : \"+\" + input.replace(/\\D/g, \"\");\n onChange({ ...e, target: { ...e.target, value: sanitizedInput } });\n } else {\n onChange(e);\n }\n };\n\n return (\n

\n {label}\n \n

\n );\n };\n\n useEffect(() => {\n if (!queryIsLoading && data && data.users && data.users.length == 0) {\n setModalOpen(true);\n }\n else {\n setModalOpen(false);\n }\n }, [data]);\n\n const handleSaveProfile = async () => {\n await db.transact(\n tx.users[id()].update({\n firstName: clerkUser.firstName,\n lastName: clerkUser.lastName,\n email: clerkUser?.emailAddresses[0].emailAddress,\n ...profileState,\n }).link({ $users: user.id }),\n );\n\n setModalOpen(false);\n };\n\n // Determine if save button should be disabled\n const isSaveDisabled = !profileState.phone || !profileState.address;\n\n return (\n

\n \n

\n \n \n } />\n } />\n } />\n } />\n } />\n \n \n

\n \n\n setModalOpen(false)}>\n

\n Welcome to Not Uber!\n

\n {`We're so glad to have you here, ${clerkUser?.firstName}! Please complete your user profile.`}\n

\n First Name\n \n

\n Last Name\n \n

\n\n

\n Email\n \n

\n\n {renderField(\n \"Phone Number\",\n profileState.phone,\n (e) =>\n dispatchProfile({\n type: \"UPDATE_PHONE\",\n payload: e.target.value,\n }),\n \"Enter your full phone number (country code)\",\n \"phone\",\n )}\n\n {renderField(\n \"Address\",\n profileState.address,\n (e) =>\n dispatchProfile({\n type: \"UPDATE_ADDRESS\",\n payload: e.target.value,\n }),\n \"Enter your full address\",\n )}\n\n \n Save Profile\n \n

\n \n

\n );\n}\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n console.log(\"Server function called\");\n\n return new Response(\n `\n \n \n \n \n \n Not Uber\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted","subdomain","children",[],[100],{"_107":167,"_99":168,"_150":169,"_151":-5,"_152":140,"_153":170,"_154":122,"_109":171,"_104":172,"_157":173,"_159":174,"_161":27,"_162":-5,"_163":175,"_102":176},"c911cc6e-e374-11ef-af20-e6cdfca9ef9f","notUberAccount","407a4502-e374-11ef-b86c-e6cdfca9ef9f",20,["D",1738727620075],3,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useAuth } from \"https://esm.sh/@clerk/clerk-react?bundle-deps&deps=react@18.2.0\";\nimport { init } from \"https://esm.sh/@instantdb/react?bundle-deps&deps=react@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { INSTANTDB_APP_ID } from \"https://esm.town/v/vawogbemi/notUberConsts\";\n\nexport function Account() {\n const db = init({ appId: INSTANTDB_APP_ID });\n\n const { signOut } = useAuth();\n\n const { isLoading: userIsLoading, user } = db.useAuth();\n\n const query = {\n users: {\n $: {\n where: {\n email: !userIsLoading && user?.email,\n },\n },\n },\n };\n\n const { isLoading, error, data } = db.useQuery(query);\n\n const renderField = (label: string, value: string) => (\n

{label}

{value || \"—\"}

\n );\n\n if (isLoading || userIsLoading) {\n return (\n

\n );\n }\n\n if (error) {\n return (\n

Error loading account information

\n );\n }\n\n const userData = data?.users[0];\n\n return (\n

Your Account

\n {\n db.auth.signOut().then(() => {\n signOut();\n });\n }}\n className=\"bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50\"\n >\n Sign out\n \n

\n {renderField(\"First Name\", userData?.firstName)}\n {renderField(\"Last Name\", userData?.lastName)}\n {renderField(\"Email\", userData?.email)}\n {renderField(\"Phone\", userData?.phone)}\n {renderField(\"Address\", userData?.address)}\n

\n );\n}",[],[168],{"_107":178,"_99":179,"_150":180,"_151":-5,"_152":140,"_153":181,"_154":122,"_109":182,"_104":94,"_157":173,"_159":183,"_161":27,"_162":-5,"_163":184,"_102":185},"9841492a-e374-11ef-b443-e6cdfca9ef9f","notUberConsts","3a92a666-e374-11ef-a19f-e6cdfca9ef9f",18,["D",1738727538180],"export const INSTANTDB_APP_ID = \"b63bc79a-c9f3-486f-b067-7afc402b3efc\";\nexport const CLERK_PUBLISHABLE_KEY = \"pk_test_cGVyZmVjdC1zYWlsZmlzaC02NS5jbGVyay5hY2NvdW50cy5kZXYk\";\n// GO TO https://www.val.town/v/vawogbemi/notUberMapComponent to change the google maps api key -- for some reason importing it doesn't work.",[],[179],{"_107":187,"_99":188,"_150":189,"_151":-5,"_152":140,"_153":190,"_154":122,"_109":191,"_104":94,"_157":173,"_159":192,"_161":27,"_162":-5,"_163":193,"_102":194},"f49a9352-e374-11ef-984f-e6cdfca9ef9f","notUberHome","3eb974c2-e374-11ef-9c17-e6cdfca9ef9f",24,["D",1738727693119],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { SignedIn, SignedOut, SignInButton } from \"https://esm.sh/@clerk/clerk-react?bundle-deps&deps=react@18.2.0\";\nimport { IconCircleFilled, IconSquareFilled } from \"https://esm.sh/@tabler/icons-react?deps=react@18.2.0\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AutocompleteInput, MapComponent } from \"https://esm.town/v/vawogbemi/notUberMapComponent\";\n\nconst LocationSelector = ({ title }) => {\n const [pickupLocation, setPickupLocation] = useState(\"Pianos, New York\");\n const [dropoffLocation, setDropoffLocation] = useState(\"\");\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 handleSeePrices = () => {\n const redirectUrl = `/new?pickup=${encodeURIComponent(pickupLocation)}&dropoff=${\n encodeURIComponent(dropoffLocation)\n }`;\n window.location.href = redirectUrl;\n };\n\n const isPriceButtonDisabled = !pickupLocation || !dropoffLocation;\n\n const scrollToTop = () => {\n window.scrollTo({\n top: 0,\n behavior: \"smooth\",\n });\n };\n\n useEffect(() => {\n scrollToTop();\n }, [pickupLocation, dropoffLocation]);\n\n return (\n

\n {title &&

{title}

}\n

\n \n

\n \n \n \n See Prices\n \n \n \n \n \n See Prices\n \n \n

\n \n

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

\n \n

\n );\n}",[],[188],{"_107":196,"_99":197,"_150":198,"_151":-5,"_152":140,"_153":199,"_154":122,"_109":200,"_104":94,"_157":173,"_159":201,"_161":27,"_162":-5,"_163":202,"_102":203},"d65e7ffc-e374-11ef-bb4d-e6cdfca9ef9f","notUberNew","3ba5394c-e374-11ef-a19f-e6cdfca9ef9f",21,["D",1738727642395],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { id, init, tx } from \"https://esm.sh/@instantdb/react?bundle-deps&deps=react@18.2.0\";\nimport {\n IconCar,\n IconCarFilled,\n IconCircleCheck,\n IconCircleFilled,\n IconSquareFilled,\n} from \"https://esm.sh/@tabler/icons-react?deps=react@18.2.0\";\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { INSTANTDB_APP_ID } from \"https://esm.town/v/vawogbemi/notUberConsts\";\nimport { AutocompleteInput, MapComponent } from \"https://esm.town/v/vawogbemi/notUberMapComponent\";\n\nconst SelectionItem = ({ title, icon: Icon, description, isSelected, onClick, cost }) => (\n \n

\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}",[],[197],{"_107":205,"_99":206,"_150":207,"_151":-5,"_152":140,"_153":208,"_154":122,"_109":209,"_104":210,"_157":173,"_159":211,"_161":27,"_162":-5,"_163":212,"_102":213},"abb2e00c-e376-11ef-8c1e-e6cdfca9ef9f","notUberRide","3c98b400-e374-11ef-92d5-e6cdfca9ef9f",26,["D",1738728429795],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { init } from \"https://esm.sh/@instantdb/react?bundle-deps&deps=react@18.2.0\";\nimport { IconLoader2 } from \"https://esm.sh/@tabler/icons-react?deps=react@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { INSTANTDB_APP_ID } from \"https://esm.town/v/vawogbemi/notUberConsts\";\nimport { MapComponent } from \"https://esm.town/v/vawogbemi/notUberMapComponent\";\n\nconst Tracking = () => {\n const db = init({ appId: INSTANTDB_APP_ID });\n\n db.useAuth();\n\n const query = {\n rides: {\n $: {\n where: {\n \"id\": window.location.pathname.split(\"/\")[2],\n },\n },\n $users: {},\n },\n };\n\n const { queryIsLoading, queryError, data } = db.useQuery(query);\n\n if (queryIsLoading) {\n return (\n

\n \n

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

Error loading data: {queryError.message}

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

No data available for this ride.

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

\n {ride.dropoffLocation || \"Unknown Location\"}\n

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

{`Cost: ${ride.cost}`}

{`${ride.selectedOption}`}

\n \n

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

\n \n

\n );\n}",[],[206],{"_107":215,"_99":103,"_150":216,"_151":-5,"_152":140,"_153":217,"_154":122,"_109":218,"_104":172,"_157":173,"_159":219,"_161":27,"_162":-5,"_163":220,"_102":221},"eaf8ff14-e374-11ef-b86c-e6cdfca9ef9f","3d874610-e374-11ef-9c17-e6cdfca9ef9f",23,["D",1738727676962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { init } from \"https://esm.sh/@instantdb/react?bundle-deps&deps=react@18.2.0\";\nimport { IconCar, IconCarFilled } from \"https://esm.sh/@tabler/icons-react?deps=react@18.2.0\";\nimport { useNavigate } from \"https://esm.sh/react-router-dom?deps=react@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { INSTANTDB_APP_ID } from \"https://esm.town/v/vawogbemi/notUberConsts\";\n\nexport function Rides() {\n const db = init({ appId: INSTANTDB_APP_ID });\n\n const { isLoading, user, error } = db.useAuth();\n\n const query = {\n rides: {\n $: {\n where: {\n \"users.email\": !isLoading && user && user.email,\n },\n },\n users: {},\n },\n };\n\n const { queryIsLoading, queryError, data } = db.useQuery(query);\n\n const navigate = useNavigate();\n\n const renderRides = (rides) => {\n return (\n

\n {rides.map((ride) => (\n \n

\n {ride.selectedOption == \"notUberX\"\n ? \n : }\n

{ride.selectedOption}

{ride.dropoffLocation}

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

{ride.cost}

\n {ride.description}\n

\n \n ))}\n

\n );\n };\n\n const renderSection = (title, rides) => {\n return (\n

{title}

\n {rides.length > 0\n ? renderRides(rides)\n :

No rides in this category.

}\n

\n );\n };\n\n if (isLoading || queryIsLoading) {\n return

;\n }\n\n if (error || queryError) {\n return

Error: {error?.message || queryError?.message}

;\n }\n\n const allRides = data && data.rides ? Object.values(data.rides) : [];\n\n return (\n

Your Rides

\n {renderSection(\"All Rides\", allRides)}\n

\n );\n}",[],[103],"files",[148,166,177,186,195,204,214],"counts",{"_226":33,"_227":228,"_229":228,"_230":33},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_107":215,"_99":103,"_150":216,"_151":-5,"_152":140,"_153":217,"_154":122,"_109":235,"_104":172,"_157":173,"_159":219,"_161":27,"_162":-5,"_102":236},["D",1738727676962],[103],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":242,"_146":246,"_222":268,"_233":269,"_231":271,"_237":-5,"_272":27,"_273":-5},{"_107":108,"_99":100,"_109":243,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":117,"_12":118,"_119":120,"_121":122,"_123":-5,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":244,"_137":245},["D",1738727371488],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":-5,"_143":-5,"_144":-5,"_145":-5},[247,250,253,256,259,262,265],{"_107":149,"_99":100,"_150":120,"_151":-5,"_152":140,"_153":139,"_154":122,"_109":155,"_104":156,"_157":158,"_159":160,"_161":27,"_162":-5,"_163":248,"_102":249},[],[100],{"_107":167,"_99":168,"_150":169,"_151":-5,"_152":140,"_153":170,"_154":122,"_109":171,"_104":172,"_157":173,"_159":174,"_161":27,"_162":-5,"_163":251,"_102":252},[],[168],{"_107":178,"_99":179,"_150":180,"_151":-5,"_152":140,"_153":181,"_154":122,"_109":182,"_104":94,"_157":173,"_159":183,"_161":27,"_162":-5,"_163":254,"_102":255},[],[179],{"_107":187,"_99":188,"_150":189,"_151":-5,"_152":140,"_153":190,"_154":122,"_109":191,"_104":94,"_157":173,"_159":192,"_161":27,"_162":-5,"_163":257,"_102":258},[],[188],{"_107":196,"_99":197,"_150":198,"_151":-5,"_152":140,"_153":199,"_154":122,"_109":200,"_104":94,"_157":173,"_159":201,"_161":27,"_162":-5,"_163":260,"_102":261},[],[197],{"_107":205,"_99":206,"_150":207,"_151":-5,"_152":140,"_153":208,"_154":122,"_109":209,"_104":210,"_157":173,"_159":211,"_161":27,"_162":-5,"_163":263,"_102":264},[],[206],{"_107":215,"_99":103,"_150":216,"_151":-5,"_152":140,"_153":217,"_154":122,"_109":218,"_104":172,"_157":173,"_159":219,"_161":27,"_162":-5,"_163":266,"_102":267},[],[103],[247,250,253,256,259,262,265],{"_107":215,"_99":103,"_150":216,"_151":-5,"_152":140,"_153":217,"_154":122,"_109":235,"_104":172,"_157":173,"_159":219,"_161":27,"_162":-5,"_102":270},[103],[],"showCompareCallout","pull","routes/_app","actionData","errors"]