Improvements (#194)

* redirect authenticated users to app when visiting auth pages

* prefetch comments

* small refactor

* update docs

Author: alan2207

apps/react-vite/__mocks__/zustand.ts

@@ -1,4 +1,5 @@
 import { act } from '@testing-library/react';
+import { afterEach, vi } from 'vitest';
 import * as zustand from 'zustand';
 
 const { create: actualCreate, createStore: actualCreateStore } =
@@ -18,8 +19,6 @@ const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
 
 // when creating a store, we get its initial state, create a reset function and add it in the set
 export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
-  console.log('zustand create mock');
-
   // to support curried version of create
   return typeof stateCreator === 'function'
     ? createUncurried(stateCreator)
@@ -37,8 +36,6 @@ const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
 
 // when creating a store, we get its initial state, create a reset function and add it in the set
 export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
-  console.log('zustand createStore mock');
-
   // to support curried version of createStore
   return typeof stateCreator === 'function'
     ? createStoreUncurried(stateCreator)

apps/react-vite/src/app/index.tsx

@@ -1,24 +1,10 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useMemo } from 'react';
-import { RouterProvider } from 'react-router-dom';
+import { AppProvider } from './provider';
+import { AppRouter } from './router';
 
-import { AppProvider } from './main-provider';
-import { createRouter } from './routes';
-
-const AppRouter = () => {
-  const queryClient = useQueryClient();
-
-  const router = useMemo(() => createRouter(queryClient), [queryClient]);
-
-  return <RouterProvider router={router} />;
-};
-
-function App() {
+export const App = () => {
   return (
     <AppProvider>
       <AppRouter />
     </AppProvider>
   );
-}
-
-export default App;
+};

apps/react-vite/src/app/main-provider.tsx renamed to apps/react-vite/src/app/provider.tsx

@@ -1,4 +1,4 @@
-import { QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -8,13 +8,20 @@ import { MainErrorFallback } from '@/components/errors/main';
 import { Notifications } from '@/components/ui/notifications';
 import { Spinner } from '@/components/ui/spinner';
 import { AuthLoader } from '@/lib/auth';
-import { queryClient } from '@/lib/react-query';
+import { queryConfig } from '@/lib/react-query';
 
 type AppProviderProps = {
   children: React.ReactNode;
 };
 
 export const AppProvider = ({ children }: AppProviderProps) => {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: queryConfig,
+      }),
+  );
+
   return (
     <React.Suspense
       fallback={

apps/react-vite/src/app/routes/index.tsx renamed to apps/react-vite/src/app/router.tsx

@@ -1,30 +1,35 @@
-import { QueryClient } from '@tanstack/react-query';
-import { LoaderFunctionArgs, createBrowserRouter } from 'react-router-dom';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import {
+  LoaderFunctionArgs,
+  RouterProvider,
+  createBrowserRouter,
+} from 'react-router-dom';
 
 import { ProtectedRoute } from '@/lib/auth';
 
-import { AppRoot } from './app/root';
+import { AppRoot } from './routes/app/root';
 
-export const createRouter = (queryClient: QueryClient) =>
+export const createAppRouter = (queryClient: QueryClient) =>
   createBrowserRouter([
     {
       path: '/',
       lazy: async () => {
-        const { LandingRoute } = await import('./landing');
+        const { LandingRoute } = await import('./routes/landing');
         return { Component: LandingRoute };
       },
     },
     {
       path: '/auth/register',
       lazy: async () => {
-        const { RegisterRoute } = await import('./auth/register');
+        const { RegisterRoute } = await import('./routes/auth/register');
         return { Component: RegisterRoute };
       },
     },
     {
       path: '/auth/login',
       lazy: async () => {
-        const { LoginRoute } = await import('./auth/login');
+        const { LoginRoute } = await import('./routes/auth/login');
         return { Component: LoginRoute };
       },
     },
@@ -40,13 +45,13 @@ export const createRouter = (queryClient: QueryClient) =>
           path: 'discussions',
           lazy: async () => {
             const { DiscussionsRoute } = await import(
-              './app/discussions/discussions'
+              './routes/app/discussions/discussions'
             );
             return { Component: DiscussionsRoute };
           },
           loader: async () => {
             const { discussionsLoader } = await import(
-              './app/discussions/discussions'
+              './routes/app/discussions/discussions'
             );
             return discussionsLoader(queryClient)();
           },
@@ -55,41 +60,41 @@ export const createRouter = (queryClient: QueryClient) =>
           path: 'discussions/:discussionId',
           lazy: async () => {
             const { DiscussionRoute } = await import(
-              './app/discussions/discussion'
+              './routes/app/discussions/discussion'
             );
             return { Component: DiscussionRoute };
           },
 
           loader: async (args: LoaderFunctionArgs) => {
             const { discussionLoader } = await import(
-              './app/discussions/discussion'
+              './routes/app/discussions/discussion'
             );
             return discussionLoader(queryClient)(args);
           },
         },
         {
           path: 'users',
           lazy: async () => {
-            const { UsersRoute } = await import('./app/users');
+            const { UsersRoute } = await import('./routes/app/users');
             return { Component: UsersRoute };
           },
 
           loader: async () => {
-            const { usersLoader } = await import('./app/users');
+            const { usersLoader } = await import('./routes/app/users');
             return usersLoader(queryClient)();
           },
         },
         {
           path: 'profile',
           lazy: async () => {
-            const { ProfileRoute } = await import('./app/profile');
+            const { ProfileRoute } = await import('./routes/app/profile');
             return { Component: ProfileRoute };
           },
         },
         {
           path: '',
           lazy: async () => {
-            const { DashboardRoute } = await import('./app/dashboard');
+            const { DashboardRoute } = await import('./routes/app/dashboard');
             return { Component: DashboardRoute };
           },
         },
@@ -98,8 +103,16 @@ export const createRouter = (queryClient: QueryClient) =>
     {
       path: '*',
       lazy: async () => {
-        const { NotFoundRoute } = await import('./not-found');
+        const { NotFoundRoute } = await import('./routes/not-found');
         return { Component: NotFoundRoute };
       },
     },
   ]);
+
+export const AppRouter = () => {
+  const queryClient = useQueryClient();
+
+  const router = useMemo(() => createAppRouter(queryClient), [queryClient]);
+
+  return <RouterProvider router={router} />;
+};

apps/react-vite/src/app/routes/app/discussions/discussions.tsx

@@ -1,6 +1,7 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 
 import { ContentLayout } from '@/components/layouts';
+import { getCommentsQueryOptions } 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';
@@ -15,13 +16,19 @@ export const discussionsLoader = (queryClient: QueryClient) => async () => {
 };
 
 export const DiscussionsRoute = () => {
+  const queryClient = useQueryClient();
   return (
     <ContentLayout title="Discussions">
       <div className="flex justify-end">
         <CreateDiscussion />
       </div>
       <div className="mt-4">
-        <DiscussionsList />
+        <DiscussionsList
+          onDiscussionPrefetch={(id) => {
+            // Prefetch the comments data when the user hovers over the link in the list
+            queryClient.prefetchQuery(getCommentsQueryOptions(id));
+          }}
+        />
       </div>
     </ContentLayout>
   );

apps/react-vite/src/app/routes/auth/login.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import { Layout } from '@/components/layouts/auth-layout';
+import { AuthLayout } from '@/components/layouts/auth-layout';
 import { LoginForm } from '@/features/auth/components/login-form';
 
 export const LoginRoute = () => {
@@ -9,14 +9,14 @@ export const LoginRoute = () => {
   const redirectTo = searchParams.get('redirectTo');
 
   return (
-    <Layout title="Log in to your account">
+    <AuthLayout title="Log in to your account">
       <LoginForm
         onSuccess={() =>
           navigate(`${redirectTo ? `${redirectTo}` : '/app'}`, {
             replace: true,
           })
         }
       />
-    </Layout>
+    </AuthLayout>
   );
 };

apps/react-vite/src/app/routes/auth/register.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import { Layout } from '@/components/layouts/auth-layout';
+import { AuthLayout } from '@/components/layouts/auth-layout';
 import { RegisterForm } from '@/features/auth/components/register-form';
 import { useTeams } from '@/features/teams/api/get-teams';
 
@@ -18,7 +18,7 @@ export const RegisterRoute = () => {
   });
 
   return (
-    <Layout title="Register your account">
+    <AuthLayout title="Register your account">
       <RegisterForm
         onSuccess={() =>
           navigate(`${redirectTo ? `${redirectTo}` : '/app'}`, {
@@ -29,6 +29,6 @@ export const RegisterRoute = () => {
         setChooseTeam={() => setChooseTeam(!chooseTeam)}
         teams={teamsQuery.data}
       />
-    </Layout>
+    </AuthLayout>
   );
 };

apps/react-vite/src/components/layouts/auth-layout.tsx

@@ -1,15 +1,30 @@
 import * as React from 'react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import logo from '@/assets/logo.svg';
 import { Head } from '@/components/seo';
 import { Link } from '@/components/ui/link';
+import { useUser } from '@/lib/auth';
 
 type LayoutProps = {
   children: React.ReactNode;
   title: string;
 };
 
-export const Layout = ({ children, title }: LayoutProps) => {
+export const AuthLayout = ({ children, title }: LayoutProps) => {
+  const user = useUser();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (user.data) {
+      navigate('/app', {
+        replace: true,
+      });
+    }
+  }, [user.data, navigate]);
+
   return (
     <>
       <Head title={title} />

apps/react-vite/src/features/discussions/components/discussions-list.tsx

@@ -10,7 +10,13 @@ import { useDiscussions } from '../api/get-discussions';
 
 import { DeleteDiscussion } from './delete-discussion';
 
-export const DiscussionsList = () => {
+export type DiscussionsListProps = {
+  onDiscussionPrefetch?: (id: string) => void;
+};
+
+export const DiscussionsList = ({
+  onDiscussionPrefetch,
+}: DiscussionsListProps) => {
   const discussionsQuery = useDiscussions();
   const queryClient = useQueryClient();
 
@@ -48,6 +54,7 @@ export const DiscussionsList = () => {
                 onMouseEnter={() => {
                   // Prefetch the discussion data when the user hovers over the link
                   queryClient.prefetchQuery(getDiscussionQueryOptions(id));
+                  onDiscussionPrefetch?.(id);
                 }}
                 to={`./${id}`}
               >

apps/react-vite/src/lib/react-query.ts

@@ -1,8 +1,4 @@
-import {
-  UseMutationOptions,
-  DefaultOptions,
-  QueryClient,
-} from '@tanstack/react-query';
+import { UseMutationOptions, DefaultOptions } from '@tanstack/react-query';
 
 export const queryConfig = {
   queries: {
@@ -13,10 +9,6 @@ export const queryConfig = {
   },
 } satisfies DefaultOptions;
 
-export const queryClient = new QueryClient({
-  defaultOptions: queryConfig,
-});
-
 export type ApiFnReturnType<FnType extends (...args: any) => Promise<any>> =
   Awaited<ReturnType<FnType>>;