chore: upgrade react router v7

https://reactrouter.com/upgrading/v6#upgrading-from-v6
nihalgonsalves · Nov 25, 2024 · 6396a88 · 6396a88
1 parent cf33662
commit 6396a88
Show file tree

Hide file tree

Showing 27 changed files with 75 additions and 72 deletions.
diff --git a/packages/frontend/.storybook/preview.tsx b/packages/frontend/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
 import "../src/tailwind.css";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 
 const preview: Preview = {
   parameters: {

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -70,7 +70,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.53.2",
     "react-hot-toast": "^2.4.1",
-    "react-router-dom": "^6.27.0",
+    "react-router": "^7.0.1",
     "react-twc": "^1.4.2",
     "react-use": "^17.5.1",
     "tailwind-merge": "^2.5.5",

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -12,7 +12,7 @@ import {
   matchRoutes,
   useLocation,
   useNavigationType,
-} from "react-router-dom";
+} from "react-router";
 
 import { TrpcProvider } from "./api/TrpcProvider";
 import { useOffLineToaster } from "./api/useOffLineToaster";

diff --git a/packages/frontend/src/components/CategoryStats.tsx b/packages/frontend/src/components/CategoryStats.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import type { DateRange } from "react-day-picker";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import {
   addMoney,

diff --git a/packages/frontend/src/components/FloatingActionButton.tsx b/packages/frontend/src/components/FloatingActionButton.tsx
@@ -1,7 +1,7 @@
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
 import { motion } from "framer-motion";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { Button } from "./ui/button";
 import {

diff --git a/packages/frontend/src/components/NavBarAvatar.tsx b/packages/frontend/src/components/NavBarAvatar.tsx
@@ -1,6 +1,6 @@
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
 import { AvatarIcon } from "@radix-ui/react-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { trpc } from "../api/trpc";
 import { useResetCache } from "../api/useCacheReset";

diff --git a/packages/frontend/src/components/ResetPasswordForm.tsx b/packages/frontend/src/components/ResetPasswordForm.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import type { z } from "zod";
 
 import { ZResetPasswordInput } from "@nihalgonsalves/expenses-shared/types/user";
@@ -38,7 +38,7 @@ export const ResetPasswordForm = ({ token }: { token: string }) => {
   const onSubmit = async (values: z.infer<typeof ZResetPasswordInput>) => {
     await resetPassword(values);
 
-    navigate("/auth/sign-in");
+    await navigate("/auth/sign-in");
   };
 
   return (

diff --git a/packages/frontend/src/components/SheetsList.tsx b/packages/frontend/src/components/SheetsList.tsx
@@ -1,7 +1,7 @@
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import type { SheetsResponse } from "@nihalgonsalves/expenses-shared/types/sheet";
 

diff --git a/packages/frontend/src/components/VerifyEmailForm.tsx b/packages/frontend/src/components/VerifyEmailForm.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { trpc } from "../api/trpc";
 
@@ -18,7 +18,7 @@ export const VerifyEmailForm = ({ token }: { token: string }) => {
     await verifyEmail(token);
     await utils.user.me.invalidate();
 
-    navigate("/settings");
+    await navigate("/settings");
   };
 
   return (

diff --git a/packages/frontend/src/components/group-sheets/BalanceSummary.tsx b/packages/frontend/src/components/group-sheets/BalanceSummary.tsx
@@ -7,7 +7,7 @@ import {
   TrashIcon,
 } from "@radix-ui/react-icons";
 import { useCallback, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import type { Money } from "@nihalgonsalves/expenses-shared/money";
 import type {
@@ -73,7 +73,7 @@ const PersonMenu = ({
       ]);
 
       if (actorInfo.id === id) {
-        navigate("/groups");
+        await navigate("/groups");
       }
     } catch {
       setIsInvalidating(false);

diff --git a/packages/frontend/src/components/group-sheets/CreateGroupForm.tsx b/packages/frontend/src/components/group-sheets/CreateGroupForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
 import { PersonIcon, PlusIcon, TrashIcon } from "@radix-ui/react-icons";
 import { useFieldArray, useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import type { z } from "zod";
 
 import { ZCreateGroupSheetInput } from "@nihalgonsalves/expenses-shared/types/sheet";
@@ -64,7 +64,7 @@ export const CreateGroupForm = ({
     const { id } = await createGroupSheet(values);
 
     dialog.dismiss();
-    navigate(`/groups/${id}`, { replace: true });
+    await navigate(`/groups/${id}`, { replace: true });
 
     await utils.sheet.mySheets.invalidate();
   };

diff --git a/packages/frontend/src/components/group-sheets/GroupSheet.tsx b/packages/frontend/src/components/group-sheets/GroupSheet.tsx
@@ -1,5 +1,5 @@
 import { ActivityLogIcon } from "@radix-ui/react-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import type { GroupSheetByIdResponse } from "@nihalgonsalves/expenses-shared/types/sheet";
 

diff --git a/packages/frontend/src/components/group-sheets/GroupSheetAdminSection.tsx b/packages/frontend/src/components/group-sheets/GroupSheetAdminSection.tsx
@@ -1,6 +1,6 @@
 import { ArchiveIcon, TrashIcon } from "@radix-ui/react-icons";
 import { useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import type { Sheet } from "@nihalgonsalves/expenses-shared/types/sheet";
 
@@ -27,7 +27,7 @@ export const GroupSheetAdminSection = ({
     void utils.sheet.groupSheetById.invalidate(groupSheet.id);
     void utils.sheet.mySheets.invalidate();
 
-    navigate("/sheets");
+    await navigate("/sheets");
   }, [deleteGroupSheet, groupSheet.id, navigate, utils]);
 
   const handleArchive = useCallback(async () => {

diff --git a/packages/frontend/src/components/personal-sheets/CreatePersonalTransactionDialog.tsx b/packages/frontend/src/components/personal-sheets/CreatePersonalTransactionDialog.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ThickArrowDownIcon, ThickArrowUpIcon } from "@radix-ui/react-icons";
 import { useForm, useWatch } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { z } from "zod";
 
 import type { Sheet } from "@nihalgonsalves/expenses-shared/types/sheet";
@@ -180,7 +180,7 @@ const CreatePersonalTransactionForm = ({
           freq: values.recurrenceRule.freq,
         },
       });
-      navigate(`/sheets/${personalSheet.id}`, { replace: true });
+      await navigate(`/sheets/${personalSheet.id}`, { replace: true });
     } else {
       await createPersonalSheetTransaction({
         ...commonValues,

diff --git a/packages/frontend/src/components/personal-sheets/CreateSheetForm.tsx b/packages/frontend/src/components/personal-sheets/CreateSheetForm.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusCircledIcon } from "@radix-ui/react-icons";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import type { z } from "zod";
 
 import { ZCreatePersonalSheetInput } from "@nihalgonsalves/expenses-shared/types/sheet";
@@ -50,7 +50,7 @@ export const CreateSheetForm = ({
     const { id } = await createSheet(values);
 
     dialog.dismiss();
-    navigate(`/sheets/${id}`, { replace: true });
+    await navigate(`/sheets/${id}`, { replace: true });
 
     await utils.sheet.mySheets.invalidate();
   };

diff --git a/packages/frontend/src/components/personal-sheets/PersonalSheet.tsx b/packages/frontend/src/components/personal-sheets/PersonalSheet.tsx
@@ -7,7 +7,7 @@ import {
   TrashIcon,
   UploadIcon,
 } from "@radix-ui/react-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import type { Sheet } from "@nihalgonsalves/expenses-shared/types/sheet";
 import type { TransactionListItem } from "@nihalgonsalves/expenses-shared/types/transaction";

diff --git a/packages/frontend/src/components/personal-sheets/PersonalSheetAdminSection.tsx b/packages/frontend/src/components/personal-sheets/PersonalSheetAdminSection.tsx
@@ -1,6 +1,6 @@
 import { ArchiveIcon, TrashIcon } from "@radix-ui/react-icons";
 import { useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import type { Sheet } from "@nihalgonsalves/expenses-shared/types/sheet";
 
@@ -22,9 +22,11 @@ export const PersonalSheetAdminSection = ({
 
   const handleDelete = useCallback(async () => {
     await deleteSheet(personalSheet.id);
-    void utils.sheet.personalSheetById.invalidate(personalSheet.id);
-    void utils.sheet.mySheets.invalidate();
-    navigate("/sheets");
+    await Promise.all([
+      utils.sheet.personalSheetById.invalidate(personalSheet.id),
+      utils.sheet.mySheets.invalidate(),
+    ]);
+    await navigate("/sheets");
   }, [deleteSheet, personalSheet.id, navigate, utils]);
 
   const handleArchive = useCallback(async () => {

diff --git a/packages/frontend/src/components/personal-sheets/PersonalTransactionsImporter.tsx b/packages/frontend/src/components/personal-sheets/PersonalTransactionsImporter.tsx
@@ -6,7 +6,7 @@ import {
 import { parse as dateFnsParse } from "date-fns";
 import Papa from "papaparse";
 import { useCallback, useId, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { z } from "zod";
 
 import type { Sheet } from "@nihalgonsalves/expenses-shared/types/sheet";
@@ -391,7 +391,7 @@ export const PersonalTransactionsImporter = ({
       personalSheetId: personalSheet.id,
     });
 
-    navigate(`/sheets/${personalSheet.id}`);
+    await navigate(`/sheets/${personalSheet.id}`);
   };
 
   const fieldOptions = useMemo(

diff --git a/packages/frontend/src/components/settings/PrivacyForm.tsx b/packages/frontend/src/components/settings/PrivacyForm.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import type { z } from "zod";
 
 import { ZAuthorizeUserInput } from "@nihalgonsalves/expenses-shared/types/user";
@@ -45,7 +45,7 @@ export const PrivacyForm = () => {
     await anonymizeUser({ email: values.email, password: values.password });
 
     await resetCache();
-    navigate("/");
+    await navigate("/");
   };
 
   const disabled = !onLine;

diff --git a/packages/frontend/src/components/transactions/columns.tsx b/packages/frontend/src/components/transactions/columns.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { createColumnHelper, type ColumnDef } from "@tanstack/react-table";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import type { ConvertedTransactionWithSheet } from "../../api/useAllUserTransactions";
 import { useCurrentUser } from "../../api/useCurrentUser";

diff --git a/packages/frontend/src/components/transactions/data-table.tsx b/packages/frontend/src/components/transactions/data-table.tsx
@@ -16,7 +16,7 @@ import {
 } from "@tanstack/react-table";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import type { DateRange } from "react-day-picker";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 import { z } from "zod";
 
 import type { ConvertedTransactionWithSheet } from "../../api/useAllUserTransactions";

diff --git a/packages/frontend/src/pages/AuthenticationPage.tsx b/packages/frontend/src/pages/AuthenticationPage.tsx
@@ -1,4 +1,4 @@
-import { Navigate, useMatch, useSearchParams } from "react-router-dom";
+import { Navigate, useMatch, useSearchParams } from "react-router";
 
 import { useCurrentUser } from "../api/useCurrentUser";
 import { SignInForm } from "../components/SignInForm";

diff --git a/packages/frontend/src/pages/ResetPasswordPage.tsx b/packages/frontend/src/pages/ResetPasswordPage.tsx
@@ -1,4 +1,4 @@
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 import { ResetPasswordForm } from "../components/ResetPasswordForm";
 import { Alert, AlertTitle } from "../components/ui/alert";

diff --git a/packages/frontend/src/pages/Root.tsx b/packages/frontend/src/pages/Root.tsx
@@ -12,7 +12,7 @@ import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useCallback, useState } from "react";
 import { Helmet } from "react-helmet";
 import { toast } from "react-hot-toast";
-import { NavLink, useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router";
 import { useInterval } from "react-use";
 
 import { trpc } from "../api/trpc";
@@ -106,7 +106,7 @@ export const Root = ({
               $variant="ghost"
               className="text-primary-foreground md:hidden"
               onClick={() => {
-                navigate(-1);
+                void navigate(-1);
               }}
             >
               <ArrowLeftIcon />

diff --git a/packages/frontend/src/pages/VerifyEmailPage.tsx b/packages/frontend/src/pages/VerifyEmailPage.tsx
@@ -1,4 +1,4 @@
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 import { VerifyEmailForm } from "../components/VerifyEmailForm";
 import { Alert, AlertTitle } from "../components/ui/alert";

diff --git a/packages/frontend/src/routes.tsx b/packages/frontend/src/routes.tsx
@@ -5,7 +5,7 @@ import {
   useLocation,
   Outlet,
   type RouteObject,
-} from "react-router-dom";
+} from "react-router";
 import { z, type ZodRawShape } from "zod";
 
 import {
@@ -174,4 +174,4 @@ export const useParams = <T extends ZodRawShape>(schema: Zod.ZodObject<T>) => {
 
 export const SheetParams = z.object({ sheetId: z.string() });
 
-export { RouterProvider } from "react-router-dom";
+export { RouterProvider } from "react-router/dom";