From de3964dbfa73893bba742091d56ffc5180c7dd23 Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Sun, 2 Apr 2023 21:50:42 -0400 Subject: [PATCH] Rewrote beer by id page comments to load on client --- .gitignore | 5 +- components/BeerById/BeerCommentForm.tsx | 16 +++-- .../BeerById/BeerPostCommentsSection.tsx | 68 ++++++++++++++----- components/BeerById/CommentCard.tsx | 27 +++++--- hooks/useBeerPostComments.ts | 45 ++++++++++++ hooks/useUser.ts | 2 +- pages/beers/[id]/index.tsx | 26 +------ pages/beers/index.tsx | 2 +- 8 files changed, 132 insertions(+), 59 deletions(-) create mode 100644 hooks/useBeerPostComments.ts diff --git a/.gitignore b/.gitignore index 49df5aa..f95f7f7 100644 --- a/.gitignore +++ b/.gitignore @@ -40,4 +40,7 @@ next-env.d.ts *.http # uploaded images -public/uploads \ No newline at end of file +public/uploads + +# vscode +.vscode diff --git a/components/BeerById/BeerCommentForm.tsx b/components/BeerById/BeerCommentForm.tsx index 561b672..443825d 100644 --- a/components/BeerById/BeerCommentForm.tsx +++ b/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; + mutate: KeyedMutator<{ + comments: z.infer[]; + pageCount: number; + }>; } -const BeerCommentForm: FunctionComponent = ({ beerPost }) => { +const BeerCommentForm: FunctionComponent = ({ + beerPost, + mutate, +}) => { const { register, handleSubmit, formState, reset, setValue } = useForm< z.infer >({ @@ -35,7 +44,6 @@ const BeerCommentForm: FunctionComponent = ({ beerPost }) reset({ rating: 0, content: '' }); }, [reset]); - const router = useRouter(); const onSubmit: SubmitHandler> = async ( data, ) => { @@ -47,7 +55,7 @@ const BeerCommentForm: FunctionComponent = ({ beerPost }) beerPostId: beerPost.id, }); reset(); - router.replace(`/beers/${beerPost.id}?comments_page=1`, undefined, { scroll: false }); + await mutate(); }; const { errors } = formState; diff --git a/components/BeerById/BeerPostCommentsSection.tsx b/components/BeerById/BeerPostCommentsSection.tsx index f4b0670..7ece7ae 100644 --- a/components/BeerById/BeerPostCommentsSection.tsx +++ b/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; - comments: z.infer[]; - commentsPageCount: number; } -const BeerPostCommentsSection: FC = ({ - beerPost, +const CommentLoadingCard = () => { + return ( +
+
+
+
+
+
+
+
+
+
+
+ ); +}; - comments, - commentsPageCount, -}) => { +const NoCommentsCard = () => { + return ( +
+
+
+ No comments yet. +
+
+
+ ); +}; + +const BeerPostCommentsSection: FC = ({ 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 (
{user ? ( - + ) : (
Log in to leave a comment. @@ -39,10 +66,11 @@ const BeerPostCommentsSection: FC = ({ )}
- {comments.length ? ( + + {comments && !!commentsPageCount && !isLoading && (
{comments.map((comment) => ( - + ))} = ({ beerPost={beerPost} />
- ) : ( -
-
- No comments yet. -
+ )} + + {!comments?.length && !isLoading && } + + {isLoading && ( +
+ {Array.from({ length: 5 }).map((_, i) => ( + + ))}
)}
diff --git a/components/BeerById/CommentCard.tsx b/components/BeerById/CommentCard.tsx index 563cf05..23e25fa 100644 --- a/components/BeerById/CommentCard.tsx +++ b/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; - beerPostId: string; -}> = ({ comment, beerPostId }) => { - const router = useRouter(); + mutate: KeyedMutator<{ + comments: z.infer[]; + 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 (
-