feat: Comments reply

grv-saini-20 · grv-saini-20 · commit e532187ba38e · 2025-05-28T11:45:35.000+05:30
diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
@@ -1,4 +1,4 @@
-import type { CommentType } from "./types";
+import type { CommentType } from './types';
 
 export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	id: i + 1,
@@ -17,31 +17,31 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 	userImgSrc: 'https://picsum.photos/800',
 	name: `user${i + 1}`,
-	commentId: `${i + 1}`,
+	commentId: `${i + 1}p`,
 	comment: `this is the dummy comment which is commented by user${i + 1}`,
-	isLiked: false,
-	isDisliked: false,
-	likeCount: 0,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 0,
 	time: '2 minutes ago',
 	replies: [
 		{
 			userImgSrc: 'https://picsum.photos/800',
 			name: `user${i + 1}x`,
 			commentId: `${i + 1}x`,
 			comment: `this is the dummy reply which is replied by another${i}x`,
-			isLiked: false,
-			isDisliked: false,
-			likeCount: 0,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
 			time: '1 minute ago',
 			replies: [
 				{
 					userImgSrc: 'https://picsum.photos/800',
 					name: `user${i + 1}a`,
 					commentId: `${i + 1}a`,
 					comment: `this is the dummy reply which is replied by another${i}a`,
-					isLiked: false,
-					isDisliked: false,
-					likeCount: 0,
+					isUpVoted: false,
+					isDownVoted: false,
+					upVotes: 0,
 					time: '1 minute ago',
 					replies: []
 				}
@@ -52,9 +52,31 @@ export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 			name: `user${i + 1}y`,
 			commentId: `${i + 1}y`,
 			comment: `this is the dummy reply which is replied by another${i}y`,
-			isLiked: false,
-			isDisliked: false,
-			likeCount: 0,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
 			time: '1 minute ago',
 			replies: []
 		}
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -8,14 +8,14 @@
 
 	interface ICommentProps extends HTMLAttributes<HTMLElement> {
 		comment: CommentType;
-		handleReply: () => void;
+		handleReply: (id: string) => void;
 	}
 
-    let visibleReplies = 2;
+	let visibleReplies = $state(2);
 
-    const showMoreReplies = () => {
-        visibleReplies = comment.replies.length;
-    };
+	const showMoreReplies = () => {
+		visibleReplies = comment.replies.length;
+	};
 
 	let { comment, handleReply, ...restProps }: ICommentProps = $props();
 </script>
@@ -31,56 +31,66 @@
 	<div class="ms-12 mt-2 flex items-center gap-2">
 		<button
 			onclick={() => {
-				if (!comment.isLiked) {
-					comment.likeCount++;
-					comment.isLiked = true;
-					comment.isDisliked = false;
+				if (!comment.isUpVoted) {
+					comment.upVotes++;
+					comment.isUpVoted = true;
+					comment.isDownVoted = false;
 				}
 			}}
 		>
 			<Like
 				size="18px"
-				color={comment.isLiked
+				color={comment.isUpVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
-				fill={comment.isLiked
+				fill={comment.isUpVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
 			/>
 		</button>
-		<p class="text-black-600 font-semibold">{comment.likeCount}</p>
+		<p class="text-black-600 font-semibold">{comment.upVotes}</p>
 		<button
 			onclick={() => {
-				if (!comment.isDisliked) {
-					comment.likeCount--;
-					comment.isDisliked = true;
-					comment.isLiked = false;
+				if (!comment.isDownVoted) {
+					comment.upVotes--;
+					comment.isDownVoted = true;
+					comment.isUpVoted = false;
 				}
 			}}
 		>
 			<Like
 				size="18px"
-				color={comment.isDisliked
+				color={comment.isDownVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
-				fill={comment.isDisliked
+				fill={comment.isDownVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
 				class="rotate-180"
 			/>
 		</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
-		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
+		<button onclick={() => handleReply(comment.commentId)} class="text-black-600 font-semibold"
+			>Reply</button
+		>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
 		<p class="text-black-600">{comment.time}</p>
 	</div>
 	{#if comment?.replies?.length}
 		<ul class="ms-12 mt-4 space-y-2">
-			{#each comment.replies as reply}
+			{#each comment.replies.slice(0, visibleReplies) as reply}
 				<li>
 					<CommentComponent comment={reply} {handleReply} />
 				</li>
 			{/each}
+			{#if comment.replies.length > visibleReplies}
+				<button
+					onclick={showMoreReplies}
+					class="text-brand-burnt-orange mt-1 text-sm font-medium"
+				>
+					See {comment.replies.length - visibleReplies} more replies
+				</button>
+			{/if}
 		</ul>
 	{/if}
 </article>
diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
@@ -55,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
@@ -10,9 +10,9 @@ export type CommentType = {
 	name: string;
 	userImgSrc: string;
 	comment: string;
-	isLiked: boolean;
-	isDisliked: boolean;
-	likeCount: number;
+	isUpVoted: boolean;
+	isDownVoted: boolean;
+	upVotes: number;
 	time: string;
 	replies: CommentType[];
 };
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -4,7 +4,8 @@
 	import { onMount } from 'svelte';
 	import type { CupertinoPane } from 'cupertino-pane';
 	import { Comment, MessageInput } from '$lib/fragments';
-	
+	import type { CommentType } from '$lib/types';
+
 	type PostData = {
 		id: number;
 		avatar: string;
@@ -28,6 +29,8 @@
 	let drawer: CupertinoPane | undefined = $state();
 	let commentValue: string = $state('');
 	let commentInput: HTMLInputElement | undefined = $state();
+	let _comments = $state(comments);
+	let activeReplyToId: string | null = $state(null);
 
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
@@ -48,6 +51,41 @@
 			loadMore();
 	};
 
+	const handleSend = async () => {
+		const newComment = {
+			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+			name: 'You',
+			commentId: Date.now().toString(),
+			comment: commentValue,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: 'Just now',
+			replies: []
+		};
+
+		if (activeReplyToId) {
+			// Find the parent comment by id and push reply
+			const addReplyToComment = (commentsArray: CommentType[]) => {
+				for (const c of commentsArray) {
+					if (c.commentId === activeReplyToId) {
+						c.replies.push(newComment);
+						return true;
+					} else if (c.replies.length) {
+						if (addReplyToComment(c.replies)) return true;
+					}
+				}
+				return false;
+			};
+			addReplyToComment(_comments);
+		} else {
+			// If no activeReplyToId, add as a new parent comment
+			_comments = [newComment, ..._comments];
+		}
+		commentValue = '';
+		activeReplyToId = null;
+	};
+
 	$effect(() => {
 		listElement.addEventListener('scroll', onScroll);
 		return () => listElement.removeEventListener('scroll', onScroll);
@@ -85,18 +123,25 @@
 
 <Drawer bind:drawer>
 	<ul class="pb-4">
-		<h3 class="text-black-600 mb-6 text-center">32 Comments</h3>
-		{#each comments as comment}
+		<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+		{#each _comments as comment}
 			<li class="mb-4">
-				<Comment {comment} handleReply={() => commentInput?.focus()} />
+				<Comment
+					{comment}
+					handleReply={(id) => {
+						activeReplyToId = id;
+						alert(id);
+						commentInput?.focus();
+					}}
+				/>
 			</li>
 		{/each}
 		<MessageInput
 			class="mt-4"
 			variant="comment"
 			src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
 			bind:value={commentValue}
-			handleSend={async () => alert('sdfs')}
+			{handleSend}
 			bind:input={commentInput}
 		/>
 	</ul>
