fix: button sticker

deskripsi:
- logic if sticker isEmpty

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

@@ -2,20 +2,21 @@ import { APIs } from "@/lib";
 import {
   ActionIcon,
   Box,
-  Button,
+  Center,
-  CloseButton,
   Image,
   Loader,
   ScrollArea,
   SimpleGrid,
-  Tooltip,
+  Stack,
+  Text,
+  Tooltip
 } from "@mantine/core";
 import { IconMoodSmileFilled } from "@tabler/icons-react";
-import { useRef, useState } from "react";
+import _ from "lodash";
 import { MainColor } from "../../color";
 import { UIGlobal_Modal } from "../../ui";
-import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
 import { ISticker } from "../interface/stiker";
+import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
 
 interface Props {
   open: () => void;
@@ -23,8 +24,6 @@ interface Props {
   opened: boolean;
   quillRef: any;
   dataSticker: ISticker[] | null;
-  // listEmotions: any[];
-  // onEmotionSelect?: (val: string | null) => void;
 }
 
 export const Comp_ButtonSticker = ({
@@ -33,46 +32,12 @@ export const Comp_ButtonSticker = ({
   opened,
   quillRef,
   dataSticker,
-  // 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
+      <ActionIcon onClick={open} variant="transparent" disabled={!dataSticker}>
-        onClick={open}
-        variant="transparent"
-        disabled={!dataSticker}
-      >
         <IconMoodSmileFilled
-          color={
+          color={!dataSticker ? "gray" : MainColor.yellow}
-            !dataSticker
-              ? "gray"
-              : MainColor.yellow
-          }
           size={30}
         />
       </ActionIcon>
@@ -85,78 +50,43 @@ export const Comp_ButtonSticker = ({
         closeOnClickOutside={false}
       >
         <Box mah={`${500}dvh`}>
-          {/* <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">
+            {_.isEmpty(dataSticker) ? (
-              {dataSticker?.map((item: any) => (
+              <Center h={300}>
-                <Box key={item.id}>
+                <Stack spacing={0} h="100%" align="center" justify="center">
-                  <Tooltip label={item.name}>
+                  <Text fw={"bold"} color="gray">
-                    <Image
+                    Sticker belum tersedia
-                      onLoad={() => <Loader />}
+                  </Text>
-                      src={APIs.GET({ fileId: item.fileId })}
+                  <Text color="gray" fw={"bold"}>
-                      height={100}
+                    Silahkan hubungi admin untuk info lebih lanjut
-                      width={100}
+                  </Text>
-                      alt={item.name}
+                </Stack>
-                      style={{ cursor: "pointer" }}
+              </Center>
-                      onClick={() =>
+            ) : (
-                        insertStickerReactQuill({
+              <SimpleGrid cols={3} spacing="md">
-                          stickerUrl: APIs.GET({ fileId: item.fileId }),
+                {dataSticker?.map((item: any) => (
-                          quillRef: quillRef,
+                  <Box key={item.id}>
-                          close: close,
+                    <Tooltip label={item.name}>
-                        })
+                      <Image
-                      }
+                        onLoad={() => <Loader />}
-                    />
+                        src={APIs.GET({ fileId: item.fileId })}
-                  </Tooltip>
+                        height={100}
-                </Box>
+                        width={100}
-              ))}
+                        alt={item.name}
-            </SimpleGrid>
+                        style={{ cursor: "pointer" }}
+                        onClick={() =>
+                          insertStickerReactQuill({
+                            stickerUrl: APIs.GET({ fileId: item.fileId }),
+                            quillRef: quillRef,
+                            close: close,
+                          })
+                        }
+                      />
+                    </Tooltip>
+                  </Box>
+                ))}
+              </SimpleGrid>
+            )}
           </ScrollArea>
         </Box>
       </UIGlobal_Modal>

src/app_modules/forum/create/V3_create.tsx

@@ -120,12 +120,6 @@ export function Forum_V3_Create({ userLoginId }: { userLoginId: string }) {
                 opened={opened}
                 quillRef={quillRef}
                 dataSticker={sticker}
-                // listEmotions={emotion}
-                // onEmotionSelect={(val) => {
-                //   console.log("val >>", val);
-                //   // setEmotion(val ? [val] : []);
-                //   // onLoadSticker(val ? [val] : []);
-                // }}
               />
 
               <Forum_ButtonCreatePosting value={editorContent} />