update to react-router v7

apps/client/index.html

@@ -43,12 +43,5 @@
 
     <!-- Phosphor Icons -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
-
-    <!-- Simple Icons -->
-    <link
-      type="text/css"
-      rel="stylesheet"
-      href="https://unpkg.com/simple-icons-font@v14/font/simple-icons.min.css"
-    />
   </body>
 </html>

apps/client/src/components/user-options.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuTrigger,
   KeyboardShortcut,
 } from "@reactive-resume/ui";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { useLogout } from "../services/auth";
 
@@ -26,7 +26,7 @@ export const UserOptions = ({ children }: Props) => {
       <DropdownMenuContent side="top" align="start" className="w-48">
         <DropdownMenuItem
           onClick={() => {
-            navigate("/dashboard/settings");
+            void navigate("/dashboard/settings");
           }}
         >
           {t`Settings`}

apps/client/src/libs/axios.ts

@@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
 import { deepSearchAndParseDates, ErrorMessage } from "@reactive-resume/utils";
 import _axios from "axios";
 import createAuthRefreshInterceptor from "axios-auth-refresh";
-import { redirect } from "react-router-dom";
+import { redirect } from "react-router";
 
 import { refreshToken } from "@/client/services/auth";
 

apps/client/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 
 import { router } from "./router";
 

apps/client/src/pages/auth/backup-otp/page.tsx

@@ -16,7 +16,7 @@ import {
 import { useRef } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { z } from "zod";
 
 import { useBackupOtp } from "@/client/services/auth";
@@ -39,7 +39,7 @@ export const BackupOtpPage = () => {
     try {
       await backupOtp(data);
 
-      navigate("/dashboard");
+      void navigate("/dashboard");
     } catch {
       form.reset();
     }
@@ -92,7 +92,7 @@ export const BackupOtpPage = () => {
                 variant="link"
                 className="px-5"
                 onClick={() => {
-                  navigate(-1);
+                  void navigate(-1);
                 }}
               >
                 <ArrowLeft size={14} className="mr-2" />

apps/client/src/pages/auth/forgot-password/page.tsx

@@ -17,7 +17,7 @@ import {
 import { useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { z } from "zod";
 
 import { useForgotPassword } from "@/client/services/auth";
@@ -93,7 +93,7 @@ export const ForgotPasswordPage = () => {
                 variant="link"
                 className="px-5"
                 onClick={() => {
-                  navigate(-1);
+                  void navigate(-1);
                 }}
               >
                 <ArrowLeft size={14} className="mr-2" />

apps/client/src/pages/auth/layout.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro";
 import { cn } from "@reactive-resume/utils";
 import { useMemo } from "react";
-import { Link, matchRoutes, Outlet, useLocation } from "react-router-dom";
+import { Link, matchRoutes, Outlet, useLocation } from "react-router";
 
 import { LocaleSwitch } from "@/client/components/locale-switch";
 import { Logo } from "@/client/components/logo";

apps/client/src/pages/auth/login/page.tsx

@@ -20,7 +20,7 @@ import { cn } from "@reactive-resume/utils";
 import { useRef } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { z } from "zod";
 
 import { useLogin } from "@/client/services/auth";

apps/client/src/pages/auth/register/page.tsx

@@ -20,7 +20,7 @@ import { cn } from "@reactive-resume/utils";
 import { useRef } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { z } from "zod";
 
 import { useRegister } from "@/client/services/auth";
@@ -51,7 +51,7 @@ export const RegisterPage = () => {
     try {
       await register(data);
 
-      navigate("/auth/verify-email");
+      void navigate("/auth/verify-email");
     } catch {
       form.reset();
     }

apps/client/src/pages/auth/reset-password/page.tsx

@@ -16,7 +16,7 @@ import {
 import { useEffect, useRef } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import { z } from "zod";
 
 import { useResetPassword } from "@/client/services/auth";
@@ -42,7 +42,7 @@ export const ResetPasswordPage = () => {
     try {
       await resetPassword(data);
 
-      navigate("/auth/login");
+      void navigate("/auth/login");
     } catch {
       form.reset();
     }
@@ -50,7 +50,7 @@ export const ResetPasswordPage = () => {
 
   // Redirect the user to the forgot password page if the token is not present.
   useEffect(() => {
-    if (!token) navigate("/auth/forgot-password");
+    if (!token) void navigate("/auth/forgot-password");
   }, [token, navigate]);
 
   return (

apps/client/src/pages/auth/verify-email/page.tsx

@@ -3,7 +3,7 @@ import { ArrowRight, Info, SealCheck } from "@phosphor-icons/react";
 import { Alert, AlertDescription, AlertTitle, Button } from "@reactive-resume/ui";
 import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router";
 
 import { useToast } from "@/client/hooks/use-toast";
 import { queryClient } from "@/client/libs/query-client";
@@ -28,7 +28,7 @@ export const VerifyEmailPage = () => {
         title: t`Your email address has been verified successfully.`,
       });
 
-      navigate("/dashboard/resumes", { replace: true });
+      void navigate("/dashboard/resumes", { replace: true });
     };
 
     if (!token) return;

apps/client/src/pages/auth/verify-otp/page.tsx

@@ -16,7 +16,7 @@ import {
 import { useRef } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { z } from "zod";
 
 import { useVerifyOtp } from "@/client/services/auth";
@@ -39,7 +39,7 @@ export const VerifyOtpPage = () => {
     try {
       await verifyOtp(data);
 
-      navigate("/dashboard");
+      void navigate("/dashboard");
     } catch {
       form.reset();
     }

apps/client/src/pages/builder/_components/header.tsx

@@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
 import { HouseSimple, Lock, SidebarSimple } from "@phosphor-icons/react";
 import { Button, Tooltip } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { useBuilderStore } from "@/client/stores/builder";
 import { useResumeStore } from "@/client/stores/resume";

apps/client/src/pages/builder/layout.tsx

@@ -1,7 +1,7 @@
 import { useBreakpoint } from "@reactive-resume/hooks";
 import { Panel, PanelGroup, PanelResizeHandle, Sheet, SheetContent } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 import { useBuilderStore } from "@/client/stores/builder";
 

apps/client/src/pages/builder/page.tsx

@@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
 import { ResumeDto } from "@reactive-resume/dto";
 import { useCallback, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
-import { LoaderFunction, redirect } from "react-router-dom";
+import { LoaderFunction, redirect } from "react-router";
 
 import { queryClient } from "@/client/libs/query-client";
 import { findResumeById } from "@/client/services/resume";

apps/client/src/pages/builder/sidebars/left/index.tsx

@@ -17,7 +17,7 @@ import {
 } from "@reactive-resume/schema";
 import { Button, ScrollArea, Separator } from "@reactive-resume/ui";
 import { Fragment, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { Icon } from "@/client/components/icon";
 import { UserAvatar } from "@/client/components/user-avatar";

apps/client/src/pages/dashboard/_components/sidebar.tsx

@@ -3,7 +3,7 @@ import { FadersHorizontal, ReadCvLogo } from "@phosphor-icons/react";
 import { Button, KeyboardShortcut, Separator } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { motion } from "framer-motion";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 
 import { Copyright } from "@/client/components/copyright";
@@ -71,12 +71,12 @@ export const Sidebar = ({ setOpen }: SidebarProps) => {
   const navigate = useNavigate();
 
   useKeyboardShortcut(["shift", "r"], () => {
-    navigate("/dashboard/resumes");
+    void navigate("/dashboard/resumes");
     setOpen?.(false);
   });
 
   useKeyboardShortcut(["shift", "s"], () => {
-    navigate("/dashboard/settings");
+    void navigate("/dashboard/settings");
     setOpen?.(false);
   });
 

apps/client/src/pages/dashboard/layout.tsx

@@ -2,7 +2,7 @@ import { SidebarSimple } from "@phosphor-icons/react";
 import { Button, Sheet, SheetClose, SheetContent, SheetTrigger } from "@reactive-resume/ui";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 import { Sidebar } from "./_components/sidebar";
 

apps/client/src/pages/dashboard/resumes/_dialogs/resume.tsx

@@ -43,7 +43,7 @@ import { useCreateResume, useDeleteResume, useUpdateResume } from "@/client/serv
 import { useImportResume } from "@/client/services/resume/import";
 import { useDialog } from "@/client/stores/dialog";
 
-const formSchema = createResumeSchema.extend({ id: idSchema.optional() });
+const formSchema = createResumeSchema.extend({ id: idSchema.optional(), slug: z.string() });
 
 type FormValues = z.infer<typeof formSchema>;
 

apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx

@@ -18,7 +18,7 @@ import {
 import { cn } from "@reactive-resume/utils";
 import dayjs from "dayjs";
 import { AnimatePresence, motion } from "framer-motion";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { useDialog } from "@/client/stores/dialog";
 
@@ -37,7 +37,7 @@ export const ResumeCard = ({ resume }: Props) => {
   const lastUpdated = dayjs().to(resume.updatedAt);
 
   const onOpen = () => {
-    navigate(`/builder/${resume.id}`);
+    void navigate(`/builder/${resume.id}`);
   };
 
   const onUpdate = () => {

apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx

@@ -22,7 +22,7 @@ import {
   DropdownMenuTrigger,
 } from "@reactive-resume/ui";
 import dayjs from "dayjs";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { useDialog } from "@/client/stores/dialog";
 
@@ -40,7 +40,7 @@ export const ResumeListItem = ({ resume }: Props) => {
   const lastUpdated = dayjs().to(resume.updatedAt);
 
   const onOpen = () => {
-    navigate(`/builder/${resume.id}`);
+    void navigate(`/builder/${resume.id}`);
   };
 
   const onUpdate = () => {

apps/client/src/pages/dashboard/settings/_sections/danger.tsx

@@ -11,7 +11,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useCounter } from "usehooks-ts";
 import { z } from "zod";
 
@@ -52,7 +52,7 @@ export const DangerZoneSettings = () => {
         title: t`Your account and all your data has been deleted successfully. Goodbye!`,
       });
 
-      navigate("/");
+      void navigate("/");
     }
   };
 

apps/client/src/pages/home/components/footer.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import { Separator } from "@reactive-resume/ui";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { Copyright } from "@/client/components/copyright";
 import { LocaleSwitch } from "@/client/components/locale-switch";

apps/client/src/pages/home/components/header.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { Logo } from "@/client/components/logo";
 

apps/client/src/pages/home/layout.tsx

@@ -1,5 +1,5 @@
 import { ScrollArea } from "@reactive-resume/ui";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 import { Footer } from "./components/footer";
 import { Header } from "./components/header";

apps/client/src/pages/home/sections/hero/call-to-action.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro";
 import { Book, SignOut } from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { useLogout } from "@/client/services/auth";
 import { useAuthStore } from "@/client/stores/auth";

apps/client/src/pages/public/page.tsx

@@ -5,7 +5,7 @@ import { Button } from "@reactive-resume/ui";
 import { pageSizeMap } from "@reactive-resume/utils";
 import { useCallback, useEffect, useRef } from "react";
 import { Helmet } from "react-helmet-async";
-import { Link, LoaderFunction, redirect, useLoaderData } from "react-router-dom";
+import { Link, LoaderFunction, redirect, useLoaderData } from "react-router";
 
 import { Icon } from "@/client/components/icon";
 import { ThemeSwitch } from "@/client/components/theme-switch";
@@ -22,8 +22,8 @@ export const PublicResumePage = () => {
 
   const { printResume, loading } = usePrintResume();
 
-  const { id, title, data: resume } = useLoaderData() as ResumeDto;
-  const format = resume.metadata.page.format;
+  const { id, title, data: resume } = useLoaderData();
+  const format = resume.metadata.page.format as keyof typeof pageSizeMap;
 
   const updateResumeInFrame = useCallback(() => {
     if (!frameRef.current?.contentWindow) return;

apps/client/src/providers/index.tsx

@@ -1,7 +1,7 @@
 import { TooltipProvider } from "@reactive-resume/ui";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { HelmetProvider } from "react-helmet-async";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 import { helmetContext } from "../constants/helmet";
 import { queryClient } from "../libs/query-client";

apps/client/src/router/guards/auth.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router";
 
 import { useUser } from "@/client/services/user";
 

apps/client/src/router/guards/guest.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Outlet, useSearchParams } from "react-router-dom";
+import { Navigate, Outlet, useSearchParams } from "react-router";
 
 import { useAuthStore } from "@/client/stores/auth";
 

apps/client/src/router/index.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router-dom";
+import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router";
 
 import { BackupOtpPage } from "../pages/auth/backup-otp/page";
 import { ForgotPasswordPage } from "../pages/auth/forgot-password/page";
@@ -23,7 +23,8 @@ import { GuestGuard } from "./guards/guest";
 import { authLoader } from "./loaders/auth";
 
 export const routes = createRoutesFromElements(
-  <Route element={<Providers />}>
+  // eslint-disable-next-line lingui/no-unlocalized-strings
+  <Route element={<Providers />} hydrateFallbackElement={<div>Loading...</div>}>
     <Route element={<HomeLayout />}>
       <Route path="/" element={<HomePage />} />
 

apps/client/src/router/loaders/auth.ts

@@ -1,5 +1,5 @@
 import { authResponseSchema, UserDto } from "@reactive-resume/dto";
-import { LoaderFunction, redirect } from "react-router-dom";
+import { LoaderFunction, redirect } from "react-router";
 
 import { USER_KEY } from "@/client/constants/query-keys";
 import { queryClient } from "@/client/libs/query-client";

apps/client/src/services/auth/login.ts

@@ -1,7 +1,7 @@
 import { AuthResponseDto, LoginDto } from "@reactive-resume/dto";
 import { useMutation } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { axios } from "@/client/libs/axios";
 import { queryClient } from "@/client/libs/query-client";
@@ -28,7 +28,7 @@ export const useLogin = () => {
     mutationFn: login,
     onSuccess: (data) => {
       if (data.status === "2fa_required") {
-        navigate("/auth/verify-otp");
+        void navigate("/auth/verify-otp");
         return;
       }