update

alan2207 · Aug 25, 2024 · 2a654a7 · 2a654a7
1 parent c52f133
commit 2a654a7
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 25 deletions.
diff --git a/.github/workflows/nextjs-app-ci.yml b/.github/workflows/nextjs-app-ci.yml
@@ -0,0 +1,62 @@
+name: Next.js App CI
+on:
+  push:
+    branches: ["*"]
+    paths-ignore:
+      - "README.md"
+      - "docs/**"
+  pull_request:
+    branches: [master]
+    paths-ignore:
+      - "README.md"
+      - "docs/**"
+jobs:
+  all-cli-checks:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/nextjs-app
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example .env
+      - name: Install dependencies
+        run: yarn install
+      - name: Build application
+        run: yarn build
+      - name: Run tests
+        run: yarn test
+      - name: Run linter
+        run: yarn lint
+      - name: Check types
+        run: yarn check-types
+  e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/nextjs-app
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Set environment variables
+        run: mv .env.example-e2e .env
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn test-e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            mocked-db.json
+          retention-days: 30
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1 +1 @@
-yarn --cwd apps/react-vite lint-staged && yarn --cwd apps/nextjs-pages lint-staged
+yarn --cwd apps/nextjs-app lint-staged && yarn --cwd apps/nextjs-pages lint-staged && yarn --cwd apps/react-vite lint-staged
diff --git a/apps/nextjs-app/src/app/app/layout.tsx b/apps/nextjs-app/src/app/app/layout.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 
 import { DashboardLayout } from '@/components/layouts';
 
-export default function AppLayout({ children }: { children: ReactNode }) {
+const AppLayout = ({ children }: { children: ReactNode }) => {
   return <DashboardLayout>{children}</DashboardLayout>;
-}
+};
+
+export default AppLayout;
diff --git a/apps/nextjs-app/src/app/auth/layout.tsx b/apps/nextjs-app/src/app/auth/layout.tsx
@@ -5,12 +5,14 @@ import { ReactNode } from 'react';
 
 import { AuthLayout as AuthLayoutComponent } from '@/components/layouts/auth-layout';
 
-export default function AuthLayout({ children }: { children: ReactNode }) {
+const 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>;
-}
+};
+
+export default AuthLayout;
diff --git a/apps/nextjs-app/src/app/layout.tsx b/apps/nextjs-app/src/app/layout.tsx
@@ -4,12 +4,14 @@ import { AppProvider } from '@/app/provider';
 
 import '@/styles/globals.css';
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
     <html lang="en">
       <body>
         <AppProvider>{children}</AppProvider>
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/apps/nextjs-app/src/app/page.tsx b/apps/nextjs-app/src/app/page.tsx
@@ -9,7 +9,7 @@ import { useUser } from '@/lib/auth';
 //   description: 'Welcome to bulletproof react',
 // };
 
-export const HomePage = () => {
+const HomePage = () => {
   const router = useRouter();
   const user = useUser();
 

diff --git a/apps/nextjs-app/src/components/layouts/auth-layout.tsx b/apps/nextjs-app/src/components/layouts/auth-layout.tsx
@@ -1,10 +1,12 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import * as React from 'react';
 import { useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import { Link } from '@/components/ui/link';
+import { Spinner } from '@/components/ui/spinner';
 import { useUser } from '@/lib/auth';
 
 type LayoutProps = {
@@ -21,6 +23,7 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
   const user = useUser();
 
   const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     if (user.data) {
@@ -29,24 +32,34 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
   }, [user.data, router]);
 
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="flex justify-center">
-          <Link className="flex items-center text-white" href="/">
-            <img className="h-24 w-auto" src="/logo.svg" alt="Workflow" />
-          </Link>
+    <React.Suspense
+      fallback={
+        <div className="flex size-full items-center justify-center">
+          <Spinner size="xl" />
         </div>
+      }
+    >
+      <ErrorBoundary key={pathname} fallback={<div>Something went wrong!</div>}>
+        <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
+          <div className="sm:mx-auto sm:w-full sm:max-w-md">
+            <div className="flex justify-center">
+              <Link className="flex items-center text-white" href="/">
+                <img className="h-24 w-auto" src="/logo.svg" alt="Workflow" />
+              </Link>
+            </div>
 
-        <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900">
-          {title}
-        </h2>
-      </div>
+            <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900">
+              {title}
+            </h2>
+          </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
-          {children}
+          <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+            <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
+              {children}
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </ErrorBoundary>
+    </React.Suspense>
   );
 };
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "A simple, scalable, and powerful architecture for building production ready React applications.",
   "scripts": {
-    "prepare": "cd ./apps/nextjs-pages && yarn && cd ../react-vite && yarn"
+    "prepare": "cd ./apps/nextjs-app && yarn && cd ../nextjs-pages && yarn && cd ../react-vite && yarn"
   },
   "author": "alan2207",
   "license": "MIT"