Update dependency react-router-dom to v7

web/package.json

@@ -34,7 +34,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.1.2",
-    "react-router-dom": "6.28.0",
+    "react-router": "7.0.1",
     "tailwind-merge": "2.5.4",
     "tailwindcss": "3.4.15",
     "tailwindcss-animate": "1.0.7",

web/src/App.tsx

@@ -1,10 +1,9 @@
 import {
   RouterProvider,
   createBrowserRouter,
-  defer,
   redirect,
   useRouteError
-} from 'react-router-dom'
+} from 'react-router'
 
 import EmailList from 'pages/EmailList'
 import EmailRawView from 'pages/EmailRawView'
@@ -40,11 +39,11 @@ const router = createBrowserRouter([
             errorElement: <ErrorBoundary />,
             loader: ({ params }) => {
               if (!params.threadID) return redirect('/inbox')
-              return defer({
+              return {
                 type: 'thread',
                 threadID: params.threadID,
                 thread: getThread(params.threadID)
-              })
+              }
             }
           },
           {
@@ -53,11 +52,11 @@ const router = createBrowserRouter([
             errorElement: <ErrorBoundary />,
             loader: ({ params }) => {
               if (!params.messageID) return redirect('/inbox')
-              return defer({
+              return {
                 type: 'email',
                 messageID: params.messageID,
                 email: getEmail(params.messageID)
-              })
+              }
             }
           }
         ]
@@ -76,10 +75,10 @@ const router = createBrowserRouter([
             element: <EmailView />,
             loader: ({ params }) => {
               if (!params.messageID) return null
-              return defer({
+              return {
                 messageID: params.messageID,
                 email: getEmail(params.messageID)
-              })
+              }
             }
           }
         ]
@@ -98,10 +97,10 @@ const router = createBrowserRouter([
             element: <EmailView />,
             loader: ({ params }) => {
               if (!params.messageID) return redirect('/sent')
-              return defer({
+              return {
                 messageID: params.messageID,
                 email: getEmail(params.messageID)
-              })
+              }
             }
           }
         ]
@@ -114,10 +113,10 @@ const router = createBrowserRouter([
     errorElement: <ErrorBoundary />,
     loader: ({ params }) => {
       if (!params.messageID) return redirect('/inbox')
-      return defer({
+      return {
         messageID: params.messageID,
         raw: getEmailRaw(params.messageID)
-      })
+      }
     }
   }
 ])

web/src/components/Sidebar.tsx

@@ -4,7 +4,7 @@ import {
   PaperAirplaneIcon
 } from '@heroicons/react/24/outline'
 import { ReactElement, forwardRef, useEffect, useState } from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router'
 
 import { getInfo } from 'services/info'
 

web/src/components/emails/EmailTableRow.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import EmailName from 'components/emails/EmailName'
 
@@ -33,20 +33,20 @@ export default function EmailTableRow(props: EmailTableRowProps) {
     })
   }
 
-  const openEmail = () => {
+  const openEmail = async () => {
     if (email.type === 'draft') {
       if (email.threadID) {
-        navigate(`/inbox/thread/${email.threadID}`)
+        await navigate(`/inbox/thread/${email.threadID}`)
         return
       }
       void openDraftEmail(email.messageID)
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     } else if (email.type === 'inbox' || email.type === 'sent') {
       if (email.threadID) {
-        navigate(`/inbox/thread/${email.threadID}`)
+        await navigate(`/inbox/thread/${email.threadID}`)
         return
       }
-      navigate(`/inbox/${email.messageID}`)
+      await navigate(`/inbox/${email.messageID}`)
     }
   }
 
@@ -79,7 +79,9 @@ export default function EmailTableRow(props: EmailTableRowProps) {
           backgroundClassName +
           unreadClassName
         }
-        onClick={openEmail}
+        onClick={() => {
+          void openEmail()
+        }}
       >
         <span title={email.from.length > 0 ? email.from[0] : ''}>
           <EmailName emails={email.from} />
@@ -91,7 +93,9 @@ export default function EmailTableRow(props: EmailTableRowProps) {
           backgroundClassName +
           unreadClassName
         }
-        onClick={openEmail}
+        onClick={() => {
+          void openEmail()
+        }}
       >
         {email.subject}
       </div>
@@ -101,7 +105,9 @@ export default function EmailTableRow(props: EmailTableRowProps) {
           backgroundClassName +
           (email.unread ? ' md:font-bold' : ' md:dark:font-light')
         }
-        onClick={openEmail}
+        onClick={() => {
+          void openEmail()
+        }}
       >
         {formatDate(
           email.timeReceived ?? email.timeUpdated ?? email.timeSent ?? '',

web/src/pages/EmailRawView.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Await, useLoaderData } from 'react-router-dom'
+import { Await, useLoaderData } from 'react-router'
 
 import { Toaster } from '@ui/toaster'
 import { toast } from '@ui/use-toast'
 
 import { reparseEmail } from 'services/emails'
 
 export default function EmailRawView() {
-  const data = useLoaderData() as { messageID: string; raw: string }
+  const data: { messageID: string; raw: string } = useLoaderData()
 
   const [isRequesting, setIsRequesting] = React.useState(false)
 

web/src/pages/EmailRoot.tsx

@@ -3,7 +3,7 @@
  * This is the root component for inbox, draft, and sent pages.
  */
 import { useContext, useEffect, useState } from 'react'
-import { Outlet, useOutletContext } from 'react-router-dom'
+import { Outlet, useOutletContext } from 'react-router'
 
 import DraftEmailsTabs from 'components/emails/DraftEmailsTabs'
 import FullScreenContent from 'components/emails/FullScreenContent'

web/src/pages/EmailView.tsx

@@ -6,7 +6,7 @@ import {
 } from '@heroicons/react/24/outline'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { Await, useLoaderData, useNavigate } from 'react-router-dom'
+import { Await, useLoaderData, useNavigate } from 'react-router'
 
 import { toast } from '@ui/use-toast'
 
@@ -37,9 +37,9 @@ import { parseEmailContent, parseEmailName } from 'utils/emails'
 import { formatDate } from 'utils/time'
 
 export default function EmailView() {
-  const data = useLoaderData() as
+  const data:
     | { type: 'email'; messageID: string; email: Email }
-    | { type: 'thread'; threadID: string; thread: Thread }
+    | { type: 'thread'; threadID: string; thread: Thread } = useLoaderData()
 
   const navigate = useNavigate()
 
@@ -154,7 +154,7 @@ export default function EmailView() {
     } else {
       await trashEmail(data.messageID)
     }
-    navigate(-1)
+    await navigate(-1)
   }
 
   const handleRead = async () => {
@@ -189,13 +189,17 @@ export default function EmailView() {
     }
   }
 
+  const handleBack = async () => {
+    await navigate(-1)
+  }
+
   return (
     <>
       <div className="px-2 md:px-0 mb-4 preflight">
         <EmailMenuBar
           emailIDs={'messageID' in data ? [data.messageID] : []}
           handleBack={() => {
-            navigate(-1)
+            void handleBack()
           }}
           showOperations={true}
           handleDelete={() => {

web/src/pages/Root.tsx

@@ -1,6 +1,6 @@
 import { Bars3Icon } from '@heroicons/react/24/outline'
 import { useReducer, useRef, useState } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 
 import { Toaster } from '@ui/toaster'