\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","label",[99],"permalink","https://www.val.town/x/vawogbemi/notUber_migrated/code/main.tsx","extension","actionData","errors"]