fix button sticker and API Sticket

src/app_modules/_global/lib/stiker/api_fecth_stiker_for_user.tsx

@@ -0,0 +1,32 @@
+export const apiGetStickerForUser = async ({  emotion }: {  emotion?: string }) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/sticker?emotion=${emotion || ""}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error("Failed to get sticker", response.statusText, errorData);
+      throw new Error(errorData?.message || "Failed to get sticker");
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error get sticker", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/_global/lib/stiker/comp_button_sticker.tsx

@@ -1,21 +1,40 @@
-import { ActionIcon, Box, Image, ScrollArea, SimpleGrid, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  Image,
+  ScrollArea,
+  SimpleGrid,
+  Tooltip,
+  Loader,
+  Group,
+} from "@mantine/core";
 import { IconMoodSmileFilled } from "@tabler/icons-react";
 import { MainColor } from "../../color";
 import { UIGlobal_Modal } from "../../ui";
-import { listStiker } from "../stiker";
 import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
+import { APIs } from "@/lib";
 
 interface Props {
   open: () => void;
   close: () => void;
   opened: boolean;
   quillRef: any;
+  dataSticker: any;
+  listEmotions: any
 }
-export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
+export const Comp_ButtonSticker = ({
+  open,
+  close,
+  opened,
+  quillRef,
+  dataSticker,
+  listEmotions,
+}: Props) => {
+  
   return (
     <>
-      <ActionIcon onClick={open} variant="transparent">
-        <IconMoodSmileFilled color={MainColor.white} size={30} />
+      <ActionIcon onClick={open} variant="transparent" disabled={dataSticker.length === 0}>
+        <IconMoodSmileFilled color={dataSticker.length === 0 ? "gray" : MainColor.white} size={30} />
       </ActionIcon>
 
       <UIGlobal_Modal
@@ -23,22 +42,32 @@ export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
         close={close}
         title="Pilih Stiker"
         closeButton
+        closeOnClickOutside={false}
+
       >
-        <Box mah={`${400}dvh`}>
+        <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}>
             <SimpleGrid cols={3} spacing="md">
-              {listStiker.map((item) => (
+              {dataSticker.map((item: any) => (
                 <Box key={item.id}>
                   <Tooltip label={item.name}>
                     <Image
-                      src={item.url}
+                      onLoad={() => <Loader />}
+                      src={APIs.GET({ fileId: item.fileId })}
                       height={100}
                       width={100}
                       alt={item.name}
                       style={{ cursor: "pointer" }}
                       onClick={() =>
                         insertStickerReactQuill({
-                          stickerUrl: item.url,
+                          stickerUrl: APIs.GET({ fileId: item.fileId }),
                           quillRef: quillRef,
                           close: close,
                         })
@@ -53,4 +82,4 @@ export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
       </UIGlobal_Modal>
     </>
   );
-}
+};

src/app_modules/_global/ui/ui_modal.tsx

@@ -21,6 +21,7 @@ export default function UIGlobal_Modal({
   buttonKanan,
   children,
   closeButton,
+  closeOnClickOutside,
 }: {
   opened: any;
   close: any;
@@ -29,6 +30,7 @@ export default function UIGlobal_Modal({
   buttonKanan?: any;
   children?: React.ReactNode;
   closeButton?: boolean;
+  closeOnClickOutside?: boolean;
 }) {
   return (
     <>
@@ -39,6 +41,7 @@ export default function UIGlobal_Modal({
         }}
         centered
         withCloseButton={false}
+        closeOnClickOutside={closeOnClickOutside}
         styles={{
           content: {
             backgroundColor: MainColor.darkblue,