Upgrade to react router 7 - lib mode (#227)

* upgrade to react router 7 in lib mode * fix * update react-query-auth
alan2207 · Dec 8, 2024 · 4da36db · 4da36db
1 parent a55e984
commit 4da36db
Show file tree

Hide file tree

Showing 25 changed files with 119 additions and 129 deletions.
diff --git a/apps/react-vite/.storybook/preview.tsx b/apps/react-vite/.storybook/preview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import '../src/index.css';
 
 export const parameters = {

diff --git a/apps/react-vite/package.json b/apps/react-vite/package.json
@@ -42,8 +42,8 @@
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.51.3",
-    "react-query-auth": "^2.3.0",
-    "react-router-dom": "^6.23.0",
+    "react-query-auth": "^2.4.3",
+    "react-router": "^7.0.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.4",

diff --git a/apps/react-vite/src/app/router.tsx b/apps/react-vite/src/app/router.tsx
@@ -1,34 +1,39 @@
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 
 import { paths } from '@/config/paths';
 import { ProtectedRoute } from '@/lib/auth';
 
-import { AppRoot, AppRootErrorBoundary } from './routes/app/root';
+import {
+  default as AppRoot,
+  ErrorBoundary as AppRootErrorBoundary,
+} from './routes/app/root';
+
+const convert = (queryClient: QueryClient) => (m: any) => {
+  const { clientLoader, clientAction, default: Component, ...rest } = m;
+  return {
+    ...rest,
+    loader: clientLoader?.(queryClient),
+    action: clientAction?.(queryClient),
+    Component,
+  };
+};
 
 export const createAppRouter = (queryClient: QueryClient) =>
   createBrowserRouter([
     {
       path: paths.home.path,
-      lazy: async () => {
-        const { LandingRoute } = await import('./routes/landing');
-        return { Component: LandingRoute };
-      },
+      lazy: () => import('./routes/landing').then(convert(queryClient)),
     },
     {
       path: paths.auth.register.path,
-      lazy: async () => {
-        const { RegisterRoute } = await import('./routes/auth/register');
-        return { Component: RegisterRoute };
-      },
+      lazy: () => import('./routes/auth/register').then(convert(queryClient)),
     },
     {
       path: paths.auth.login.path,
-      lazy: async () => {
-        const { LoginRoute } = await import('./routes/auth/login');
-        return { Component: LoginRoute };
-      },
+      lazy: () => import('./routes/auth/login').then(convert(queryClient)),
     },
     {
       path: paths.app.root.path,
@@ -41,74 +46,36 @@ export const createAppRouter = (queryClient: QueryClient) =>
       children: [
         {
           path: paths.app.discussions.path,
-          lazy: async () => {
-            const { DiscussionsRoute, discussionsLoader } = await import(
-              './routes/app/discussions/discussions'
-            );
-            return {
-              Component: DiscussionsRoute,
-              loader: discussionsLoader(queryClient),
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () =>
+            import('./routes/app/discussions/discussions').then(
+              convert(queryClient),
+            ),
         },
         {
           path: paths.app.discussion.path,
-          lazy: async () => {
-            const { DiscussionRoute, discussionLoader } = await import(
-              './routes/app/discussions/discussion'
-            );
-            return {
-              Component: DiscussionRoute,
-              loader: discussionLoader(queryClient),
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () =>
+            import('./routes/app/discussions/discussion').then(
+              convert(queryClient),
+            ),
         },
         {
           path: paths.app.users.path,
-          lazy: async () => {
-            const { UsersRoute, usersLoader } = await import(
-              './routes/app/users'
-            );
-            return {
-              Component: UsersRoute,
-              loader: usersLoader(queryClient),
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () => import('./routes/app/users').then(convert(queryClient)),
         },
         {
           path: paths.app.profile.path,
-          lazy: async () => {
-            const { ProfileRoute } = await import('./routes/app/profile');
-            return {
-              Component: ProfileRoute,
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () => import('./routes/app/profile').then(convert(queryClient)),
         },
         {
           path: paths.app.dashboard.path,
-          lazy: async () => {
-            const { DashboardRoute } = await import('./routes/app/dashboard');
-            return {
-              Component: DashboardRoute,
-            };
-          },
-          ErrorBoundary: AppRootErrorBoundary,
+          lazy: () =>
+            import('./routes/app/dashboard').then(convert(queryClient)),
         },
       ],
     },
     {
       path: '*',
-      lazy: async () => {
-        const { NotFoundRoute } = await import('./routes/not-found');
-        return {
-          Component: NotFoundRoute,
-        };
-      },
-      ErrorBoundary: AppRootErrorBoundary,
+      lazy: () => import('./routes/not-found').then(convert(queryClient)),
     },
   ]);
 

diff --git a/apps/react-vite/src/app/routes/app/dashboard.tsx b/apps/react-vite/src/app/routes/app/dashboard.tsx
@@ -2,7 +2,7 @@ import { ContentLayout } from '@/components/layouts';
 import { useUser } from '@/lib/auth';
 import { ROLES } from '@/lib/authorization';
 
-export const DashboardRoute = () => {
+const DashboardRoute = () => {
   const user = useUser();
   return (
     <ContentLayout title="Dashboard">
@@ -31,3 +31,5 @@ export const DashboardRoute = () => {
     </ContentLayout>
   );
 };
+
+export default DashboardRoute;
diff --git a/apps/react-vite/src/app/routes/app/discussions/__tests__/discussion.test.tsx b/apps/react-vite/src/app/routes/app/discussions/__tests__/discussion.test.tsx
@@ -8,7 +8,7 @@ import {
   within,
 } from '@/testing/test-utils';
 
-import { DiscussionRoute } from '../discussion';
+import { default as DiscussionRoute } from '../discussion';
 
 const renderDiscussion = async () => {
   const fakeUser = await createUser();

diff --git a/apps/react-vite/src/app/routes/app/discussions/__tests__/discussions.test.tsx b/apps/react-vite/src/app/routes/app/discussions/__tests__/discussions.test.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/testing/test-utils';
 import { formatDate } from '@/utils/format';
 
-import { DiscussionsRoute } from '../discussions';
+import { default as DiscussionsRoute } from '../discussions';
 
 beforeAll(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {});

diff --git a/apps/react-vite/src/app/routes/app/discussions/discussion.tsx b/apps/react-vite/src/app/routes/app/discussions/discussion.tsx
@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useParams, LoaderFunctionArgs } from 'react-router-dom';
+import { useParams, LoaderFunctionArgs } from 'react-router';
 
 import { ContentLayout } from '@/components/layouts';
 import { Spinner } from '@/components/ui/spinner';
@@ -12,7 +12,7 @@ import {
 } from '@/features/discussions/api/get-discussion';
 import { DiscussionView } from '@/features/discussions/components/discussion-view';
 
-export const discussionLoader =
+export const clientLoader =
   (queryClient: QueryClient) =>
   async ({ params }: LoaderFunctionArgs) => {
     const discussionId = params.discussionId as string;
@@ -35,7 +35,7 @@ export const discussionLoader =
     };
   };
 
-export const DiscussionRoute = () => {
+const DiscussionRoute = () => {
   const params = useParams();
   const discussionId = params.discussionId as string;
   const discussionQuery = useDiscussion({
@@ -71,3 +71,5 @@ export const DiscussionRoute = () => {
     </>
   );
 };
+
+export default DiscussionRoute;
diff --git a/apps/react-vite/src/app/routes/app/discussions/discussions.tsx b/apps/react-vite/src/app/routes/app/discussions/discussions.tsx
@@ -1,13 +1,13 @@
 import { QueryClient, useQueryClient } from '@tanstack/react-query';
-import { LoaderFunctionArgs } from 'react-router-dom';
+import { LoaderFunctionArgs } from 'react-router';
 
 import { ContentLayout } from '@/components/layouts';
 import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { getDiscussionsQueryOptions } from '@/features/discussions/api/get-discussions';
 import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
 import { DiscussionsList } from '@/features/discussions/components/discussions-list';
 
-export const discussionsLoader =
+export const clientLoader =
   (queryClient: QueryClient) =>
   async ({ request }: LoaderFunctionArgs) => {
     const url = new URL(request.url);
@@ -22,7 +22,7 @@ export const discussionsLoader =
     );
   };
 
-export const DiscussionsRoute = () => {
+const DiscussionsRoute = () => {
   const queryClient = useQueryClient();
   return (
     <ContentLayout title="Discussions">
@@ -42,3 +42,5 @@ export const DiscussionsRoute = () => {
     </ContentLayout>
   );
 };
+
+export default DiscussionsRoute;
diff --git a/apps/react-vite/src/app/routes/app/profile.tsx b/apps/react-vite/src/app/routes/app/profile.tsx
@@ -15,7 +15,7 @@ const Entry = ({ label, value }: EntryProps) => (
   </div>
 );
 
-export const ProfileRoute = () => {
+const ProfileRoute = () => {
   const user = useUser();
 
   if (!user.data) return null;
@@ -47,3 +47,5 @@ export const ProfileRoute = () => {
     </ContentLayout>
   );
 };
+
+export default ProfileRoute;
diff --git a/apps/react-vite/src/app/routes/app/root.tsx b/apps/react-vite/src/app/routes/app/root.tsx
@@ -1,15 +1,17 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { DashboardLayout } from '@/components/layouts';
 
-export const AppRoot = () => {
+export const ErrorBoundary = () => {
+  return <div>Something went wrong!</div>;
+};
+
+const AppRoot = () => {
   return (
     <DashboardLayout>
       <Outlet />
     </DashboardLayout>
   );
 };
 
-export const AppRootErrorBoundary = () => {
-  return <div>Something went wrong!</div>;
-};
+export default AppRoot;
diff --git a/apps/react-vite/src/app/routes/app/users.tsx b/apps/react-vite/src/app/routes/app/users.tsx
@@ -5,7 +5,7 @@ import { getUsersQueryOptions } from '@/features/users/api/get-users';
 import { UsersList } from '@/features/users/components/users-list';
 import { Authorization, ROLES } from '@/lib/authorization';
 
-export const usersLoader = (queryClient: QueryClient) => async () => {
+export const clientLoader = (queryClient: QueryClient) => async () => {
   const query = getUsersQueryOptions();
 
   return (
@@ -14,7 +14,7 @@ export const usersLoader = (queryClient: QueryClient) => async () => {
   );
 };
 
-export const UsersRoute = () => {
+const UsersRoute = () => {
   return (
     <ContentLayout title="Users">
       <Authorization
@@ -26,3 +26,5 @@ export const UsersRoute = () => {
     </ContentLayout>
   );
 };
+
+export default UsersRoute;
diff --git a/apps/react-vite/src/app/routes/auth/login.tsx b/apps/react-vite/src/app/routes/auth/login.tsx
@@ -1,10 +1,10 @@
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 
 import { AuthLayout } from '@/components/layouts/auth-layout';
 import { paths } from '@/config/paths';
 import { LoginForm } from '@/features/auth/components/login-form';
 
-export const LoginRoute = () => {
+const LoginRoute = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const redirectTo = searchParams.get('redirectTo');
@@ -24,3 +24,5 @@ export const LoginRoute = () => {
     </AuthLayout>
   );
 };
+
+export default LoginRoute;
diff --git a/apps/react-vite/src/app/routes/auth/register.tsx b/apps/react-vite/src/app/routes/auth/register.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 
 import { AuthLayout } from '@/components/layouts/auth-layout';
 import { paths } from '@/config/paths';
 import { RegisterForm } from '@/features/auth/components/register-form';
 import { useTeams } from '@/features/teams/api/get-teams';
 
-export const RegisterRoute = () => {
+const RegisterRoute = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const redirectTo = searchParams.get('redirectTo');
@@ -36,3 +36,5 @@ export const RegisterRoute = () => {
     </AuthLayout>
   );
 };
+
+export default RegisterRoute;
diff --git a/apps/react-vite/src/app/routes/landing.tsx b/apps/react-vite/src/app/routes/landing.tsx
@@ -1,12 +1,12 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import logo from '@/assets/logo.svg';
 import { Head } from '@/components/seo';
 import { Button } from '@/components/ui/button';
 import { paths } from '@/config/paths';
 import { useUser } from '@/lib/auth';
 
-export const LandingRoute = () => {
+const LandingRoute = () => {
   const navigate = useNavigate();
   const user = useUser();
 
@@ -84,3 +84,5 @@ export const LandingRoute = () => {
     </>
   );
 };
+
+export default LandingRoute;
diff --git a/apps/react-vite/src/app/routes/not-found.tsx b/apps/react-vite/src/app/routes/not-found.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@/components/ui/link';
 import { paths } from '@/config/paths';
 
-export const NotFoundRoute = () => {
+const NotFoundRoute = () => {
   return (
     <div className="mt-52 flex flex-col items-center font-semibold">
       <h1>404 - Not Found</h1>
@@ -12,3 +12,5 @@ export const NotFoundRoute = () => {
     </div>
   );
 };
+
+export default NotFoundRoute;