more updates

alan2207 · Sep 1, 2024 · 3f2b9f9 · 3f2b9f9
1 parent 2a654a7
commit 3f2b9f9
Show file tree

Hide file tree

Showing 37 changed files with 145 additions and 81 deletions.
diff --git a/apps/nextjs-app/src/app/app/discussions/[discussionId]/page.tsx b/apps/nextjs-app/src/app/app/discussions/[discussionId]/page.tsx
@@ -3,7 +3,7 @@
 import { useParams } from 'next/navigation';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { ContentLayout } from '@/components/layouts';
+import { ContentLayout } from '@/components/layouts/content-layout';
 import { Spinner } from '@/components/ui/spinner';
 import { Comments } from '@/features/comments/components/comments';
 import { useDiscussion } from '@/features/discussions/api/get-discussion';

diff --git a/apps/nextjs-app/src/app/app/discussions/page.tsx b/apps/nextjs-app/src/app/app/discussions/page.tsx
@@ -2,7 +2,7 @@
 
 import { useQueryClient } from '@tanstack/react-query';
 
-import { ContentLayout } from '@/components/layouts';
+import { ContentLayout } from '@/components/layouts/content-layout';
 import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
 import { DiscussionsList } from '@/features/discussions/components/discussions-list';

diff --git a/apps/nextjs-app/src/app/app/layout.tsx b/apps/nextjs-app/src/app/app/layout.tsx
@@ -1,6 +1,11 @@
 import { ReactNode } from 'react';
 
-import { DashboardLayout } from '@/components/layouts';
+import { DashboardLayout } from '@/components/layouts/dashboard-layout';
+
+export const metadata = {
+  title: 'Dashboard',
+  description: 'Dashboard',
+};
 
 const AppLayout = ({ children }: { children: ReactNode }) => {
   return <DashboardLayout>{children}</DashboardLayout>;

diff --git a/apps/nextjs-app/src/app/app/users/page.tsx b/apps/nextjs-app/src/app/app/users/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ContentLayout } from '@/components/layouts';
+import { ContentLayout } from '@/components/layouts/content-layout';
 import { UsersList } from '@/features/users/components/users-list';
 import { Authorization, ROLES } from '@/lib/authorization';
 

diff --git a/apps/nextjs-app/src/app/auth/layout.tsx b/apps/nextjs-app/src/app/auth/layout.tsx
@@ -1,18 +1,17 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
 
 import { AuthLayout as AuthLayoutComponent } from '@/components/layouts/auth-layout';
 
-const AuthLayout = ({ children }: { children: ReactNode }) => {
-  const pathname = usePathname();
-  const isLoginPage = pathname === '/auth/login';
-  const title = isLoginPage
-    ? 'Log in to your account'
-    : 'Register your account';
+export const generateMetadata = (...args: any[]) => {
+  console.log(args);
+  return {
+    title: 'Bulletproof React',
+    description: 'Welcome to Bulletproof React',
+  };
+};
 
-  return <AuthLayoutComponent title={title}>{children}</AuthLayoutComponent>;
+const AuthLayout = ({ children }: { children: ReactNode }) => {
+  return <AuthLayoutComponent>{children}</AuthLayoutComponent>;
 };
 
 export default AuthLayout;
diff --git a/apps/nextjs-app/src/app/layout.tsx b/apps/nextjs-app/src/app/layout.tsx
@@ -4,6 +4,11 @@ import { AppProvider } from '@/app/provider';
 
 import '@/styles/globals.css';
 
+export const metadata = {
+  title: 'Bulletproof React',
+  description: 'Showcasing Best Practices For Building React Applications',
+};
+
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
     <html lang="en">

diff --git a/apps/nextjs-app/src/app/page.tsx b/apps/nextjs-app/src/app/page.tsx
@@ -1,25 +1,9 @@
-'use client';
-import { useRouter } from 'next/navigation';
-
 import { Button } from '@/components/ui/button';
-import { useUser } from '@/lib/auth';
-
-// export const metadata = {
-//   title: 'Bulletproof React',
-//   description: 'Welcome to bulletproof react',
-// };
+import { Link } from '@/components/ui/link';
+import { checkLoggedIn } from '@/utils/auth';
 
 const HomePage = () => {
-  const router = useRouter();
-  const user = useUser();
-
-  const handleStart = () => {
-    if (user.data) {
-      router.push('/app');
-    } else {
-      router.push('/auth/login');
-    }
-  };
+  const isLoggedIn = checkLoggedIn();
 
   return (
     <div className="flex h-screen items-center bg-white">
@@ -31,27 +15,28 @@ const HomePage = () => {
         <p>Showcasing Best Practices For Building React Applications</p>
         <div className="mt-8 flex justify-center">
           <div className="inline-flex rounded-md shadow">
-            <Button
-              onClick={handleStart}
-              icon={
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="size-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-                  />
-                </svg>
-              }
-            >
-              Get started
-            </Button>
+            <Link href={isLoggedIn ? '/app' : '/auth/login'}>
+              <Button
+                icon={
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                    />
+                  </svg>
+                }
+              >
+                Get started
+              </Button>
+            </Link>
           </div>
           <div className="ml-3 inline-flex">
             <a

diff --git a/apps/nextjs-app/src/app/public/discussions/[discussionId]/page.tsx b/apps/nextjs-app/src/app/public/discussions/[discussionId]/page.tsx
@@ -3,24 +3,36 @@ import {
   HydrationBoundary,
   QueryClient,
 } from '@tanstack/react-query';
-import { cookies } from 'next/headers';
 
 import DiscussionPage from '@/app/app/discussions/[discussionId]/page';
 import { getInfiniteCommentsQueryOptions } from '@/features/comments/api/get-comments';
-import { getDiscussionQueryOptions } from '@/features/discussions/api/get-discussion';
+import {
+  getDiscussion,
+  getDiscussionQueryOptions,
+} from '@/features/discussions/api/get-discussion';
 
-const preloadData = async (discussionId: string) => {
-  const queryClient = new QueryClient();
+export const generateMetadata = async ({
+  params,
+}: {
+  params: { discussionId: string };
+}) => {
+  const discussion = await getDiscussion({
+    discussionId: params.discussionId,
+  });
+
+  const name = discussion.data.title;
 
-  const cookieStore = cookies();
+  return {
+    title: name,
+  };
+};
 
-  const cookie = cookieStore.get('bulletproof_react_app_token')?.value;
+const preloadData = async (discussionId: string) => {
+  const queryClient = new QueryClient();
 
-  await queryClient.prefetchQuery(
-    getDiscussionQueryOptions(discussionId, cookie),
-  );
+  await queryClient.prefetchQuery(getDiscussionQueryOptions(discussionId));
   await queryClient.prefetchInfiniteQuery(
-    getInfiniteCommentsQueryOptions(discussionId, cookie),
+    getInfiniteCommentsQueryOptions(discussionId),
   );
 
   return {

diff --git a/apps/nextjs-app/src/components/layouts/auth-layout.tsx b/apps/nextjs-app/src/components/layouts/auth-layout.tsx
@@ -1,29 +1,25 @@
 'use client';
 
 import { useRouter, usePathname } from 'next/navigation';
-import * as React from 'react';
-import { useEffect } from 'react';
+import { ReactNode, useEffect, Suspense } 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 = {
-  children: React.ReactNode;
-  title: string;
+  children: ReactNode;
 };
 
-// export const metadata = {
-//   title: 'Bulletproof React',
-//   description: 'Welcome to bulletproof react',
-// };
-
-export const AuthLayout = ({ children, title }: LayoutProps) => {
+export const AuthLayout = ({ children }: LayoutProps) => {
   const user = useUser();
-
   const router = useRouter();
   const pathname = usePathname();
+  const isLoginPage = pathname === '/auth/login';
+  const title = isLoginPage
+    ? 'Log in to your account'
+    : 'Register your account';
 
   useEffect(() => {
     if (user.data) {
@@ -32,7 +28,7 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
   }, [user.data, router]);
 
   return (
-    <React.Suspense
+    <Suspense
       fallback={
         <div className="flex size-full items-center justify-center">
           <Spinner size="xl" />
@@ -60,6 +56,6 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
           </div>
         </div>
       </ErrorBoundary>
-    </React.Suspense>
+    </Suspense>
   );
 };
diff --git a/apps/nextjs-app/src/components/layouts/content-layout.tsx b/apps/nextjs-app/src/components/layouts/content-layout.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 
 type ContentLayoutProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   title: string;
 };
 

diff --git a/apps/nextjs-app/src/components/layouts/index.ts b/apps/nextjs-app/src/components/layouts/index.ts
diff --git a/apps/nextjs-app/src/components/ui/dialog/confirmation-dialog/confirmation-dialog.tsx b/apps/nextjs-app/src/components/ui/dialog/confirmation-dialog/confirmation-dialog.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { CircleAlert, Info } from 'lucide-react';
 import * as React from 'react';
 import { useEffect } from 'react';

diff --git a/apps/nextjs-app/src/components/ui/dialog/dialog.tsx b/apps/nextjs-app/src/components/ui/dialog/dialog.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import * as React from 'react';

diff --git a/apps/nextjs-app/src/components/ui/drawer/drawer.tsx b/apps/nextjs-app/src/components/ui/drawer/drawer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as DrawerPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { cva, type VariantProps } from 'class-variance-authority';

diff --git a/apps/nextjs-app/src/components/ui/dropdown/dropdown.tsx b/apps/nextjs-app/src/components/ui/dropdown/dropdown.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import {
   CheckIcon,

diff --git a/apps/nextjs-app/src/components/ui/form/form-drawer.tsx b/apps/nextjs-app/src/components/ui/form/form-drawer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import { useDisclosure } from '@/hooks/use-disclosure';

diff --git a/apps/nextjs-app/src/components/ui/form/form.tsx b/apps/nextjs-app/src/components/ui/form/form.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';

diff --git a/apps/nextjs-app/src/components/ui/form/label.tsx b/apps/nextjs-app/src/components/ui/form/label.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';

diff --git a/apps/nextjs-app/src/components/ui/form/select.tsx b/apps/nextjs-app/src/components/ui/form/select.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
 

diff --git a/apps/nextjs-app/src/components/ui/form/switch.tsx b/apps/nextjs-app/src/components/ui/form/switch.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as React from 'react';
 

diff --git a/apps/nextjs-app/src/components/ui/notifications/notification.tsx b/apps/nextjs-app/src/components/ui/notifications/notification.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Info, CircleAlert, CircleX, CircleCheck } from 'lucide-react';
 
 const icons = {

diff --git a/apps/nextjs-app/src/components/ui/notifications/notifications.tsx b/apps/nextjs-app/src/components/ui/notifications/notifications.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Notification } from './notification';
 import { useNotifications } from './notifications-store';
 

diff --git a/apps/nextjs-app/src/features/comments/components/comments-list.tsx b/apps/nextjs-app/src/features/comments/components/comments-list.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { ArchiveX } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 

diff --git a/apps/nextjs-app/src/features/comments/components/comments.tsx b/apps/nextjs-app/src/features/comments/components/comments.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { usePathname } from 'next/navigation';
 
 import { CommentsList } from './comments-list';

diff --git a/apps/nextjs-app/src/features/comments/components/create-comment.tsx b/apps/nextjs-app/src/features/comments/components/create-comment.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Plus } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';

diff --git a/apps/nextjs-app/src/features/comments/components/delete-comment.tsx b/apps/nextjs-app/src/features/comments/components/delete-comment.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Trash } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';

diff --git a/apps/nextjs-app/src/features/discussions/components/create-discussion.tsx b/apps/nextjs-app/src/features/discussions/components/create-discussion.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Plus } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';

diff --git a/apps/nextjs-app/src/features/discussions/components/delete-discussion.tsx b/apps/nextjs-app/src/features/discussions/components/delete-discussion.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Trash } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';

diff --git a/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx b/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Link as LinkIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 

diff --git a/apps/nextjs-app/src/features/discussions/components/discussions-list.tsx b/apps/nextjs-app/src/features/discussions/components/discussions-list.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'next/navigation';
 

diff --git a/apps/nextjs-app/src/features/discussions/components/update-discussion.tsx b/apps/nextjs-app/src/features/discussions/components/update-discussion.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Pen } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';

diff --git a/apps/nextjs-app/src/features/users/components/delete-user.tsx b/apps/nextjs-app/src/features/users/components/delete-user.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Button } from '@/components/ui/button';
 import { ConfirmationDialog } from '@/components/ui/dialog';
 import { useNotifications } from '@/components/ui/notifications';