/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { ClerkProvider, SignedIn, SignedOut, SignInButton, useAuth, useUser, } from "https://esm.sh/@clerk/clerk-react?bundle-deps&deps=react@18.2.0"; import { id, init, tx } from "https://esm.sh/@instantdb/react?deps=react@18.2.0,react-dom@18.2.0"; import { IconCar, IconCarFilled, IconHome, IconHomeFilled, IconUser, IconUserFilled, } from "https://esm.sh/@tabler/icons-react?deps=react@18.2.0,react-dom@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { BrowserRouter as Router, Link, Route, Routes, useLocation, useNavigate, useParams, } from "https://esm.sh/react-router-dom?bundle-deps&deps=react@18.2.0"; import React, { useEffect, useReducer, useState } from "https://esm.sh/react@18.2.0"; import { Account } from "https://esm.town/v/vawogbemi/notUberAccount"; import { CLERK_PUBLISHABLE_KEY, INSTANTDB_APP_ID } from "https://esm.town/v/vawogbemi/notUberConsts"; import { Home } from "https://esm.town/v/vawogbemi/notUberHome"; import { New } from "https://esm.town/v/vawogbemi/notUberNew"; import { Ride } from "https://esm.town/v/vawogbemi/notUberRide"; import { Rides } from "https://esm.town/v/vawogbemi/notUberRides"; function Container({ children }) { return (

{children}

); } function MobileNav() { const location = useLocation(); return (

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

Rides

Account

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

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

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

); } function DesktopNav() { const navigate = useNavigate(); const location = useLocation(); return (

Not Uber Rides

); } function UnauthenticatedApp() { return (

} />

); } function Modal({ isOpen, onClose, children }) { if (!isOpen) return null; return (

{children}

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

{label}

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

} /> } /> } /> } /> } />

setModalOpen(false)}>

Welcome to Not Uber!

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

First Name

Last Name

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

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

`, { headers: { "content-type": "text/html", }, }, ); }