Skip to content

Commit 76405e9

Browse files
grv-saini-20grv-saini-20
committed
fix: comment fragment
1 parent d588665 commit 76405e9

File tree

5 files changed

+112
-102
lines changed

5 files changed

+112
-102
lines changed

‎platforms/metagram/src/lib/dummyData.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { CommentType } from "./types";
2+
13
export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
24
id: i + 1,
35
avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -11,3 +13,50 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
1113
comments: Math.floor(Math.random() * 200)
1214
}
1315
}));
16+
17+
export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
18+
userImgSrc: 'https://picsum.photos/800',
19+
name: `user${i + 1}`,
20+
commentId: `${i + 1}`,
21+
comment: `this is the dummy comment which is commented by user${i + 1}`,
22+
isLiked: false,
23+
isDisliked: false,
24+
likeCount: 0,
25+
time: '2 minutes ago',
26+
replies: [
27+
{
28+
userImgSrc: 'https://picsum.photos/800',
29+
name: `user${i + 1}x`,
30+
commentId: `${i + 1}x`,
31+
comment: `this is the dummy reply which is replied by another${i}x`,
32+
isLiked: false,
33+
isDisliked: false,
34+
likeCount: 0,
35+
time: '1 minute ago',
36+
replies: [
37+
{
38+
userImgSrc: 'https://picsum.photos/800',
39+
name: `user${i + 1}a`,
40+
commentId: `${i + 1}a`,
41+
comment: `this is the dummy reply which is replied by another${i}a`,
42+
isLiked: false,
43+
isDisliked: false,
44+
likeCount: 0,
45+
time: '1 minute ago',
46+
replies: []
47+
}
48+
]
49+
},
50+
{
51+
userImgSrc: 'https://picsum.photos/800',
52+
name: `user${i + 1}y`,
53+
commentId: `${i + 1}y`,
54+
comment: `this is the dummy reply which is replied by another${i}y`,
55+
isLiked: false,
56+
isDisliked: false,
57+
likeCount: 0,
58+
time: '1 minute ago',
59+
replies: []
60+
}
61+
]
62+
}));

‎platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ComponentProps } from 'svelte';
22
import { Comment } from '..';
3+
import { comments } from '$lib/dummyData';
34

45
export default {
56
title: 'UI/Comment',
@@ -13,13 +14,6 @@ export default {
1314

1415
export const Main = {
1516
args: {
16-
name: 'LuffyTHeTHird',
17-
comment:
18-
'i was thinking of making it to the conference so we could take some more fire pictures like last time',
19-
likeCount: 0,
20-
handleReply: () => alert('reply'),
21-
time: '3 minutes ago',
22-
isLiked: false,
23-
isDisliked: false
17+
comment: comments[0]
2418
}
2519
};

‎platforms/metagram/src/lib/fragments/Comment/Comment.svelte‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,75 +3,84 @@
33
import { Avatar } from '$lib/ui';
44
import { cn } from '$lib/utils';
55
import type { HTMLAttributes } from 'svelte/elements';
6+
import CommentComponent from './Comment.svelte';
7+
import type { CommentType } from '$lib/types';
68
79
interface ICommentProps extends HTMLAttributes<HTMLElement> {
8-
isLiked: boolean;
9-
isDisliked: boolean;
10-
imgSrc: string;
11-
name: string;
12-
comment: string;
13-
time: string;
14-
likeCount: number;
10+
comment: CommentType;
1511
handleReply: () => void;
1612
}
1713
18-
let {
19-
isLiked = false,
20-
isDisliked = false,
21-
imgSrc = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
22-
name,
23-
comment,
24-
time,
25-
likeCount = 0,
26-
handleReply,
27-
...restProps
28-
}: ICommentProps = $props();
14+
let visibleReplies = 2;
15+
16+
const showMoreReplies = () => {
17+
visibleReplies = comment.replies.length;
18+
};
19+
20+
let { comment, handleReply, ...restProps }: ICommentProps = $props();
2921
</script>
3022

3123
<article {...restProps} class={cn([restProps.class].join(' '))}>
3224
<div class="align-start flex gap-2">
33-
<Avatar src={imgSrc} size="sm" />
25+
<Avatar src={comment.userImgSrc} size="sm" />
3426
<div>
35-
<h3 class="font-semibold text-black">{name}</h3>
36-
<p class="text-black-600 mt-0.5">{comment}</p>
27+
<h3 class="font-semibold text-black">{comment.name}</h3>
28+
<p class="text-black-600 mt-0.5">{comment.comment}</p>
3729
</div>
3830
</div>
3931
<div class="ms-12 mt-2 flex items-center gap-2">
4032
<button
4133
onclick={() => {
42-
if (!isLiked) {
43-
likeCount++;
44-
isLiked = true;
45-
isDisliked = false;
34+
if (!comment.isLiked) {
35+
comment.likeCount++;
36+
comment.isLiked = true;
37+
comment.isDisliked = false;
4638
}
4739
}}
4840
>
4941
<Like
5042
size="18px"
51-
color={isLiked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
52-
fill={isLiked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
43+
color={comment.isLiked
44+
? 'var(--color-brand-burnt-orange)'
45+
: 'var(--color-black-600)'}
46+
fill={comment.isLiked
47+
? 'var(--color-brand-burnt-orange)'
48+
: 'var(--color-black-600)'}
5349
/>
5450
</button>
55-
<p class="text-black-600 font-semibold">{likeCount}</p>
51+
<p class="text-black-600 font-semibold">{comment.likeCount}</p>
5652
<button
5753
onclick={() => {
58-
if (!isDisliked) {
59-
likeCount--;
60-
isDisliked = true;
61-
isLiked = false;
54+
if (!comment.isDisliked) {
55+
comment.likeCount--;
56+
comment.isDisliked = true;
57+
comment.isLiked = false;
6258
}
6359
}}
6460
>
6561
<Like
6662
size="18px"
67-
color={isDisliked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
68-
fill={isDisliked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
63+
color={comment.isDisliked
64+
? 'var(--color-brand-burnt-orange)'
65+
: 'var(--color-black-600)'}
66+
fill={comment.isDisliked
67+
? 'var(--color-brand-burnt-orange)'
68+
: 'var(--color-black-600)'}
6969
class="rotate-180"
7070
/>
7171
</button>
7272
<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
7373
<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
7474
<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
75-
<p class="text-black-600">{time}</p>
75+
<p class="text-black-600">{comment.time}</p>
7676
</div>
77+
{#if comment?.replies?.length}
78+
<ul class="ms-12 mt-4 space-y-2">
79+
{#each comment.replies as reply}
80+
<li>
81+
<CommentComponent comment={reply} {handleReply} />
82+
</li>
83+
{/each}
84+
</ul>
85+
{/if}
7786
</article>

‎platforms/metagram/src/lib/types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,15 @@ export interface ISvgProps extends SVGAttributes<SVGElement> {
44
size?: number | string;
55
color?: string;
66
}
7+
8+
export type CommentType = {
9+
commentId: string;
10+
name: string;
11+
userImgSrc: string;
12+
comment: string;
13+
isLiked: boolean;
14+
isDisliked: boolean;
15+
likeCount: number;
16+
time: string;
17+
replies: CommentType[];
18+
};

‎platforms/metagram/src/routes/(protected)/home/+page.svelte‎

Lines changed: 5 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
22
import { Drawer, Post } from '$lib/fragments';
3-
import { dummyPosts } from '$lib/dummyData';
3+
import { comments, dummyPosts } from '$lib/dummyData';
44
import { onMount } from 'svelte';
55
import type { CupertinoPane } from 'cupertino-pane';
66
import { Comment, MessageInput } from '$lib/fragments';
7-
7+
88
type PostData = {
99
id: number;
1010
avatar: string;
@@ -29,33 +29,6 @@
2929
let commentValue: string = $state('');
3030
let commentInput: HTMLInputElement | undefined = $state();
3131
32-
const comments = Array.from({length: 50}, (_, i) => ({
33-
userImgSrc: "https://picsum.photos/800",
34-
name: "user" + (i + 1),
35-
commentId: i + 1,
36-
comment: "this is the dummy comment which is commented by user" + (i + 1),
37-
replies: [
38-
{
39-
userImgSrc: "https://picsum.photos/800",
40-
name: "user" + (i + 1) + "x",
41-
commentId: (i + 1) + "x",
42-
comment: "this is the dummy reply which is replied by another" + i + "x",
43-
},
44-
{
45-
userImgSrc: "https://picsum.photos/800",
46-
name: "user" + (i + 1) + "y",
47-
commentId: i + 1 + "y",
48-
comment: "this is the dummy reply which is replied by another" + i + "y",
49-
}
50-
,{
51-
userImgSrc: "https://picsum.photos/800",
52-
name: "user" + (i + 1) + "z",
53-
commentId: i + 1 + "z",
54-
comment: "this is the dummy reply which is replied by another" + i + "z",
55-
}
56-
]
57-
}))
58-
5932
const loadMore = () => {
6033
if (loading || currentIndex >= dummyPosts.length) return;
6134
loading = true;
@@ -114,36 +87,9 @@
11487
<ul class="pb-4">
11588
<h3 class="text-black-600 mb-6 text-center">32 Comments</h3>
11689
{#each comments as comment}
117-
<li class="mb-4">
118-
<Comment
119-
isLiked={false}
120-
isDisliked={false}
121-
likeCount={0}
122-
name={comment.name}
123-
comment={comment.comment}
124-
imgSrc={comment.userImgSrc}
125-
handleReply={() => commentInput?.focus()}
126-
time={'2 minutes ago'}
127-
/>
128-
{#if comment.replies}
129-
<ul class="ms-12 mt-4">
130-
{#each comment.replies as reply}
131-
<li class="mb-4">
132-
<Comment
133-
isLiked={false}
134-
isDisliked={false}
135-
likeCount={0}
136-
name={reply.name}
137-
comment={reply.comment}
138-
imgSrc={reply.userImgSrc}
139-
handleReply={() => commentInput?.focus()}
140-
time={'2 minutes ago'}
141-
/>
142-
</li>
143-
{/each}
144-
</ul>
145-
{/if}
146-
</li>
90+
<li class="mb-4">
91+
<Comment {comment} handleReply={() => commentInput?.focus()} />
92+
</li>
14793
{/each}
14894
<MessageInput
14995
class="mt-4"

0 commit comments

Comments
 (0)