Skip to content

Commit d6dc3c7

Browse files
grv-saini-20grv-saini-20
authored
fix:like-not-working (#675)
* fix:like-not-working * fix:code rabbit suggestion * fix: added small button interaction for like button * fix: removed comment icon because there is not handler attched to it and commenting is done with below text input * fix: code rabbit suggestion * fix: code rabbit suggestion * fix: show comments and send comment * fix: added a try catch block for create comments * fix: removed deprecated code
1 parent 8def103 commit d6dc3c7

4 files changed

Lines changed: 101 additions & 28 deletions

File tree

‎platforms/pictique/src/lib/fragments/Post/Post.svelte‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { ArrowLeftIcon, ArrowRightIcon, RecordIcon } from '@hugeicons/core-free-icons';
88
import { HugeiconsIcon } from '@hugeicons/svelte';
99
import type { HTMLAttributes } from 'svelte/elements';
10+
import { Spring } from 'svelte/motion';
1011
1112
interface IPostProps extends HTMLAttributes<HTMLElement> {
1213
avatar: string;
@@ -92,6 +93,20 @@
9293
const img = event.target as HTMLImageElement;
9394
img.src = 'https://picsum.photos/200';
9495
}
96+
97+
const scale = new Spring(1, {
98+
stiffness: 0.15,
99+
damping: 0.25
100+
});
101+
102+
async function handleLikeWithInteraction() {
103+
scale.target = 1.4;
104+
try {
105+
await callback.like();
106+
} finally {
107+
setTimeout(() => (scale.target = 1), 150);
108+
}
109+
}
95110
</script>
96111

97112
<article {...restProps} class={cn(['flex w-full flex-col gap-4', restProps.class])}>
@@ -168,14 +183,19 @@
168183
{#if count}
169184
<div class="flex gap-4">
170185
<button
171-
class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200"
172-
onclick={callback.like}
186+
class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300"
187+
onclick={handleLikeWithInteraction}
173188
>
174-
<Like
175-
size="24px"
176-
color="var(--color-red-500"
177-
fill={isLiked ? 'var(--color-red-500)' : 'white'}
178-
/>
189+
<div
190+
style="transform: scale({scale.current}); display: flex; align-items: center; justify-content: center;"
191+
>
192+
<Like
193+
size="24px"
194+
color={'var(--color-red-500)'}
195+
fill={isLiked ? 'var(--color-red-500)' : 'transparent'}
196+
class="transition-all duration-300"
197+
/>
198+
</div>
179199
</button>
180200
<button
181201
class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200"

‎platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import { HugeiconsIcon } from '@hugeicons/svelte';
1010
import type { HTMLAttributes } from 'svelte/elements';
1111
import { MessageInput } from '..';
12+
import { Spring } from 'svelte/motion';
1213
1314
interface IPostProps extends HTMLAttributes<HTMLElement> {
1415
avatar: string;
@@ -115,6 +116,20 @@
115116
await callback.comment(commentValue);
116117
commentValue = '';
117118
};
119+
120+
const scale = new Spring(1, {
121+
stiffness: 0.15,
122+
damping: 0.25
123+
});
124+
125+
async function handleLikeWithInteraction() {
126+
scale.target = 1.4;
127+
try {
128+
await callback.like();
129+
} finally {
130+
setTimeout(() => (scale.target = 1), 150);
131+
}
132+
}
118133
</script>
119134

120135
<article {...restProps} class={cn(['flex w-full gap-10', restProps.class])}>
@@ -195,7 +210,7 @@
195210
<div class="flex w-full items-center justify-between md:hidden">
196211
<div class="flex gap-4">
197212
<button
198-
class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200"
213+
class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300"
199214
onclick={callback.like}
200215
>
201216
<Like
@@ -289,18 +304,23 @@
289304
<div class="flex w-full flex-col justify-between gap-3">
290305
<div class="flex gap-4">
291306
<button
292-
class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200"
293-
onclick={callback.like}
307+
class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300"
308+
onclick={handleLikeWithInteraction}
294309
>
295-
<Like
296-
size="24px"
297-
color="var(--color-red-500"
298-
fill={isLiked ? 'var(--color-red-500)' : 'white'}
299-
/>
310+
<div
311+
style="transform: scale({scale.current}); display: flex; align-items: center; justify-content: center;"
312+
>
313+
<Like
314+
size="24px"
315+
color={'var(--color-red-500)'}
316+
fill={isLiked ? 'var(--color-red-500)' : 'transparent'}
317+
class="transition-all duration-300"
318+
/>
319+
</div>
300320
</button>
301-
<button class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200">
321+
<!-- <button class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200">
302322
<CommentIcon size="24px" color="black" fill="transparent" />
303-
</button>
323+
</button> -->
304324
</div>
305325
<p class="text-black/60">
306326
{new Date(time).toLocaleDateString()}

‎platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,13 @@
156156
{@const nextMessage = index < messages.length - 1 ? messages[index + 1] : null}
157157
{@const isHeadNeeded = Boolean(
158158
!prevMessage ||
159-
prevMessage.isOwn !== msg.isOwn ||
160-
(prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId)
159+
prevMessage.isOwn !== msg.isOwn ||
160+
(prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId)
161161
)}
162162
{@const isTimestampNeeded = Boolean(
163163
!nextMessage ||
164-
nextMessage.isOwn !== msg.isOwn ||
165-
(nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId)
164+
nextMessage.isOwn !== msg.isOwn ||
165+
(nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId)
166166
)}
167167
<ChatMessage
168168
isOwn={msg.isOwn}

‎platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,25 @@
33
import { page } from '$app/state';
44
import { PostModal, Profile } from '$lib/fragments';
55
import { selectedPost } from '$lib/store/store.svelte';
6-
import { createComment } from '$lib/stores/comments';
6+
import { comments as commentsStore, createComment, fetchComments } from '$lib/stores/comments';
77
import { toggleLike } from '$lib/stores/posts';
88
import type { PostData, userProfile } from '$lib/types';
99
import { Modal } from '$lib/ui';
1010
import { apiClient, getAuthId } from '$lib/utils/axios';
1111
import { onMount } from 'svelte';
1212
13+
interface Comment {
14+
id: string;
15+
text: string;
16+
createdAt: string;
17+
author: {
18+
id: string;
19+
handle: string;
20+
name: string;
21+
avatarUrl: string;
22+
};
23+
}
24+
1325
let profileId = $derived(page.params.id);
1426
let profile = $state<userProfile | null>(null);
1527
let error = $state<string | null>(null);
@@ -22,7 +34,6 @@
2234
return response.data;
2335
}
2436
});
25-
2637
async function fetchProfile() {
2738
try {
2839
loading = true;
@@ -59,10 +70,14 @@
5970
}
6071
}
6172
62-
function handlePostClick(post: PostData) {
63-
console.log(post);
73+
async function handlePostClick(post: PostData) {
6474
selectedPost.value = post;
65-
// goto("/profile/post");
75+
try {
76+
// Trigger the store to fetch comments for this specific post
77+
await fetchComments(post.id);
78+
} catch (err) {
79+
console.error('Error loading comments:', err);
80+
}
6681
}
6782
6883
onMount(fetchProfile);
@@ -130,15 +145,33 @@
130145
text={selectedPost.value?.caption ?? ''}
131146
count={selectedPost.value?.count ?? { likes: 0, comments: 0 }}
132147
{ownerProfile}
148+
isLiked={ownerProfile
149+
? ((selectedPost.value as any)?.likedBy?.some(
150+
(user: any) => user.id === ownerProfile.id
151+
) ?? false)
152+
: false}
133153
callback={{
134154
like: async () => {
135-
await toggleLike(selectedPost.value?.id ?? '');
155+
if (!selectedPost.value?.id) return;
156+
try {
157+
const result = await toggleLike(selectedPost.value.id);
158+
if (selectedPost.value && result?.likedBy) {
159+
(selectedPost.value as any).likedBy = result.likedBy;
160+
}
161+
} catch (err) {
162+
console.error('Failed to toggle like:', err);
163+
}
136164
},
137165
comment: async (comment) => {
138166
if (!selectedPost.value) return;
139-
await createComment(selectedPost.value?.id, comment);
167+
try {
168+
await createComment(selectedPost.value.id, comment);
169+
} catch (err) {
170+
console.error('Failed to create comment:', err);
171+
}
140172
}
141173
}}
174+
comments={$commentsStore}
142175
time={selectedPost.value?.time ?? ''}
143176
/>
144177
</Modal>

0 commit comments

Comments
 (0)