Rewrote beer by id page comments to load on client

.gitignore

@@ -40,4 +40,7 @@ next-env.d.ts
 *.http
 
 # uploaded images
-public/uploads
+public/uploads
+
+# vscode
+.vscode

components/BeerById/BeerCommentForm.tsx

@@ -2,12 +2,14 @@ import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentReques
 import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useRouter } from 'next/router';
+
 import { FunctionComponent, useState, useEffect } from 'react';
 import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 
+import { KeyedMutator } from 'swr';
+import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import Button from '../ui/forms/Button';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
@@ -17,9 +19,16 @@ import FormTextArea from '../ui/forms/FormTextArea';
 
 interface BeerCommentFormProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
+  mutate: KeyedMutator<{
+    comments: z.infer<typeof BeerCommentQueryResult>[];
+    pageCount: number;
+  }>;
 }
 
-const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost }) => {
+const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
+  beerPost,
+  mutate,
+}) => {
   const { register, handleSubmit, formState, reset, setValue } = useForm<
     z.infer<typeof BeerCommentValidationSchema>
   >({
@@ -35,7 +44,6 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost })
     reset({ rating: 0, content: '' });
   }, [reset]);
 
-  const router = useRouter();
   const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
     data,
   ) => {
@@ -47,7 +55,7 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost })
       beerPostId: beerPost.id,
     });
     reset();
-    router.replace(`/beers/${beerPost.id}?comments_page=1`, undefined, { scroll: false });
+    await mutate();
   };
 
   const { errors } = formState;

components/BeerById/BeerPostCommentsSection.tsx

@@ -1,37 +1,64 @@
+/* eslint-disable no-nested-ternary */
 import UserContext from '@/contexts/userContext';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
-import { useRouter } from 'next/router';
+
 import { FC, useContext } from 'react';
 import { z } from 'zod';
+import useBeerPostComments from '@/hooks/useBeerPostComments';
+import { useRouter } from 'next/router';
 import BeerCommentForm from './BeerCommentForm';
 import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
 import CommentCard from './CommentCard';
 
 interface BeerPostCommentsSectionProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
-  comments: z.infer<typeof BeerCommentQueryResult>[];
-  commentsPageCount: number;
 }
 
-const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({
-  beerPost,
+const CommentLoadingCard = () => {
+  return (
+    <div className="card-body h-64">
+      <div className="flex animate-pulse space-x-4">
+        <div className="flex-1 space-y-4 py-1">
+          <div className="h-4 w-3/4 rounded bg-gray-400" />
+          <div className="space-y-2">
+            <div className="h-4 rounded bg-gray-400" />
+            <div className="h-4 w-5/6 rounded bg-gray-400" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-  comments,
-  commentsPageCount,
-}) => {
+const NoCommentsCard = () => {
+  return (
+    <div className="card bg-base-300">
+      <div className="card-body h-64">
+        <div className="flex h-full flex-col items-center justify-center">
+          <span className="text-lg font-bold">No comments yet.</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost }) => {
   const { user } = useContext(UserContext);
   const router = useRouter();
-
   const commentsPageNum = parseInt(router.query.comments_page as string, 10) || 1;
 
+  const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({
+    id: beerPost.id,
+    pageNum: commentsPageNum,
+    pageSize: 5,
+  });
   return (
     <div className="w-full space-y-3 md:w-[60%]">
       <div className="card h-96 bg-base-300">
         <div className="card-body h-full">
           {user ? (
-            <BeerCommentForm beerPost={beerPost} />
+            <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (
             <div className="flex h-full flex-col items-center justify-center">
               <span className="text-lg font-bold">Log in to leave a comment.</span>
@@ -39,10 +66,11 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({
           )}
         </div>
       </div>
-      {comments.length ? (
+
+      {comments && !!commentsPageCount && !isLoading && (
         <div className="card bg-base-300 pb-6">
           {comments.map((comment) => (
-            <CommentCard key={comment.id} comment={comment} beerPostId={beerPost.id} />
+            <CommentCard key={comment.id} comment={comment} mutate={mutate} />
           ))}
 
           <BeerCommentsPaginationBar
@@ -51,11 +79,15 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({
             beerPost={beerPost}
           />
         </div>
-      ) : (
-        <div className="card items-center bg-base-300">
-          <div className="card-body">
-            <span className="text-lg font-bold">No comments yet.</span>
-          </div>
+      )}
+
+      {!comments?.length && !isLoading && <NoCommentsCard />}
+
+      {isLoading && (
+        <div className="card bg-base-300">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <CommentLoadingCard key={i} />
+          ))}
         </div>
       )}
     </div>

components/BeerById/CommentCard.tsx

@@ -2,18 +2,20 @@ import UserContext from '@/contexts/userContext';
 import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import { format, formatDistanceStrict } from 'date-fns';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { useContext, useEffect, useState } from 'react';
 import { Rating } from 'react-daisyui';
 
 import { FaEllipsisH } from 'react-icons/fa';
+import { KeyedMutator } from 'swr';
 import { z } from 'zod';
 
 const CommentCardDropdown: React.FC<{
   comment: z.infer<typeof BeerCommentQueryResult>;
-  beerPostId: string;
-}> = ({ comment, beerPostId }) => {
-  const router = useRouter();
+  mutate: KeyedMutator<{
+    comments: z.infer<typeof BeerCommentQueryResult>[];
+    pageCount: number;
+  }>;
+}> = ({ comment, mutate }) => {
   const { user } = useContext(UserContext);
 
   const isCommentOwner = user?.id === comment.postedBy.id;
@@ -22,16 +24,17 @@ const CommentCardDropdown: React.FC<{
     const response = await fetch(`/api/beer-comments/${comment.id}`, {
       method: 'DELETE',
     });
+
     if (!response.ok) {
       throw new Error('Failed to delete comment');
     }
 
-    router.replace(`/beers/${beerPostId}?comments_page=1`, undefined, { scroll: false });
+    await mutate();
   };
 
   return (
     <div className="dropdown">
-      <label tabIndex={0} className="btn btn-ghost btn-sm m-1">
+      <label tabIndex={0} className="btn-ghost btn-sm btn m-1">
         <FaEllipsisH />
       </label>
       <ul
@@ -54,8 +57,12 @@ const CommentCardDropdown: React.FC<{
 
 const CommentCard: React.FC<{
   comment: z.infer<typeof BeerCommentQueryResult>;
-  beerPostId: string;
-}> = ({ comment, beerPostId }) => {
+
+  mutate: KeyedMutator<{
+    comments: z.infer<typeof BeerCommentQueryResult>[];
+    pageCount: number;
+  }>;
+}> = ({ comment, mutate }) => {
   const [timeDistance, setTimeDistance] = useState('');
   const { user } = useContext(UserContext);
 
@@ -64,7 +71,7 @@ const CommentCard: React.FC<{
   }, [comment.createdAt]);
 
   return (
-    <div className="card-body">
+    <div className="card-body h-64">
       <div className="flex flex-col justify-between sm:flex-row">
         <div>
           <h3 className="font-semibold sm:text-2xl">
@@ -84,7 +91,7 @@ const CommentCard: React.FC<{
           </h4>
         </div>
 
-        {user && <CommentCardDropdown comment={comment} beerPostId={beerPostId} />}
+        {user && <CommentCardDropdown comment={comment} mutate={mutate} />}
       </div>
 
       <div className="space-y-1">

hooks/useBeerPostComments.ts

@@ -0,0 +1,45 @@
+import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+import useSWR from 'swr';
+
+interface UseBeerPostCommentsProps {
+  pageNum: number;
+  id: string;
+  pageSize: number;
+}
+
+const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps) => {
+  const { data, error, isLoading, mutate } = useSWR(
+    `/api/beers/${id}/comments?page_num=${pageNum}&page_size=${pageSize}`,
+    async (url) => {
+      const response = await fetch(url);
+      const json = await response.json();
+      const count = response.headers.get('X-Total-Count');
+      const parsed = APIResponseValidationSchema.safeParse(json);
+
+      if (!parsed.success) {
+        throw new Error(parsed.error.message);
+      }
+      const parsedPayload = z
+        .array(BeerCommentQueryResult)
+        .safeParse(parsed.data.payload);
+
+      if (!parsedPayload.success) {
+        throw new Error(parsedPayload.error.message);
+      }
+
+      const pageCount = Math.ceil(parseInt(count as string, 10) / 10);
+      return { comments: parsedPayload.data, pageCount };
+    },
+  );
+  return {
+    comments: data?.comments,
+    commentsPageCount: data?.pageCount,
+    isLoading,
+    error: error as undefined,
+    mutate,
+  };
+};
+
+export default useBeerPostComments;

hooks/useUser.ts

@@ -26,7 +26,7 @@ const useUser = () => {
     }
 
     const parsedPayload = GetUserSchema.safeParse(parsed.data.payload);
-    console.log(parsedPayload);
+
     if (!parsedPayload.success) {
       throw new Error(parsedPayload.error.message);
     }

pages/beers/[id]/index.tsx

@@ -7,16 +7,14 @@ import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSecti
 import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
 import Layout from '@/components/ui/Layout';
 
-import getAllBeerComments from '@/services/BeerComment/getAllBeerComments';
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
 import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { BeerPost } from '@prisma/client';
 import getBeerPostLikeCount from '@/services/BeerPostLike/getBeerPostLikeCount';
-import getBeerCommentCount from '@/services/BeerComment/getBeerCommentCount';
+
 import { z } from 'zod';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 
 interface BeerPageProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
@@ -24,16 +22,12 @@ interface BeerPageProps {
     brewery: { id: string; name: string };
     beerImages: { id: string; alt: string; url: string }[];
   })[];
-  beerComments: z.infer<typeof BeerCommentQueryResult>[];
-  commentsPageCount: number;
   likeCount: number;
 }
 
 const BeerByIdPage: NextPage<BeerPageProps> = ({
   beerPost,
   beerRecommendations,
-  beerComments,
-  commentsPageCount,
   likeCount,
 }) => {
   return (
@@ -57,11 +51,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
           <div className="w-11/12 space-y-3 xl:w-9/12">
             <BeerInfoHeader beerPost={beerPost} initialLikeCount={likeCount} />
             <div className="mt-4 flex flex-col space-y-3 md:flex-row md:space-y-0 md:space-x-3">
-              <BeerPostCommentsSection
-                beerPost={beerPost}
-                comments={beerComments}
-                commentsPageCount={commentsPageCount}
-              />
+              <BeerPostCommentsSection beerPost={beerPost} />
               <div className="md:w-[40%]">
                 <BeerRecommendations beerRecommendations={beerRecommendations} />
               </div>
@@ -75,7 +65,6 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
 
 export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
   const beerPost = await getBeerPostById(context.params!.id! as string);
-  const beerCommentPageNum = parseInt(context.query.comments_page as string, 10) || 1;
 
   if (!beerPost) {
     return { notFound: true };
@@ -84,22 +73,11 @@ export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (cont
   const { type, brewery, id } = beerPost;
   const beerRecommendations = await getBeerRecommendations({ type, brewery, id });
 
-  const pageSize = 5;
-  const beerComments = await getAllBeerComments(
-    { id: beerPost.id },
-    { pageSize, pageNum: beerCommentPageNum },
-  );
-
-  const commentCount = await getBeerCommentCount(beerPost.id);
-
-  const commentPageCount = commentCount ? Math.ceil(commentCount / pageSize) : 0;
   const likeCount = await getBeerPostLikeCount(beerPost.id);
 
   const props = {
     beerPost: JSON.parse(JSON.stringify(beerPost)),
     beerRecommendations: JSON.parse(JSON.stringify(beerRecommendations)),
-    beerComments: JSON.parse(JSON.stringify(beerComments)),
-    commentsPageCount: JSON.parse(JSON.stringify(commentPageCount)),
     likeCount: JSON.parse(JSON.stringify(likeCount)),
   };
 

pages/beers/index.tsx

@@ -27,7 +27,7 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
         <meta name="description" content="Beer posts" />
       </Head>
       <div className="flex items-center justify-center bg-base-100">
-        <div className="my-10 flex  w-10/12 flex-col space-y-4">
+        <div className="my-10 flex w-10/12 flex-col space-y-4">
           <header className="my-10">
             <div className="space-y-2">
               <h1 className="text-6xl font-bold">The Biergarten Index</h1>