🐛 Refresh on Comment Reply

The List now mutates dynamically based on the response from \comment api after the user submits a reply
sanmoh-hombal · Aug 20, 2022 · 069d88a · 069d88a
1 parent 9a2954f
commit 069d88a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/client/components/organisms/comment-replies/comment-replies.component.tsx b/client/components/organisms/comment-replies/comment-replies.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { AthButton } from "@client/components/atoms";
 import { AthComment } from "@client/components/organisms";
@@ -14,6 +14,7 @@ export interface IAthCommentRepliesProps extends React.HTMLAttributes<HTMLDivEle
 const AthCommentReplies: React.FC<IAthCommentRepliesProps> = ({ comment }: IAthCommentRepliesProps): JSX.Element => {
 	const [loading, setLoading] = useState<boolean>(false);
 	const [page, setPage] = useState<number>(2);
+	const [total, setTotal] = useState<number>(comment._count?.children!);
 	const [replies, setReplies] = useState<Array<ICommentUserUpvote>>(comment.children || []);
 
 	const _fetchReplies = async () => {
@@ -28,15 +29,21 @@ const AthCommentReplies: React.FC<IAthCommentRepliesProps> = ({ comment }: IAthC
 		setLoading(false);
 	};
 
+	/* Bad hack to make rerenders work on nested object mutability. Fix Later on */
+	useEffect(() => {
+		setTotal(comment._count?.children!);
+		setReplies(comment.children || []);
+	}, [comment]);
+
 	return (
 		<>
 			{replies.map((reply: ICommentUserUpvote) => (
 				<AthComment comment={reply} key={reply.id} />
 			))}
-			{comment._count && comment._count.children > 2 && comment._count.children !== replies.length && (
+			{total > 2 && total !== replies.length && (
 				<AthButton loading={loading} secondary small className="mt-5" onClick={_fetchReplies}>
-					Show {comment._count.children - replies.length} More Repl
-					{comment._count.children - replies.length > 1 ? "ies" : "y"}
+					Show {total - replies.length} More Repl
+					{total - replies.length > 1 ? "ies" : "y"}
 				</AthButton>
 			)}
 		</>

diff --git a/client/components/organisms/comment/comment.component.tsx b/client/components/organisms/comment/comment.component.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { AthReplyComment, AthUpvoteComment } from "@client/components/molecules";
 import { DateUtil } from "@client/utils";
@@ -11,11 +11,13 @@ export interface IAthCommentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const AthComment: React.FC<IAthCommentProps> = ({ comment, ...rest }: IAthCommentProps): JSX.Element => {
+	const [derivedComment, setderivedComment] = useState<ICommentUserUpvote>(comment);
+
 	return (
-		<div className={`flex ${comment.parentId ? "pt-5" : "pb-10"} last:pb-0`} {...rest}>
+		<div className={`flex ${derivedComment.parentId ? "pt-5" : "pb-10"} last:pb-0`} {...rest}>
 			<div className="flex flex-col shrink-0 mr-4">
-				<img src={comment.user!.picture} />
-				{comment.children && comment.children.length > 0 ? (
+				<img src={derivedComment.user!.picture} />
+				{derivedComment.children && derivedComment.children.length > 0 ? (
 					<div className="flex flex-1 divide-x">
 						<div className="w-1/2" />
 						<div className="w-1/2" />
@@ -27,24 +29,24 @@ const AthComment: React.FC<IAthCommentProps> = ({ comment, ...rest }: IAthCommen
 			<div className="grow">
 				<div className="flex items-center">
 					<div className="font-bold">
-						{comment.user!.firstName} {comment.user!.lastName}
+						{derivedComment.user!.firstName} {derivedComment.user!.lastName}
 					</div>
 					<div className="mx-2">&#8226;</div>
-					<div className="text-secondary-500 text-sm">{DateUtil.humanize(String(comment.created))}</div>
+					<div className="text-secondary-500 text-sm">{DateUtil.humanize(String(derivedComment.created))}</div>
 				</div>
-				<div className="font-light mb-4">{comment.content}</div>
+				<div className="font-light mb-4">{derivedComment.content}</div>
 				<div>
 					<AthUpvoteComment
-						commentId={comment.id}
-						ownerId={comment.user!.id}
-						upvotes={comment.upvotes || []}
+						commentId={derivedComment.id}
+						ownerId={derivedComment.user!.id}
+						upvotes={derivedComment.upvotes || []}
 						className="mr-4"
 					/>
-					{!comment.parentId && (
-						<AthReplyComment onComplete={() => console.log("complete")} parentId={comment.id} className="ml-4" />
+					{!derivedComment.parentId && (
+						<AthReplyComment onComplete={setderivedComment} parentId={derivedComment.id} className="ml-4" />
 					)}
 				</div>
-				{(comment.children || []).length > 0 && <AthCommentReplies comment={comment} />}
+				{(derivedComment.children || []).length > 0 && <AthCommentReplies comment={derivedComment} />}
 			</div>
 		</div>
 	);

diff --git a/server/services/comment.service.ts b/server/services/comment.service.ts
@@ -72,7 +72,12 @@ export async function add(content: string, userId?: string, parentId?: string):
 					include: {
 						user: true,
 						upvotes: true,
-						children: { include: { user: true, upvotes: true }, orderBy: { created: "desc" } },
+						_count: true,
+						children: {
+							orderBy: { created: "desc" },
+							include: { user: true, upvotes: true },
+							take: Constants.REPLIES_PAGE_SIZE,
+						},
 					},
 				},
 			},