emoji reaction

src/lib/components/community/Card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Add from "$lib/components/community/reactions/Add.svelte";
 	import type { CommunityCard } from "$lib/type";
 	import Reactions from "./reactions/Reactions.svelte";
 
@@ -17,9 +16,6 @@
     <p class="text-white/75 font-regular text-sm">{card.model.id}</p>
   </div>
   <div class="flex items-center justify-start gap-2">
-    {#if card.reactions.length > 0}
-      <Reactions reactions={card.reactions} />
-    {/if}
-    <Add count={card?.reactions?.length} />
+    <Reactions reactions={card.reactions} gallery_id={card.id} />
   </div>
 </div>

src/lib/components/community/reactions/Add.svelte

@@ -4,6 +4,9 @@
   import { REACTION_EMOJIS } from "$lib/utils";
 
   export let count: number;
+  export let reactions: Array<{ emoji: string, count: number }> = [];
+  export let gallery_id: string;
+  export let onAdd: (emoji: string, id: string) => void;
 
   let isOpen: boolean = false;
   $: uuid = Math.random().toString(36).substring(7);
@@ -20,6 +23,24 @@
   if (browser) {
     window.addEventListener("click", handleClick);
   }
+
+  const handleReaction = async (emoji: string) => {
+    await fetch(`/api/community/reaction`, {
+      method: "POST",
+      body: JSON.stringify({ emoji, gallery_id }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+    .then(res => res.json())
+    .then(data => {
+      if (!data.delete) {
+        onAdd(emoji, data.id)
+      }
+    })
+  }
+
+  $: AVAILABLE_EMOJIS = REACTION_EMOJIS.filter(e => !reactions.find(emj => emj.emoji === e));
 </script>
 
 <div
@@ -27,6 +48,7 @@
   class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-1.5 py-1 border border-dashed border-white/80 hover:border-white relative z-[2]"
   class:!border-white={isOpen}
   class:!text-white={isOpen}
+  class:opacity-0={count >= 4}
 >
   <button on:click={() => isOpen = !isOpen}>
     <Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
@@ -36,8 +58,13 @@
     class:opacity-100={isOpen}
     class:pointer-events-auto={isOpen}
   >
-    {#each REACTION_EMOJIS as emoji}
-      <div class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center">{emoji}</div>
+    {#each AVAILABLE_EMOJIS as emoji}
+      <button
+        class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center"
+        on:click={() => handleReaction(emoji)}
+      >
+        {emoji}
+      </button>
     {/each}
   </div>
 </div>

src/lib/components/community/reactions/Reaction.svelte

@@ -1,9 +1,28 @@
 <script lang="ts">
   export let emoji: string;
   export let count: number;
+  export let gallery_id: string;
+  export let onReact: (emoji: string, id: string, deleted: boolean) => void;
+
+  const handleReaction = async (emoji: string) => {
+    await fetch(`/api/community/reaction`, {
+      method: "POST",
+      body: JSON.stringify({ emoji, gallery_id }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+    .then(res => res.json())
+    .then(data => {
+      onReact(emoji, data.id, data.delete);
+    })
+  }
 </script>
 
-<div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
+<button
+  class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white hover:bg-neutral-200"
+  on:click={() => handleReaction(emoji)}
+>
   <span>{emoji}</span>
   {count}
-</div>
+</button>

src/lib/components/community/reactions/Reactions.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import type { ReactionType } from "$lib/type";
+  import Add from "$lib/components/community/reactions/Add.svelte";
   import Reaction from "$lib/components/community/reactions/Reaction.svelte";
+  import { get } from 'svelte/store';
+  import { userStore } from "$lib/stores/use-user";
+
+  let user = get(userStore);
 
   export let reactions: ReactionType[] = [];
+  export let gallery_id: string;
 
   const groupReactionsByEmoji = (reactions: ReactionType[]) => {
     const grouped = new Set(reactions.map((reaction) => reaction.emoji));
@@ -14,9 +20,28 @@
     });
   };
 
-  const groupedReactions = groupReactionsByEmoji(reactions);
+  $: groupedReactions = groupReactionsByEmoji(reactions);
 </script>
 
 {#each groupedReactions as reaction}
-  <Reaction emoji={reaction.emoji} count={reaction?.count} />
-{/each}
+  <Reaction
+    emoji={reaction.emoji}
+    count={reaction?.count}
+    {gallery_id}
+    onReact={(emoji, id, deleted) => {
+      if (deleted) {
+        reactions = reactions.filter((reaction) => reaction.id !== id);
+      } else {
+        reactions = [...reactions, { emoji, hf_user_id: user?.sub, galleryId: gallery_id, id }];
+      }
+    }}
+  />
+{/each}
+<Add
+  count={groupedReactions?.length}
+  reactions={groupedReactions}
+  {gallery_id}
+  onAdd={(emoji, id) => {
+    reactions = [...reactions, { emoji, hf_user_id: user?.sub, galleryId: gallery_id, id }];
+  }}
+/>

src/lib/utils/index.ts

@@ -53,5 +53,5 @@ export const tokenIsAvailable = async (token: string) => {
   })
 
   const user = await userRequest.clone().json().catch(() => ({}));
-  return !!user?.sub
+  return user?.sub ? user : null;
 }

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 	import { userStore } from "$lib/stores/use-user";
 
 	export let data;
-	userStore.set(data.user);
+	userStore.set(data?.user?.user);
 </script>
 
 <div class="flex items-start">

src/routes/api/community/reaction/+server.ts

@@ -0,0 +1,94 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+import { tokenIsAvailable } from '$lib/utils';
+import { REACTION_EMOJIS } from "$lib/utils";
+import prisma from '$lib/prisma';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function POST({ cookies, request } : RequestEvent) {
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: {
+        token: "You must be logged"
+      }
+    }, { status: 401 })
+  }
+
+  const is_token_available = await tokenIsAvailable(token)
+  if (!is_token_available) {
+    return json({
+      error: {
+        token: "Invalid token"
+      }
+    }, { status: 401 })
+  }
+
+  const { emoji, gallery_id } = await request.json()
+
+  if (!REACTION_EMOJIS.includes(emoji)) {
+    return json({
+      error: {
+        emoji: "Invalid emoji"
+      }
+    }, { status: 400 })
+  }
+
+  if (!gallery_id ) {
+    return json({
+      error: {
+        gallery_id: "Invalid gallery_id"
+      }
+    }, { status: 400 })
+  }
+
+  const gallery = await prisma.gallery.findUnique({
+    where: {
+      id: gallery_id
+    }
+  })
+
+  if (!gallery) {
+    return json({
+      error: {
+        gallery_id: "Gallery not found"
+      }
+    }, { status: 404 })
+  }
+
+  const reaction_exist = await prisma.reaction.findFirst({
+    where: {
+      galleryId: gallery_id,
+      hf_user_id: is_token_available.sub,
+      emoji
+    }
+  })
+
+  if (reaction_exist) {
+    await prisma.reaction.delete({
+      where: {
+        id: reaction_exist.id
+      }
+    })
+
+    return json({
+      success: true,
+      delete: true,
+      id: reaction_exist.id
+    })
+  }
+
+  const new_reaction = await prisma.reaction.create({
+    data: {
+      emoji,
+      galleryId: gallery_id,
+      hf_user_id: is_token_available.sub
+    }
+  })
+
+  return json({
+    success: true,
+    delete: false,
+    id: new_reaction.id
+  })
+}