add public page with ssr

alan2207 · Aug 18, 2024 · 00d7b16 · 00d7b16
1 parent ddb3afa
commit 00d7b16
Show file tree

Hide file tree

Showing 25 changed files with 216 additions and 98 deletions.
diff --git a/apps/nextjs-pages/.gitignore b/apps/nextjs-pages/.gitignore
@@ -38,4 +38,6 @@ yarn-error.log*
 # local
 mocked-db.json
 
-/.next
+/.next
+
+tsconfig.tsbuildinfo
diff --git a/apps/nextjs-pages/src/application/pages/app/discussions/__tests__/discussion.test.tsx b/apps/nextjs-pages/src/application/pages/app/discussions/__tests__/discussion.test.tsx
@@ -8,22 +8,25 @@ import {
   createDiscussion,
   createUser,
   within,
+  waitForLoadingToFinish,
 } from '@/testing/test-utils';
 
-import { Discussion } from '../discussion';
+import { DiscussionPage } from '../discussion';
 
 const renderDiscussion = async () => {
   const fakeUser = await createUser();
   const fakeDiscussion = await createDiscussion({ teamId: fakeUser.teamId });
 
   mockRouter.query = { discussionId: fakeDiscussion.id };
 
-  const utils = await renderApp(<Discussion />, {
+  const utils = await renderApp(<DiscussionPage />, {
     user: fakeUser,
     path: `/app/discussions/:discussionId`,
     url: `/app/discussions/${fakeDiscussion.id}`,
   });
 
+  await waitForLoadingToFinish();
+
   await screen.findByText(fakeDiscussion.title);
 
   return {

diff --git a/apps/nextjs-pages/src/application/pages/app/discussions/__tests__/discussions.test.tsx b/apps/nextjs-pages/src/application/pages/app/discussions/__tests__/discussions.test.tsx
@@ -6,6 +6,7 @@ import {
   screen,
   userEvent,
   waitFor,
+  waitForLoadingToFinish,
   within,
 } from '@/testing/test-utils';
 import { formatDate } from '@/utils/format';
@@ -24,14 +25,9 @@ test(
   'should create, render and delete discussions',
   { timeout: 10000 },
   async () => {
-    await renderApp(
-      <DiscussionsPage
-        dehydratedState={{
-          mutations: [],
-          queries: [],
-        }}
-      />,
-    );
+    await renderApp(<DiscussionsPage />);
+
+    await waitForLoadingToFinish();
 
     const newDiscussion = createDiscussion();
 

diff --git a/apps/nextjs-pages/src/application/pages/app/discussions/discussion.tsx b/apps/nextjs-pages/src/application/pages/app/discussions/discussion.tsx
@@ -41,7 +41,7 @@ export const getServerSideProps = (async ({ query, req }) => {
   };
 }) satisfies GetServerSideProps<DiscussionPageProps>;
 
-export const Discussion = () => {
+export const DiscussionPage = () => {
   const router = useRouter();
   const discussionId = router.query.discussionId as string;
 
@@ -77,18 +77,18 @@ export const Discussion = () => {
   );
 };
 
-const DiscussionPage = ({
+DiscussionPage.getLayout = (page: ReactElement) => {
+  return <DashboardLayout>{page}</DashboardLayout>;
+};
+
+export default DiscussionPage;
+
+export const PublicDiscussionPage = ({
   dehydratedState,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   return (
     <HydrationBoundary state={dehydratedState}>
-      <Discussion />
+      <DiscussionPage />
     </HydrationBoundary>
   );
 };
-
-DiscussionPage.getLayout = (page: ReactElement) => {
-  return <DashboardLayout>{page}</DashboardLayout>;
-};
-
-export default DiscussionPage;
diff --git a/apps/nextjs-pages/src/application/pages/app/discussions/discussions.tsx b/apps/nextjs-pages/src/application/pages/app/discussions/discussions.tsx
@@ -1,43 +1,16 @@
-import {
-  HydrationBoundary,
-  QueryClient,
-  useQueryClient,
-  dehydrate,
-} from '@tanstack/react-query';
-import type { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import { useQueryClient } from '@tanstack/react-query';
 import { ReactElement } from 'react';
 
 import { ContentLayout, DashboardLayout } 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';
 
-type DiscussionsPageProps = {
-  dehydratedState?: unknown;
-};
-
-export const getServerSideProps = (async ({ query, req }) => {
-  const queryClient = new QueryClient();
-  const page = Number(query.page || 1);
-  const cookie = req.headers.cookie;
-
-  await queryClient.prefetchQuery(getDiscussionsQueryOptions({ page, cookie }));
-
-  return {
-    props: {
-      dehydratedState: dehydrate(queryClient),
-    },
-  };
-}) satisfies GetServerSideProps<DiscussionsPageProps>;
-
-const DiscussionsPage = ({
-  dehydratedState,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+const DiscussionsPage = () => {
   const queryClient = useQueryClient();
 
   return (
-    <HydrationBoundary state={dehydratedState}>
+    <>
       <div className="flex justify-end">
         <CreateDiscussion />
       </div>
@@ -51,7 +24,7 @@ const DiscussionsPage = ({
           }}
         />
       </div>
-    </HydrationBoundary>
+    </>
   );
 };
 

diff --git a/apps/nextjs-pages/src/components/layouts/dashboard-layout.tsx b/apps/nextjs-pages/src/components/layouts/dashboard-layout.tsx
@@ -7,7 +7,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { Button } from '@/components/ui/button';
 import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import { Spinner } from '@/components/ui/spinner';
-import { useLogout } from '@/lib/auth';
+import { AuthLoader, useLogout } from '@/lib/auth';
 import { ROLES, useAuthorization } from '@/lib/authorization';
 import { cn } from '@/utils/cn';
 
@@ -235,7 +235,15 @@ export const DashboardLayout = ({
           key={router.pathname}
           fallback={<div>Something went wrong!</div>}
         >
-          {children}
+          <AuthLoader
+            renderLoading={() => (
+              <div className="flex size-full items-center justify-center">
+                <Spinner size="xl" />
+              </div>
+            )}
+          >
+            {children}
+          </AuthLoader>
         </ErrorBoundary>
       </Suspense>
     </Layout>

diff --git a/apps/nextjs-pages/src/components/ui/link/link.tsx b/apps/nextjs-pages/src/components/ui/link/link.tsx
@@ -5,6 +5,7 @@ import { cn } from '@/utils/cn';
 export type LinkProps = {
   className?: string;
   children: React.ReactNode;
+  target?: string;
 } & NextLinkProps;
 
 export const Link = ({ className, children, href, ...props }: LinkProps) => {

diff --git a/apps/nextjs-pages/src/features/comments/components/comments-list.tsx b/apps/nextjs-pages/src/features/comments/components/comments-list.tsx
@@ -1,4 +1,5 @@
 import { ArchiveX } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
 import { MDPreview } from '@/components/ui/md-preview';
@@ -19,6 +20,8 @@ type CommentsListProps = {
 export const CommentsList = ({ discussionId }: CommentsListProps) => {
   const user = useUser();
   const commentsQuery = useInfiniteComments({ discussionId });
+  const pathname = usePathname();
+  const isPublicView = pathname?.startsWith?.('/public/');
 
   if (commentsQuery.isLoading) {
     return (
@@ -51,28 +54,29 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
             key={comment.id || index}
             className="w-full bg-white p-4 shadow-sm"
           >
-            <Authorization
-              policyCheck={POLICIES['comment:delete'](
-                user.data as User,
-                comment,
-              )}
-            >
-              <div className="flex justify-between">
-                <div>
-                  <span className="text-xs font-semibold">
-                    {formatDate(comment.createdAt)}
+            <div className="flex justify-between">
+              <div>
+                <span className="text-xs font-semibold">
+                  {formatDate(comment.createdAt)}
+                </span>
+                {comment.author && (
+                  <span className="text-xs font-bold">
+                    {' '}
+                    by {comment.author.firstName} {comment.author.lastName}
                   </span>
-                  {comment.author && (
-                    <span className="text-xs font-bold">
-                      {' '}
-                      by {comment.author.firstName} {comment.author.lastName}
-                    </span>
-                  )}
-                </div>
-                <DeleteComment discussionId={discussionId} id={comment.id} />
+                )}
               </div>
-            </Authorization>
-
+              {!isPublicView && (
+                <Authorization
+                  policyCheck={POLICIES['comment:delete'](
+                    user.data as User,
+                    comment,
+                  )}
+                >
+                  <DeleteComment discussionId={discussionId} id={comment.id} />
+                </Authorization>
+              )}
+            </div>
             <MDPreview value={comment.body} />
           </li>
         ))}

diff --git a/apps/nextjs-pages/src/features/comments/components/comments.tsx b/apps/nextjs-pages/src/features/comments/components/comments.tsx
@@ -1,3 +1,5 @@
+import { usePathname } from 'next/navigation';
+
 import { CommentsList } from './comments-list';
 import { CreateComment } from './create-comment';
 
@@ -6,11 +8,13 @@ type CommentsProps = {
 };
 
 export const Comments = ({ discussionId }: CommentsProps) => {
+  const pathname = usePathname();
+  const isPublicView = pathname?.startsWith?.('/public/');
   return (
     <div>
       <div className="mb-4 flex items-center justify-between">
         <h3 className="text-xl font-bold">Comments:</h3>
-        <CreateComment discussionId={discussionId} />
+        {!isPublicView && <CreateComment discussionId={discussionId} />}
       </div>
       <CommentsList discussionId={discussionId} />
     </div>

diff --git a/apps/nextjs-pages/src/features/discussions/api/create-discussion.ts b/apps/nextjs-pages/src/features/discussions/api/create-discussion.ts
@@ -10,6 +10,7 @@ import { getDiscussionsQueryOptions } from './get-discussions';
 export const createDiscussionInputSchema = z.object({
   title: z.string().min(1, 'Required'),
   body: z.string().min(1, 'Required'),
+  public: z.boolean(),
 });
 
 export type CreateDiscussionInput = z.infer<typeof createDiscussionInputSchema>;

diff --git a/apps/nextjs-pages/src/features/discussions/api/update-discussion.ts b/apps/nextjs-pages/src/features/discussions/api/update-discussion.ts
@@ -10,6 +10,7 @@ import { getDiscussionQueryOptions } from './get-discussion';
 export const updateDiscussionInputSchema = z.object({
   title: z.string().min(1, 'Required'),
   body: z.string().min(1, 'Required'),
+  public: z.boolean(),
 });
 
 export type UpdateDiscussionInput = z.infer<typeof updateDiscussionInputSchema>;

diff --git a/apps/nextjs-pages/src/features/discussions/components/create-discussion.tsx b/apps/nextjs-pages/src/features/discussions/components/create-discussion.tsx
@@ -1,7 +1,14 @@
 import { Plus } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import { Form, FormDrawer, Input, Textarea } from '@/components/ui/form';
+import {
+  Form,
+  FormDrawer,
+  Input,
+  Label,
+  Switch,
+  Textarea,
+} from '@/components/ui/form';
 import { useNotifications } from '@/components/ui/notifications';
 import { Authorization, ROLES } from '@/lib/authorization';
 
@@ -50,8 +57,15 @@ export const CreateDiscussion = () => {
             createDiscussionMutation.mutate({ data: values });
           }}
           schema={createDiscussionInputSchema}
+          options={{
+            defaultValues: {
+              title: '',
+              body: '',
+              public: false,
+            },
+          }}
         >
-          {({ register, formState }) => (
+          {({ register, formState, setValue, watch }) => (
             <>
               <Input
                 label="Title"
@@ -64,6 +78,17 @@ export const CreateDiscussion = () => {
                 error={formState.errors['body']}
                 registration={register('body')}
               />
+
+              <div className="flex items-center space-x-2">
+                <Switch
+                  name="public"
+                  onCheckedChange={(value) => setValue('public', value)}
+                  checked={watch('public')}
+                  className={` relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2`}
+                  id="public"
+                />
+                <Label htmlFor="airplane-mode">Public</Label>
+              </div>
             </>
           )}
         </Form>