Upgrade to React Router 7

.github/workflows/build-and-deploy_devresults-xdev.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node.js version
         uses: actions/setup-node@v4
         with:
-          node-version: "18.x"
+          node-version: "20.x"
 
       - uses: pnpm/action-setup@v3
         with:

.gitignore

@@ -51,4 +51,5 @@ test-results
 typings
 yarn-debug.log*
 yarn-error.log*
-.copilotcontext
+.copilotcontext
+.react-router/

app/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { useRouteError } from "@remix-run/react"
+import { useRouteError } from "react-router"
 import { ErrorScreen } from "ui/ErrorScreen"
 
 export function ErrorBoundary() {

app/context/Auth/AuthContextProvider.tsx

@@ -2,7 +2,7 @@ import type { Repo } from "@automerge/automerge-repo"
 import { RepoContext } from "@automerge/automerge-repo-react-hooks"
 import type * as Auth from "@localfirst/auth"
 import { type AuthProvider } from "@localfirst/auth-provider-automerge-repo"
-import { useNavigate } from "@remix-run/react"
+import { useNavigate } from "react-router"
 import { initializeAuthRepo } from "context/Auth/initializeAuthRepo"
 import { useLocalState } from "hooks/useLocalState"
 import { useSignOut } from "hooks/useSignOut"
@@ -42,7 +42,7 @@ export function AuthContextProvider({ children }: { children: React.ReactNode })
     switch (scenario) {
       case "FIRST_LOAD": {
         // start the auth flow
-        navigate("/auth/begin")
+        void navigate("/auth/begin")
         break
       }
 
@@ -66,7 +66,7 @@ export function AuthContextProvider({ children }: { children: React.ReactNode })
   const signOutIfNotAMember = (team: Auth.Team) => {
     if (user && team.memberWasRemoved(user.userId)) {
       signOut()
-      navigate("/")
+      void navigate("/")
     }
   }
 

app/hooks/useNavigationHotkey.tsx

@@ -1,10 +1,10 @@
-import { useNavigate } from "@remix-run/react"
+import { useNavigate } from "react-router"
 import { useHotkeys } from "react-hotkeys-hook"
 
 export function useNavigationHotkey(keys: string, path: string) {
   const navigate = useNavigate()
   useHotkeys(keys, e => {
     e.preventDefault()
-    navigate(path, { relative: "path" })
+    void navigate(path, { relative: "path" })
   })
 }

app/hooks/useRedirect.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */ // state is any
 
-import { useLocation, useNavigate } from "@remix-run/react"
+import { useLocation, useNavigate } from "react-router"
 import { useEffect } from "react"
 
 export function useRedirect({ from, to, condition = true }: Params) {
@@ -10,11 +10,11 @@ export function useRedirect({ from, to, condition = true }: Params) {
     if (!condition) return
     if (typeof from === "string" && pathname === from) {
       console.log(`redirecting from ${from} to ${to}`)
-      navigate(to, { state })
+      void navigate(to, { state })
     } else if (from instanceof RegExp && from.test(pathname)) {
       const newTo = pathname.replace(from, to)
       console.log(`redirecting from ${from} to ${newTo}`)
-      navigate(newTo, { state })
+      void navigate(newTo, { state })
     }
   }, [pathname])
 }

app/hooks/useSelectedWeek.tsx

@@ -1,5 +1,5 @@
 import { LocalDate } from "@js-joda/core"
-import { useParams } from "@remix-run/react"
+import { useParams } from "react-router"
 import { getWeek } from "lib/getWeek"
 
 export function useSelectedWeek() {

app/hooks/useSelectedYear.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom"
+import { useParams } from "react-router"
 import { getCurrentYear } from "lib/getCurrentYear"
 import { yearFromString } from "lib/yearFromString"
 

app/root.tsx

@@ -1,5 +1,5 @@
 import "@ibm/plex/css/ibm-plex.css"
-import { Links, Outlet, Scripts, ScrollRestoration } from "@remix-run/react"
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
 import { Loading } from "ui/Loading"
 import "./index.css"
 
@@ -14,11 +14,24 @@ export default function App() {
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      {children}
-      <Scripts />
-      <ScrollRestoration />
-    </>
+    <html lang="en" className="h-full bg-white">
+      <head>
+        <meta name="msapplication-TileColor" content="#000000" />
+        <meta name="theme-color" content="#000000" />
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" href="/local-maskable-192x192.png" />
+        <link rel="mask-icon" href="/favicon.ico" color="#000000" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="h-full">
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
   )
 }
 

app/routes.ts

@@ -0,0 +1,16 @@
+import { remixRoutesOptionAdapter } from "@react-router/remix-routes-option-adapter"
+import { flatRoutes } from "remix-flat-routes"
+
+const routes = remixRoutesOptionAdapter(defineRoutes => {
+  return flatRoutes("routes", defineRoutes, {
+    ignoredRouteFiles: ["**/.*"], // Ignore dot files (like .DS_Store)
+    // appDir: 'app',
+    // routeDir: 'routes',
+    // basePath: '/',
+    // paramPrefixChar: '$',
+    // nestedDirectoryChar: '+',
+    // routeRegex: /((\${nestedDirectoryChar}[\/\\][^\/\\:?*]+)|[\/\\]((index|route|layout|page)|(_[^\/\\:?*]+)|([^\/\\:?*]+\.route)))\.(ts|tsx|js|jsx|md|mdx)$$/,
+  })
+})
+
+export default routes

app/routes/_private+/_private.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "@remix-run/react"
+import { Outlet } from "react-router"
 import { AuthContextProvider } from "context/Auth/AuthContextProvider"
 import { DatabaseContextProvider } from "context/Database/DatabaseContextProvider"
 import { useTeam } from "hooks/useTeam"

app/routes/_private+/devtools+/_devtools.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom"
+import { Outlet } from "react-router"
 import { PageLayout } from "ui/layouts/PageLayout"
 import { SecondaryNav } from "ui/SecondaryNav"
 

app/routes/_private+/dones+/_dones.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "@remix-run/react"
+import { Outlet } from "react-router"
 import { useRedirect } from "hooks/useRedirect"
 import { getSunday } from "lib/getSunday"
 

app/routes/_private+/hours+/_hours.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "@remix-run/react"
+import { Outlet } from "react-router"
 import { useRedirect } from "hooks/useRedirect"
 import { getCurrentYear } from "lib/getCurrentYear"
 

app/routes/_private+/myweek+/_myweek.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "@remix-run/react"
+import { Outlet } from "react-router"
 import { useRedirect } from "hooks/useRedirect"
 import { getSunday } from "lib/getSunday"
 

app/routes/_private+/settings+/_settings.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom"
+import { Outlet } from "react-router"
 import { SecondaryNav } from "ui/SecondaryNav"
 import { PageLayout } from "ui/layouts/PageLayout"
 

app/routes/_private+/settings+/devices+/_devices.tsx

@@ -1,5 +1,5 @@
 import { useTeam } from "hooks/useTeam"
-import { Outlet } from "react-router-dom"
+import { Outlet } from "react-router"
 import { Devices } from "ui/Devices"
 
 export default function DevicesPage() {

app/routes/_private+/settings+/devices+/invite.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "@remix-run/react"
+import { useNavigate } from "react-router"
 import { useDeviceInvitationGenerator } from "hooks/useDeviceInvitationGenerator"
 import { useTeam } from "hooks/useTeam"
 import { InviteDeviceDialog } from "ui/InviteDeviceDialog"
@@ -15,7 +15,7 @@ export default function DevicesInvitePage() {
   return (
     <InviteDeviceDialog
       defaultOpen={true}
-      onClose={() => navigate("..")}
+      onClose={async () => navigate("..")}
       invitationCode={invitationCode}
     />
   )

app/routes/_private+/team+/_team.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom"
+import { Outlet } from "react-router"
 import { SecondaryNav } from "ui/SecondaryNav"
 import { PageLayout } from "ui/layouts/PageLayout"
 

app/routes/_private+/team+/members+/_members.tsx

@@ -1,5 +1,5 @@
 import { useTeam } from "hooks/useTeam"
-import { Outlet } from "react-router-dom"
+import { Outlet } from "react-router"
 import { Members } from "ui/Members"
 
 export default function MembersPage() {

app/routes/_private+/team+/members+/invite.tsx

@@ -1,7 +1,7 @@
 import { useDatabase } from "hooks/useDatabase"
 import { useMemberInvitationGenerator } from "hooks/useMemberInvitationGenerator"
 import { useTeam } from "hooks/useTeam"
-import { useLocation, useNavigate } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router"
 import { type ContactId } from "schema/Contact"
 import { InviteMemberDialog } from "ui/InviteMemberDialog"
 
@@ -26,7 +26,7 @@ export default function MembersInvitePage() {
   return (
     <InviteMemberDialog
       defaultOpen={true}
-      onClose={() => navigate("..")}
+      onClose={async () => navigate("..")}
       contact={contact}
       invitationCode={invitationCode}
     />

app/routes/_private+/team+/members+/remove.tsx

@@ -1,6 +1,6 @@
 import { useDatabase } from "hooks/useDatabase"
 import { useTeam } from "hooks/useTeam"
-import { useLocation, useNavigate } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router"
 import type { ContactId } from "schema/Contact"
 import { RemoveMemberDialog } from "ui/RemoveMemberDialog"
 
@@ -21,7 +21,7 @@ export default function RemovePage() {
   return (
     <RemoveMemberDialog
       defaultOpen={true}
-      onClose={() => navigate("..")}
+      onClose={async () => navigate("..")}
       contact={contact}
       remove={() => {
         team.remove(contact.id)

app/routes/_private+/team+/members+/revoke.tsx

@@ -1,6 +1,6 @@
 import { useInvitation } from "hooks/useInvitation"
 import { useTeam } from "hooks/useTeam"
-import { useLocation, useNavigate } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router"
 import type { ContactId } from "schema/Contact"
 import { RevokeInvitationDialog } from "ui/RevokeInvitationDialog"
 
@@ -23,7 +23,7 @@ export default function RevokeInvitationPage() {
   return (
     <RevokeInvitationDialog
       defaultOpen={true}
-      onClose={() => navigate("..")}
+      onClose={async () => navigate("..")}
       contact={contact}
       invitation={invitation}
       revoke={revoke}

app/routes/auth+/_auth.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom"
+import { Outlet } from "react-router"
 import { CenteredLayout } from "ui/layouts/CenteredLayout"
 
 export default function AuthLayout() {

app/routes/auth+/begin.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "@remix-run/react"
+import { useNavigate } from "react-router"
 import { useLocalState } from "hooks/useLocalState"
 import { UserNameForm } from "ui/UserNameForm"
 
@@ -11,7 +11,7 @@ export default function AuthBeginPage() {
       userName={userName}
       onSubmit={({ n: userName }) => {
         update({ userName })
-        navigate("/auth/setup")
+        void navigate("/auth/setup")
       }}
     />
   )

app/routes/auth+/setup+/_.create.tsx

@@ -4,7 +4,7 @@
 
 import { createUser } from "@localfirst/auth"
 import { getShareId } from "@localfirst/auth-provider-automerge-repo"
-import { useNavigate } from "@remix-run/react"
+import { useNavigate } from "react-router"
 import { createDevice, type UserInfo } from "context/Auth/createDevice"
 import { getInitialContacts } from "context/Auth/getInitialContacts"
 import { initializeAuthRepo } from "context/Auth/initializeAuthRepo"
@@ -26,7 +26,7 @@ export default function AuthCreatePage() {
   // hooks ↑
 
   if (!userName) {
-    navigate("/auth/begin")
+    void navigate("/auth/begin")
     return null
   }
 
@@ -68,7 +68,7 @@ export default function AuthCreatePage() {
         update({ user, device, rootDocumentId, shareId })
 
         // Navigate to the app
-        navigate("/")
+        void navigate("/")
       }}
     />
   )

app/routes/auth+/setup+/_.join.($code).tsx

@@ -5,7 +5,7 @@ import { eventPromise } from "@herbcaudill/eventemitter42"
 import * as Auth from "@localfirst/auth"
 import { createUser } from "@localfirst/auth"
 import { type AuthErrorType } from "@localfirst/auth-provider-automerge-repo"
-import { useNavigate, useParams } from "@remix-run/react"
+import { useNavigate, useParams } from "react-router"
 import { createDevice, type UserInfo } from "context/Auth/createDevice"
 import { getRootDocumentIdFromTeam } from "context/Auth/getRootDocumentIdFromTeam"
 import { initializeAuthRepo } from "context/Auth/initializeAuthRepo"
@@ -95,7 +95,7 @@ export default function AuthJoinPage() {
     // Save our user info etc. to local storage
     update({ user, device, rootDocumentId, shareId })
 
-    navigate("/")
+    void navigate("/")
   }
 
   return invitationCodeFromUrl ?