migrate nextjs app

apps/nextjs-app/.eslintrc.cjs

@@ -140,7 +140,8 @@ module.exports = {
     },
     {
       plugins: ['check-file'],
-      files: ['src/**/!(__tests__)/*'],
+      files: ['src/**/*'],
+      ignorePatterns: ['**/__tests__/**/*', 'src/app/**/*'],
       rules: {
         'check-file/folder-naming-convention': [
           'error',

apps/nextjs-app/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/nextjs-app/package.json

@@ -99,7 +99,6 @@
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
     "msw": "^2.2.14",
-    "next-router-mock": "^0.9.13",
     "pino-http": "^10.1.0",
     "pino-pretty": "^11.1.0",
     "plop": "^4.0.1",

apps/nextjs-app/src/app/pages/app/discussions/__tests__/discussion.test.tsx → apps/nextjs-app/src/app/app/discussions/[discussionId]/__tests__/discussion.test.tsx

@@ -1,4 +1,4 @@
-import mockRouter from 'next-router-mock';
+import { useParams } from 'next/navigation';
 
 import {
   renderApp,
@@ -11,13 +11,27 @@ import {
   waitForLoadingToFinish,
 } from '@/testing/test-utils';
 
-import { DiscussionPage } from '../discussion';
+import DiscussionPage from '../page';
+
+vi.mock('next/navigation', async () => {
+  const actual = await vi.importActual('next/navigation');
+  return {
+    ...actual,
+    useRouter: () => {
+      return {
+        push: vi.fn(),
+        replace: vi.fn(),
+      };
+    },
+    useParams: vi.fn(),
+  };
+});
 
 const renderDiscussion = async () => {
   const fakeUser = await createUser();
   const fakeDiscussion = await createDiscussion({ teamId: fakeUser.teamId });
 
-  mockRouter.query = { discussionId: fakeDiscussion.id };
+  vi.mocked(useParams).mockReturnValue({ discussionId: fakeDiscussion.id });
 
   const utils = await renderApp(<DiscussionPage />, {
     user: fakeUser,

apps/nextjs-app/src/app/app/discussions/[discussionId]/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { ContentLayout } from '@/components/layouts';
+import { Spinner } from '@/components/ui/spinner';
+
+import { Comments } from '@/features/comments/components/comments';
+import { useDiscussion } from '@/features/discussions/api/get-discussion';
+import { DiscussionView } from '@/features/discussions/components/discussion-view';
+
+const DiscussionPage = () => {
+  const params = useParams();
+  const discussionId = params?.discussionId as string;
+
+  const discussionQuery = useDiscussion({
+    discussionId,
+  });
+
+  if (discussionQuery.isLoading) {
+    return (
+      <div className="flex h-48 w-full items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  const discussion = discussionQuery.data?.data;
+
+  if (!discussion) return null;
+
+  return (
+    <ContentLayout title={discussion.title}>
+      <DiscussionView discussionId={discussionId} />
+      <div className="mt-8">
+        <ErrorBoundary
+          fallback={
+            <div>Failed to load comments. Try to refresh the page.</div>
+          }
+        >
+          <Comments discussionId={discussionId} />
+        </ErrorBoundary>
+      </div>
+    </ContentLayout>
+  );
+};
+
+export default DiscussionPage;

apps/nextjs-app/src/app/pages/app/discussions/__tests__/discussions.test.tsx → apps/nextjs-app/src/app/app/discussions/__tests__/discussions.test.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/testing/test-utils';
 import { formatDate } from '@/utils/format';
 
-import { DiscussionsPage } from '../discussions';
+import DiscussionsPage from '../page';
 
 beforeAll(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {});

apps/nextjs-app/src/app/pages/app/discussions/discussions.tsx → apps/nextjs-app/src/app/app/discussions/page.tsx

@@ -1,16 +1,17 @@
+'use client';
+
 import { useQueryClient } from '@tanstack/react-query';
-import { ReactElement } from 'react';
 
-import { ContentLayout, DashboardLayout } from '@/components/layouts';
+import { ContentLayout } from '@/components/layouts';
 import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
 import { DiscussionsList } from '@/features/discussions/components/discussions-list';
 
-export const DiscussionsPage = () => {
+const DiscussionsPage = () => {
   const queryClient = useQueryClient();
 
   return (
-    <>
+    <ContentLayout title="Discussions">
       <div className="flex justify-end">
         <CreateDiscussion />
       </div>
@@ -24,14 +25,8 @@ export const DiscussionsPage = () => {
           }}
         />
       </div>
-    </>
+    </ContentLayout>
   );
 };
 
-DiscussionsPage.getLayout = (page: ReactElement) => {
-  return (
-    <DashboardLayout>
-      <ContentLayout title="Discussions">{page}</ContentLayout>
-    </DashboardLayout>
-  );
-};
+export default DiscussionsPage;

apps/nextjs-app/src/app/app/layout.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+import { DashboardLayout } from '@/components/layouts';
+
+export default function AppLayout({ children }: { children: ReactNode }) {
+  return <DashboardLayout>{children}</DashboardLayout>;
+}

apps/nextjs-app/src/app/pages/app/dashboard.tsx → apps/nextjs-app/src/app/app/page.tsx

@@ -1,12 +1,10 @@
-import { ReactElement } from 'react';
+'use client';
 
-import { ContentLayout, DashboardLayout } from '@/components/layouts';
 import { useUser } from '@/lib/auth';
 import { ROLES } from '@/lib/authorization';
 
-export const DashboardPage = () => {
+const DashboardPage = () => {
   const user = useUser();
-  if (!user.data) return null;
 
   return (
     <>
@@ -36,10 +34,4 @@ export const DashboardPage = () => {
   );
 };
 
-DashboardPage.getLayout = (page: ReactElement) => {
-  return (
-    <DashboardLayout>
-      <ContentLayout title="Dashboard">{page}</ContentLayout>
-    </DashboardLayout>
-  );
-};
+export default DashboardPage;

apps/nextjs-app/src/app/pages/app/profile.tsx → apps/nextjs-app/src/app/app/profile/page.tsx

@@ -1,6 +1,5 @@
-import { ReactElement } from 'react';
+'use client';
 
-import { ContentLayout, DashboardLayout } from '@/components/layouts';
 import { UpdateProfile } from '@/features/users/components/update-profile';
 import { useUser } from '@/lib/auth';
 
@@ -17,7 +16,7 @@ const Entry = ({ label, value }: EntryProps) => (
   </div>
 );
 
-export const ProfilePage = () => {
+const ProfilePage = () => {
   const user = useUser();
 
   if (!user.data) return null;
@@ -48,10 +47,4 @@ export const ProfilePage = () => {
   );
 };
 
-ProfilePage.getLayout = (page: ReactElement) => {
-  return (
-    <DashboardLayout>
-      <ContentLayout title="Profile">{page}</ContentLayout>
-    </DashboardLayout>
-  );
-};
+export default ProfilePage;

apps/nextjs-app/src/app/pages/app/users.tsx → apps/nextjs-app/src/app/app/users/page.tsx

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
+'use client';
 
-import { ContentLayout, DashboardLayout } from '@/components/layouts';
+import { ContentLayout } from '@/components/layouts';
 import { UsersList } from '@/features/users/components/users-list';
 import { Authorization, ROLES } from '@/lib/authorization';
 
-export const UsersPage = () => {
+const UsersPage = () => {
   return (
     <ContentLayout title="Users">
       <Authorization
@@ -17,10 +17,4 @@ export const UsersPage = () => {
   );
 };
 
-UsersPage.getLayout = (page: ReactElement) => {
-  return (
-    <DashboardLayout>
-      <ContentLayout title="Users">{page}</ContentLayout>
-    </DashboardLayout>
-  );
-};
+export default UsersPage;

apps/nextjs-app/src/app/auth/layout.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { ReactNode } from 'react';
+
+import { AuthLayout as AuthLayoutComponent } from '@/components/layouts/auth-layout';
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const isLoginPage = pathname === '/auth/login';
+  const title = isLoginPage
+    ? 'Log in to your account'
+    : 'Register your account';
+
+  return <AuthLayoutComponent title={title}>{children}</AuthLayoutComponent>;
+}

apps/nextjs-app/src/app/auth/login/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { LoginForm } from '@/features/auth/components/login-form';
+
+// export const metadata = {
+//   title: 'Log in to your account',
+//   description: 'Log in to your account',
+// };
+
+const LoginPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams?.get('redirectTo');
+
+  return (
+    <LoginForm
+      onSuccess={() =>
+        router.replace(`${redirectTo ? `${redirectTo}` : '/app'}`)
+      }
+    />
+  );
+};
+
+export default LoginPage;

apps/nextjs-app/src/app/pages/auth/register.tsx → apps/nextjs-app/src/app/auth/register/page.tsx

@@ -1,14 +1,21 @@
-import { useRouter } from 'next/router';
-import { ReactElement, useState } from 'react';
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
 
-import { AuthLayout } from '@/components/layouts/auth-layout';
 import { RegisterForm } from '@/features/auth/components/register-form';
 import { useTeams } from '@/features/teams/api/get-teams';
 
-export const RegisterPage = () => {
+// export const metadata = {
+//   title: 'Register your account',
+//   description: 'Register your account',
+// };
+
+const RegisterPage = () => {
   const router = useRouter();
 
-  const { redirectTo } = router.query;
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams?.get('redirectTo');
 
   const [chooseTeam, setChooseTeam] = useState(false);
 
@@ -30,6 +37,4 @@ export const RegisterPage = () => {
   );
 };
 
-RegisterPage.getLayout = (page: ReactElement) => {
-  return <AuthLayout title="Register your account">{page}</AuthLayout>;
-};
+export default RegisterPage;

apps/nextjs-app/src/app/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { AppProvider } from '@/app/provider';
+
+import '@/styles/globals.css';
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <AppProvider>{children}</AppProvider>
+      </body>
+    </html>
+  );
+}