AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Refactor comment cards out of comment section

Browse Source
This commit is contained in:
Aaron William Po
2023-04-02 22:10:04 -04:00
parent f8ecaa51b5
commit 801a3c8ad3
4 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/BeerById/BeerPostCommentsSection.tsx
View File

@@ -9,49 +9,25 @@ import useBeerPostComments from '@/hooks/useBeerPostComments';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import BeerCommentForm from './BeerCommentForm'; import BeerCommentForm from './BeerCommentForm';
import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar'; import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
import CommentCard from './CommentCard'; import CommentCardBody from './CommentCardBody';
import NoCommentsCard from './NoCommentsCard';
import CommentLoadingCardBody from './CommentLoadingCardBody';
interface BeerPostCommentsSectionProps { interface BeerPostCommentsSectionProps {
beerPost: z.infer<typeof beerPostQueryResult>; beerPost: z.infer<typeof beerPostQueryResult>;
} }
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>
);
};
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 BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost }) => {
const { user } = useContext(UserContext); const { user } = useContext(UserContext);
const router = useRouter(); const router = useRouter();
const commentsPageNum = parseInt(router.query.comments_page as string, 10) || 1; const { id } = beerPost;
const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
const pageSize = 5;
const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({ const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({
id: beerPost.id, id,
pageNum: commentsPageNum, pageNum,
pageSize: 5, pageSize,
}); });
return ( return (
<div className="w-full space-y-3 md:w-[60%]"> <div className="w-full space-y-3 md:w-[60%]">
@@ -70,11 +46,11 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
{comments && !!commentsPageCount && !isLoading && ( {comments && !!commentsPageCount && !isLoading && (
<div className="card bg-base-300 pb-6"> <div className="card bg-base-300 pb-6">
{comments.map((comment) => ( {comments.map((comment) => (
<CommentCard key={comment.id} comment={comment} mutate={mutate} /> <CommentCardBody key={comment.id} comment={comment} mutate={mutate} />
))} ))}
<BeerCommentsPaginationBar <BeerCommentsPaginationBar
commentsPageNum={commentsPageNum} commentsPageNum={pageNum}
commentsPageCount={commentsPageCount} commentsPageCount={commentsPageCount}
beerPost={beerPost} beerPost={beerPost}
/> />
@@ -86,7 +62,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
{isLoading && ( {isLoading && (
<div className="card bg-base-300"> <div className="card bg-base-300">
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<CommentLoadingCard key={i} /> <CommentLoadingCardBody key={i} />
))} ))}
</div> </div>
)} )}

4
components/BeerById/CommentCard.tsx → components/BeerById/CommentCardBody.tsx
View File

@@ -55,7 +55,7 @@ const CommentCardDropdown: React.FC<{
); );
}; };
const CommentCard: React.FC<{ const CommentCardBody: React.FC<{
comment: z.infer<typeof BeerCommentQueryResult>; comment: z.infer<typeof BeerCommentQueryResult>;
mutate: KeyedMutator<{ mutate: KeyedMutator<{
@@ -112,4 +112,4 @@ const CommentCard: React.FC<{
); );
}; };
export default CommentCard; export default CommentCardBody;

17
components/BeerById/CommentLoadingCardBody.tsx Normal file
View File

@@ -0,0 +1,17 @@
const CommentLoadingCardBody = () => {
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-base-200" />
<div className="space-y-2">
<div className="h-4 rounded bg-base-200" />
<div className="h-4 w-5/6 rounded bg-base-200" />
</div>
</div>
</div>
</div>
);
};
export default CommentLoadingCardBody;

13
components/BeerById/NoCommentsCard.tsx Normal file
View File

@@ -0,0 +1,13 @@
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>
);
};
export default NoCommentsCard;