fix button sticker and API Sticket

src/app/api/admin/sticker/route.ts

@@ -0,0 +1,132 @@
+import { prisma } from "@/lib";
+import { data } from "autoprefixer";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+export { GET, POST };
+
+interface IPostSticker {
+  fileId: string;
+  emotions: string[];
+}
+
+async function POST(request: Request) {
+  const method = request.method;
+  if (method !== "POST") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { fileId, emotions } = await request.json();
+
+    const newStiker = await prisma.sticker.create({
+      data: {
+        fileId,
+        MasterEmotions: {
+          connect: emotions.map((value: string) => ({ value })), // id = number[]
+        },
+      },
+    });
+
+    if (!newStiker) {
+      return NextResponse.json(
+        { success: false, message: "Gagal membuat stiker" },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(
+      { success: true, message: "Berhasil membuat stiker" },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Error create sticker", error);
+    return NextResponse.json(
+      { success: false, message: "Failed to create sticker" },
+      { status: 500 }
+    );
+  }
+}
+
+async function GET(request: Request) {
+  const method = request.method;
+  if (method !== "GET") {
+    return NextResponse.json(
+      { success: false, message: "Method not allowed" },
+      { status: 405 }
+    );
+  }
+
+  let fixData;
+  const { searchParams } = new URL(request.url);
+  const search = searchParams.get("search");
+  const page = searchParams.get("page");
+  const dataTake = 10;
+  const dataSkip = Number(page) * dataTake - dataTake;
+
+  try {
+    if (!page) {
+      fixData = await prisma.sticker.findMany({
+        orderBy: {
+          createdAt: "desc",
+        },
+        include: {
+          MasterEmotions: true,
+        },
+      });
+    } else {
+      const data = await prisma.sticker.findMany({
+        skip: dataSkip,
+        take: dataTake,
+        where: {
+          MasterEmotions: {
+            some: {
+              value: {
+                contains: search ? search : "",
+                mode: "insensitive",
+              },
+            },
+          },
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+        include: {
+          MasterEmotions: true,
+        },
+      });
+
+      const nCount = await prisma.sticker.count({
+        where: {
+          MasterEmotions: {
+            some: {
+              value: {
+                contains: search ? search : "",
+                mode: "insensitive",
+              },
+            },
+          },
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / dataTake),
+      };
+    }
+
+    return NextResponse.json(
+      { success: true, message: "Success get data sticker", data: fixData },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Error get data sticker", error);
+    return NextResponse.json(
+      { success: false, message: "Error get data sticker" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/sticker/route.ts

@@ -1,55 +1,8 @@
 import { prisma } from "@/lib";
-import { data } from "autoprefixer";
 import _ from "lodash";
 import { NextResponse } from "next/server";
 
-export { GET, POST };
+export { GET };
-
-interface IPostSticker {
-  fileId: string;
-  emotions: string[];
-}
-
-async function POST(request: Request) {
-  const method = request.method;
-  if (method !== "POST") {
-    return NextResponse.json(
-      { success: false, message: "Method not allowed" },
-      { status: 405 }
-    );
-  }
-
-  try {
-    const { fileId, emotions } = await request.json();
-
-    const newStiker = await prisma.sticker.create({
-      data: {
-        fileId,
-        MasterEmotions: {
-          connect: emotions.map((value: string) => ({ value })), // id = number[]
-        },
-      },
-    });
-
-    if (!newStiker) {
-      return NextResponse.json(
-        { success: false, message: "Gagal membuat stiker" },
-        { status: 400 }
-      );
-    }
-
-    return NextResponse.json(
-      { success: true, message: "Berhasil membuat stiker" },
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error("Error create sticker", error);
-    return NextResponse.json(
-      { success: false, message: "Failed to create sticker" },
-      { status: 500 }
-    );
-  }
-}
 
 async function GET(request: Request) {
   const method = request.method;
@@ -62,30 +15,48 @@ async function GET(request: Request) {
 
   let fixData;
   const { searchParams } = new URL(request.url);
-  const search = searchParams.get("search");
+  const emotion = searchParams.get("emotion");
   const page = searchParams.get("page");
-  const dataTake = 10
+  const dataTake = 10;
   const dataSkip = Number(page) * dataTake - dataTake;
 
   try {
     if (!page) {
-      fixData = await prisma.sticker.findMany({
+      // Without page
+      const getData = await prisma.sticker.findMany({
         orderBy: {
           createdAt: "desc",
         },
+        where: {
+          isActive: true,
+          MasterEmotions: {
+            some: {
+              value: {
+                contains: emotion ? emotion : "",
+                mode: "insensitive",
+              },
+            },
+          },
+        },
         include: {
           MasterEmotions: true,
         },
       });
+
+      fixData = {
+        data: getData,
+      };
     } else {
+      // With page
       const data = await prisma.sticker.findMany({
         skip: dataSkip,
         take: dataTake,
         where: {
+          isActive: true,
           MasterEmotions: {
             some: {
               value: {
-                contains: search ? search : "",
+                contains: emotion ? emotion : "",
                 mode: "insensitive",
               },
             },
@@ -101,10 +72,11 @@ async function GET(request: Request) {
 
       const nCount = await prisma.sticker.count({
         where: {
+          isActive: true,
           MasterEmotions: {
             some: {
               value: {
-                contains: search ? search : "",
+                contains: emotion ? emotion : "",
                 mode: "insensitive",
               },
             },
@@ -119,7 +91,7 @@ async function GET(request: Request) {
     }
 
     return NextResponse.json(
-      { success: true, message: "Success get data sticker", data: fixData },
+      { success: true, message: "Success get data sticker", res: fixData },
       { status: 200 }
     );
   } catch (error) {

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">
+      <ActionIcon onClick={open} variant="transparent" disabled={dataSticker.length === 0}>
-        <IconMoodSmileFilled color={MainColor.white} size={30} />
+        <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,

src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx

@@ -7,7 +7,7 @@ export const apiAdminCreateSticker = async ({ data }: { data: any }) => {
       return null;
     }
 
-    const response = await fetch(`/api/sticker`, {
+    const response = await fetch(`/api/admin/sticker`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -41,7 +41,7 @@ export const apiAdminGetSticker = async ({ page }: { page: number }) => {
       return null;
     }
 
-    const response = await fetch(`/api/sticker?page=${page}`, {
+    const response = await fetch(`/api/admin/sticker?page=${page}`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -74,7 +74,7 @@ export const apiAdminGetStickerById = async ({ id }: { id: string }) => {
             return null;
         }
 
-        const response = await fetch(`/api/sticker/${id}`, {
+        const response = await fetch(`/api/admin/sticker/${id}`, {
             method: "GET",
             headers: {
                 "Content-Type": "application/json",
@@ -108,7 +108,7 @@ export const apiAdminUpdateSticker = async ({ data }: { data: any }) => {
             return null;
         }
 
-        const response = await fetch(`/api/sticker/${data.id}`, {
+        const response = await fetch(`/api/admin/sticker/${data.id}`, {
             method: "PUT",
             headers: {
                 "Content-Type": "application/json",
@@ -142,7 +142,7 @@ export const apiAdminDeleteSticker = async ({ id }: { id: string }) => {
             return null;
         }
 
-        const response = await fetch(`/api/sticker/${id}`, {
+        const response = await fetch(`/api/admin/sticker/${id}`, {
             method: "DELETE",
             headers: {
                 "Content-Type": "application/json",
@@ -175,7 +175,7 @@ export const apiAdminUpdateStatusStickerById = async ({ data }: { data: any }) =
             return null;
         }
 
-        const response = await fetch(`/api/sticker/${data.id}/activation`, {
+        const response = await fetch(`/api/admin/sticker/${data.id}/activation`, {
             method: "PUT",
             headers: {
                 "Content-Type": "application/json",

src/app_modules/forum/create/V3_create.tsx

@@ -11,6 +11,8 @@ import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 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";
 
 export function Forum_V3_Create() {
   const router = useRouter();
@@ -19,6 +21,45 @@ 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 [emotion, setEmotion] = useState<any>([]);
+
+  useShallowEffect(() => {
+    onLoadSticker();
+    onLoadEmotion();
+  }, []);
+
+  async function onLoadSticker() {
+    try {
+      const response = await apiGetStickerForUser({ emotion });
+      console.log("response >>", response);
+      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([]);
+    }
+  }
+
+  async function onLoadEmotion() {
+    try {
+      const response = await apiGetMasterEmotions();
+      console.log("response >>", response);
+      if (response.success) {
+        setEmotion(response.data);
+      } else {
+        console.error("Failed to get emotion", response.message);
+        setEmotion([]);
+      }
+    } catch (error) {
+      console.error("Error get emotion", error);
+      setEmotion([]);
+    }
+  }
 
   useShallowEffect(() => {
     setIsReady(true); // Set ready on client-side mount
@@ -82,6 +123,8 @@ export function Forum_V3_Create() {
                 close={close}
                 opened={opened}
                 quillRef={quillRef}
+                dataSticker={sticker}
+                listEmotions={emotion}
               />
 
               <Forum_ButtonCreatePosting value={editorContent} />