\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}","label",[18],"pulls","branches","forks","envVars",{"_149":26,"_151":26},"connections",{"_149":26,"_150":26},"count","unfilledCount","emptyCount",{"_37":198,"_13":14,"_31":50,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":199,"_78":26,"_33":200,"_138":201,"_35":24,"_140":-5,"_164":202,"_17":203},{"_37":191,"_13":192,"_31":193,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":194,"_78":26,"_33":34,"_138":195,"_35":24,"_140":-5,"_164":196,"_17":197},{"_37":184,"_13":185,"_31":186,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":187,"_78":26,"_33":34,"_138":188,"_35":24,"_140":-5,"_164":189,"_17":190},{"_37":177,"_13":178,"_31":179,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":180,"_78":26,"_33":34,"_138":181,"_35":24,"_140":-5,"_164":182,"_17":183},{"_37":132,"_13":18,"_31":32,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":174,"_78":26,"_33":34,"_138":139,"_35":24,"_140":-5,"_164":175,"_17":176},{"_37":167,"_13":168,"_31":169,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":170,"_78":26,"_33":34,"_138":171,"_35":24,"_140":-5,"_164":172,"_17":173},{"_37":159,"_13":160,"_31":161,"_133":-5,"_134":80,"_135":79,"_136":52,"_39":162,"_78":26,"_33":34,"_138":163,"_35":24,"_140":-5,"_164":165,"_17":166},"5cfd9704-040a-11f0-9c63-569c3dd06744","notUberRides","4b4c783c-e57f-4545-8bfe-1393bf9362d7",["D",1742310300442],"/** @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}","children",[],[160],"5cfd93da-040a-11f0-9c63-569c3dd06744","notUberRide","303d15ef-f19e-4993-bf53-cd5f525984a6",["D",1742310300442],"/** @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}",[],[168],["D",1742310300442],[],[18],"5cfd693c-040a-11f0-9c63-569c3dd06744","notUberHome","93bd70ed-824f-478b-9501-df6ac6c4095b",["D",1742310300442],"/** @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}",[],[178],"5cfd67c0-040a-11f0-9c63-569c3dd06744","notUberConsts","e8162375-4db6-411c-8822-05888010a24e",["D",1742310300442],"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.",[],[185],"5cfd632e-040a-11f0-9c63-569c3dd06744","notUberAccount","a887b473-e688-492b-bf64-9a9ed8faf9c9",["D",1742310300442],"/** @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}",[],[192],"5cfd4f92-040a-11f0-9c63-569c3dd06744",["D",1742310300442],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ClerkProvider,\n SignedIn,\n SignedOut,\n SignInButton,\n useAuth,\n useUser,\n} from \"https://esm.sh/@clerk/clerk-react?bundle-deps&deps=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 IconHome,\n IconHomeFilled,\n IconUser,\n IconUserFilled,\n} from \"https://esm.sh/@tabler/icons-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n BrowserRouter as Router,\n Link,\n Route,\n Routes,\n useLocation,\n useNavigate,\n useParams,\n} from \"https://esm.sh/react-router-dom?bundle-deps&deps=react@18.2.0\";\nimport React, { useEffect, useReducer, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Account } from \"./notUberAccount\";\nimport { CLERK_PUBLISHABLE_KEY, INSTANTDB_APP_ID } from \"./notUberConsts\";\nimport { Home } from \"./notUberHome\";\nimport { New } from \"./notUberNew\";\nimport { Ride } from \"./notUberRide\";\nimport { Rides } from \"./notUberRides\";\n\nfunction Container({ children }) {\n return (\n

\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}",[],[14],["D",1742310300442],{"_11":12,"_99":95},{"_11":12,"_93":-5,"_94":95,"_30":48,"_96":97,"_98":24},{"_78":79,"_13":16,"_37":80,"_81":38,"_82":83,"_84":85,"_86":44,"_87":88,"_89":90,"_91":14,"_92":12},"ctx",{"_71":-5,"_120":241,"_242":243,"_244":245,"_246":24,"_247":24,"_248":24,"_249":52,"_250":-5,"_251":-7,"_252":-7,"_253":26,"_254":24,"_255":24,"_256":-5,"_257":24,"_258":24,"_259":24,"_260":-5},"ENV",{"_212":213,"_214":215,"_216":16,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · notUberNew