Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
show if i've liked
Browse files
src/lib/components/community/reactions/Reaction.svelte
CHANGED
@@ -4,6 +4,7 @@
|
|
4 |
export let emoji: string;
|
5 |
export let count: number;
|
6 |
export let gallery_id: string;
|
|
|
7 |
export let onReact: (emoji: string, id: string, deleted: boolean) => void;
|
8 |
|
9 |
const handleReaction = async (emoji: string) => {
|
@@ -22,8 +23,10 @@
|
|
22 |
</script>
|
23 |
|
24 |
<UserIsLogged>
|
|
|
25 |
<button
|
26 |
class="rounded-full bg-white text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-3 py-1 border border-white hover:bg-neutral-200 text-sm"
|
|
|
27 |
on:click={() => handleReaction(emoji)}
|
28 |
>
|
29 |
<span class="text-base">{emoji}</span>
|
|
|
4 |
export let emoji: string;
|
5 |
export let count: number;
|
6 |
export let gallery_id: string;
|
7 |
+
export let liked: boolean;
|
8 |
export let onReact: (emoji: string, id: string, deleted: boolean) => void;
|
9 |
|
10 |
const handleReaction = async (emoji: string) => {
|
|
|
23 |
</script>
|
24 |
|
25 |
<UserIsLogged>
|
26 |
+
<!-- liked -->
|
27 |
<button
|
28 |
class="rounded-full bg-white text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-3 py-1 border border-white hover:bg-neutral-200 text-sm"
|
29 |
+
class:bg-opacity-60={!liked}
|
30 |
on:click={() => handleReaction(emoji)}
|
31 |
>
|
32 |
<span class="text-base">{emoji}</span>
|
src/lib/components/community/reactions/Reactions.svelte
CHANGED
@@ -16,17 +16,21 @@
|
|
16 |
return {
|
17 |
emoji,
|
18 |
count: reactions.filter((reaction) => reaction.emoji === emoji).length,
|
|
|
19 |
};
|
20 |
});
|
21 |
};
|
22 |
|
23 |
$: groupedReactions = groupReactionsByEmoji(reactions);
|
|
|
|
|
24 |
</script>
|
25 |
|
26 |
{#each groupedReactions as reaction}
|
27 |
<Reaction
|
28 |
emoji={reaction.emoji}
|
29 |
count={reaction?.count}
|
|
|
30 |
{gallery_id}
|
31 |
onReact={(emoji, id, deleted) => {
|
32 |
if (deleted) {
|
|
|
16 |
return {
|
17 |
emoji,
|
18 |
count: reactions.filter((reaction) => reaction.emoji === emoji).length,
|
19 |
+
liked: !!reactions.find((reaction) => reaction.emoji === emoji && reaction.hf_user_id === user?.sub)
|
20 |
};
|
21 |
});
|
22 |
};
|
23 |
|
24 |
$: groupedReactions = groupReactionsByEmoji(reactions);
|
25 |
+
|
26 |
+
$: console.log(groupedReactions);
|
27 |
</script>
|
28 |
|
29 |
{#each groupedReactions as reaction}
|
30 |
<Reaction
|
31 |
emoji={reaction.emoji}
|
32 |
count={reaction?.count}
|
33 |
+
liked={reaction?.liked}
|
34 |
{gallery_id}
|
35 |
onReact={(emoji, id, deleted) => {
|
36 |
if (deleted) {
|