From b1068933c22851d808b629b3c919d19234712ca6 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Mon, 19 May 2025 14:30:14 +0800
Subject: [PATCH] fix sticker on user UI

---
 .../lib/stiker/comp_button_sticker.tsx        | 118 +++++++++++++++---
 .../comp_V3_create.comment.tsx                |   4 +
 src/app_modules/forum/create/V3_create.tsx    |  31 ++++-
 .../forum/detail/v3_main_detail.tsx           |  25 ++++
 .../forum/edit/posting/V3_edit_posting.tsx    |  25 ++++
 5 files changed, 179 insertions(+), 24 deletions(-)

diff --git a/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx b/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx
index f896f45f..f79bf846 100644
--- a/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx
+++ b/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx
@@ -1,40 +1,80 @@
+import { APIs } from "@/lib";
 import {
   ActionIcon,
   Box,
+  Button,
+  CloseButton,
   Image,
+  Loader,
   ScrollArea,
   SimpleGrid,
   Tooltip,
-  Loader,
-  Group,
 } from "@mantine/core";
 import { IconMoodSmileFilled } from "@tabler/icons-react";
+import { useRef, useState } from "react";
 import { MainColor } from "../../color";
 import { UIGlobal_Modal } from "../../ui";
 import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
-import { APIs } from "@/lib";
+import { ISticker } from "../interface/stiker";
 
 interface Props {
   open: () => void;
   close: () => void;
   opened: boolean;
   quillRef: any;
-  dataSticker: any;
-  listEmotions: any
+  dataSticker: ISticker[] | null;
+  // listEmotions: any[];
+  // onEmotionSelect?: (val: string | null) => void;
 }
+
 export const Comp_ButtonSticker = ({
   open,
   close,
   opened,
   quillRef,
   dataSticker,
-  listEmotions,
+  // listEmotions,
+  // onEmotionSelect,
 }: Props) => {
-  
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Menyimpan id emosi yang dipilih
+  const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
+
+  // Menyimpan urutan awal
+  // const [originalOrder] = useState(listEmotions);
+
+  // const handleEmotionClick = (value: string) => {
+  //   setSelectedEmotions(
+  //     (prev) =>
+  //       prev.includes(value)
+  //         ? prev.filter((v) => v !== value) // batal pilih
+  //         : [...prev, value] // tambah pilih
+  //   );
+  // };
+
+  // Urutkan emosi: yang dipilih muncul di depan
+  // const orderedEmotions = [
+  //   ...selectedEmotions.map((val) => listEmotions.find((e: any) => e.value === val)),
+  //   ...originalOrder.filter((e: any) => !selectedEmotions.includes(e.value)),
+  // ];
+
   return (
     <>
-      <ActionIcon onClick={open} variant="transparent" disabled={dataSticker.length === 0}>
-        <IconMoodSmileFilled color={dataSticker.length === 0 ? "gray" : MainColor.white} size={30} />
+      <ActionIcon
+        onClick={open}
+        variant="transparent"
+        disabled={!dataSticker}
+      >
+        <IconMoodSmileFilled
+          color={
+            !dataSticker
+              ? "gray"
+              : MainColor.yellow
+          }
+          size={30}
+        />
       </ActionIcon>
 
       <UIGlobal_Modal
@@ -43,19 +83,59 @@ export const Comp_ButtonSticker = ({
         title="Pilih Stiker"
         closeButton
         closeOnClickOutside={false}
-
       >
         <Box mah={`${500}dvh`}>
-          {/* <Group position="center">
-            {listEmotions.map((item: any) => (
-              <ActionIcon key={item.id} onClick={() => open()}>
-                <IconMoodSmileFilled color={item.value} size={30} />
-              </ActionIcon>
-            ))}
-          </Group> */}
-          <ScrollArea h={380}>
+          {/* <ScrollArea type="never" viewportRef={scrollRef}>
+            <Box
+              p="sm"
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "0.5rem",
+                overflowX: "auto",
+                overflowY: "hidden",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {orderedEmotions.map((item: any) => {
+                const isSelected = selectedEmotions.includes(item.value);
+
+                return (
+                  <Button
+                    key={item.id}
+                    variant={isSelected ? "filled" : "light"}
+                    color={isSelected ? "blue" : "gray"}
+                    radius="xl"
+                    style={{ flexShrink: 0, position: "relative" }}
+                    onClick={() => handleEmotionClick(item.value)}
+                  >
+                    {item.label}
+                    {isSelected && (
+                      <CloseButton
+                        onClick={(e) => {
+                          e.stopPropagation(); // agar tidak trigger lagi handleEmotionClick
+                          handleEmotionClick(item.value);
+                        }}
+                        style={{
+                          position: "absolute",
+                          top: -6,
+                          right: -6,
+                          backgroundColor: "white",
+                          borderRadius: "50%",
+                          boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+                        }}
+                        size="sm"
+                      />
+                    )}
+                  </Button>
+                );
+              })}
+            </Box>
+          </ScrollArea> */}
+
+          <ScrollArea h={480}>
             <SimpleGrid cols={3} spacing="md">
-              {dataSticker.map((item: any) => (
+              {dataSticker?.map((item: any) => (
                 <Box key={item.id}>
                   <Tooltip label={item.name}>
                     <Image
diff --git a/src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx b/src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
index 4d0908b8..67baba76 100644
--- a/src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
+++ b/src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
@@ -28,6 +28,7 @@ import {
   MODEL_FORUM_KOMENTAR,
   MODEL_FORUM_POSTING,
 } from "../../model/interface";
+import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
 
 const ReactQuill = dynamic(
   async () => {
@@ -52,11 +53,13 @@ export default function Forum_V3_CreateKomentar({
   data,
   userLoginId,
   onSetLoadData,
+  dataSticker,
 }: {
   postingId: string;
   data: MODEL_FORUM_POSTING;
   userLoginId: string;
   onSetLoadData: (val: string) => void;
+  dataSticker: ISticker[] | null;
 }) {
   const [loading, setLoading] = useState(false);
   const [isComment, setIsComment] = useState(false);
@@ -196,6 +199,7 @@ export default function Forum_V3_CreateKomentar({
                   close={close}
                   opened={opened}
                   quillRef={quillRef}
+                  dataSticker={dataSticker}
                 />
 
                 <Button
diff --git a/src/app_modules/forum/create/V3_create.tsx b/src/app_modules/forum/create/V3_create.tsx
index 74c7c502..dcf68895 100644
--- a/src/app_modules/forum/create/V3_create.tsx
+++ b/src/app_modules/forum/create/V3_create.tsx
@@ -13,6 +13,9 @@ import React, { useState } from "react";
 import Forum_ButtonCreatePosting from "../component/button/button_create_posting";
 import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
 import { apiGetMasterEmotions } from "@/app_modules/_global/lib/api_fetch_master";
+import pLimit from "p-limit";
+import global_limit from "@/lib/limit";
+import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
 
 export function Forum_V3_Create() {
   const router = useRouter();
@@ -21,18 +24,32 @@ export function Forum_V3_Create() {
   const quillRef = React.useRef<any>(null);
   const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
   const [isReady, setIsReady] = useState<boolean>(false);
-  const [sticker, setSticker] = useState<any>([]);
+  const [sticker, setSticker] = useState<ISticker[] | null>(null);
   const [emotion, setEmotion] = useState<any>([]);
 
+  // useShallowEffect(() => {
+  //   handleLoadData();
+  // }, []);
+
+  // async function handleLoadData() {
+  //   const listLoadData = [
+  //     global_limit(onLoadEmotion),
+  //     global_limit(onLoadSticker),
+  //   ];
+  //   await Promise.all(listLoadData);
+  // }
+
+  // useShallowEffect(() => {
+  //   onLoadEmotion();
+  // }, []);
+
   useShallowEffect(() => {
     onLoadSticker();
-    onLoadEmotion();
   }, []);
 
   async function onLoadSticker() {
     try {
       const response = await apiGetStickerForUser({ emotion });
-      console.log("response >>", response);
       if (response.success) {
         setSticker(response.res.data);
       } else {
@@ -48,7 +65,6 @@ export function Forum_V3_Create() {
   async function onLoadEmotion() {
     try {
       const response = await apiGetMasterEmotions();
-      console.log("response >>", response);
       if (response.success) {
         setEmotion(response.data);
       } else {
@@ -124,7 +140,12 @@ export function Forum_V3_Create() {
                 opened={opened}
                 quillRef={quillRef}
                 dataSticker={sticker}
-                listEmotions={emotion}
+                // listEmotions={emotion}
+                // onEmotionSelect={(val) => {
+                //   console.log("val >>", val);
+                //   // setEmotion(val ? [val] : []);
+                //   // onLoadSticker(val ? [val] : []);
+                // }}
               />
 
               <Forum_ButtonCreatePosting value={editorContent} />
diff --git a/src/app_modules/forum/detail/v3_main_detail.tsx b/src/app_modules/forum/detail/v3_main_detail.tsx
index adb5cc76..07a0f8f7 100644
--- a/src/app_modules/forum/detail/v3_main_detail.tsx
+++ b/src/app_modules/forum/detail/v3_main_detail.tsx
@@ -23,6 +23,8 @@ import {
   Forum_SkeletonListKomentar,
 } from "../component/skeleton_view";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
+import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
+import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
 
 export default function Forum_V3_MainDetail({
   userLoginId,
@@ -40,6 +42,28 @@ export default function Forum_V3_MainDetail({
   const [activePage, setActivePage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
 
+  const [sticker, setSticker] = useState<ISticker[] | null>(null);
+  const [emotion, setEmotion] = useState<any>([]);
+
+  useShallowEffect(() => {
+    onLoadSticker();
+  }, []);
+
+  async function onLoadSticker() {
+    try {
+      const response = await apiGetStickerForUser({ emotion: "" });
+      if (response.success) {
+        setSticker(response.res.data);
+      } else {
+        console.error("Failed to get sticker", response.message);
+        setSticker([]);
+      }
+    } catch (error) {
+      console.error("Error get sticker", error);
+      setSticker([]);
+    }
+  }
+
   useShallowEffect(() => {
     handleLoadData();
   }, []);
@@ -180,6 +204,7 @@ export default function Forum_V3_MainDetail({
               onSetLoadData={(val) => {
                 setListKomentar((prev: any) => [val, ...prev]);
               }}
+              dataSticker={sticker}
             />
           )
         )}
diff --git a/src/app_modules/forum/edit/posting/V3_edit_posting.tsx b/src/app_modules/forum/edit/posting/V3_edit_posting.tsx
index 1ba62e02..5df4c51c 100644
--- a/src/app_modules/forum/edit/posting/V3_edit_posting.tsx
+++ b/src/app_modules/forum/edit/posting/V3_edit_posting.tsx
@@ -14,6 +14,8 @@ import React, { useState } from "react";
 import { apiGetOneForumById } from "../../component/api_fetch_forum";
 import Forum_ButtonUpdatePosting from "../../component/button/button_update_posting";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
+import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
+import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
 
 export default function Forum_V3_EditPosting() {
   const param = useParams<{ id: string }>();
@@ -24,6 +26,28 @@ export default function Forum_V3_EditPosting() {
   const quillRef = React.useRef<any>(null);
   const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
 
+  const [sticker, setSticker] = useState<ISticker[] | null>(null);
+  const [emotion, setEmotion] = useState<any>([]);
+
+   useShallowEffect(() => {
+      onLoadSticker();
+    }, []);
+  
+    async function onLoadSticker() {
+      try {
+        const response = await apiGetStickerForUser({ emotion: "" });
+        if (response.success) {
+          setSticker(response.res.data);
+        } else {
+          console.error("Failed to get sticker", response.message);
+          setSticker([]);
+        }
+      } catch (error) {
+        console.error("Error get sticker", error);
+        setSticker([]);
+      }
+    }
+
   useShallowEffect(() => {
     handleLoadData();
   }, []);
@@ -102,6 +126,7 @@ export default function Forum_V3_EditPosting() {
               close={close}
               opened={opened}
               quillRef={quillRef}
+              dataSticker={sticker}
             />
 
             <Forum_ButtonUpdatePosting