fix beranda forum

deskripsi:
- fix api forum
- fix tutup dan buka forum

src/app/api/forum/route.ts

@@ -9,9 +9,10 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const page = searchParams.get("page");
     const search = searchParams.get("search");
-    const takeData = 4
+    const takeData = 5;
     const skipData = Number(page) * takeData - takeData;
 
+
     if (!page) {
       fixData = await prisma.forum_Posting.findMany({
         orderBy: {

src/app_modules/forum/component/button/button_update_beranda.tsx

@@ -0,0 +1,63 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { clientLogger } from "@/util/clientLogger";
+import { Center, Button } from "@mantine/core";
+import { useState } from "react";
+import { apiGetAllForum } from "../api_fetch_forum";
+
+export function ButtonUpdateBeranda({
+  countNewPost,
+  onSetData,
+  onSetIsNewPost,
+  onSetCountNewPosting,
+}: {
+  countNewPost: number;
+  onSetData: (val: any) => void;
+  onSetIsNewPost: (val: any) => void;
+  onSetCountNewPosting: (val: any) => void;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLoadData = async (isSearch: string) => {
+    try {
+      setIsLoading(true);
+
+      const response = await apiGetAllForum({
+        page: `1`,
+        search: isSearch,
+      });
+
+      if (response) {
+        onSetData(response.data);
+        onSetIsNewPost(false);
+        setIsLoading(false);
+        onSetCountNewPosting(0);
+      }
+    } catch (error) {
+      setIsLoading(false);
+      clientLogger.error("Error get data forum", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Center>
+        <Button
+          style={{
+            transition: "0.5s",
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+          bg={AccentColor.blue}
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          radius={"xl"}
+          opacity={0.5}
+          onClick={() => handleLoadData("")}
+        >
+          Update beranda + {countNewPost}
+        </Button>
+      </Center>
+    </>
+  );
+}

src/app_modules/forum/component/card_loader.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { Overlay, Center, Loader } from "@mantine/core";
-
-export default function ComponentForum_CardLoadingOverlay({
-  size,
-  variant,
-}: {
-  size?: number;
-  variant?: any;
-}) {
-  return (
-    <>
-      <Overlay h={"100%"} opacity={0.1} >
-        <Center h={"100%"}>
-          <Loader
-            variant={variant ? variant : "oval"}
-            size={size ? size : 20}
-            color="gray"
-          />
-        </Center>
-      </Overlay>
-    </>
-  );
-}

src/app_modules/forum/component/loading_drawer.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { Center, Group, LoadingOverlay, Skeleton } from "@mantine/core";
-
-export default function ComponentForum_LoadingDrawer() {
-  const customLoad = (
-    <Center h={"100vh"}>
-      <Group>
-        {Array(3)
-          .fill(0)
-          .map((e, i) => (
-            <Skeleton key={i} height={50} circle mb="xl" />
-          ))}
-      </Group>
-    </Center>
-  );
-  return (
-    <>
-      {customLoad}
-    </>
-  );
-}

src/app_modules/forum/component/main_component/card_more_button.tsx

@@ -37,6 +37,7 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function ComponentForum_BerandaMoreButton({
   authorId,
@@ -255,11 +256,11 @@ function ButtonDelete({
   const [loading, setLoading] = useState(false);
 
   async function onDelete() {
-    setOpenDel(false);
+    try {
-    await forum_funDeletePostingById(postingId as any).then(async (res) => {
+      setLoading(true);
-      if (res.status === 200) {
+      const deleteData = await forum_funDeletePostingById(postingId as any);
-        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+      if (deleteData.status === 200) {
-        setLoading(true);
+        setOpenDel(false);
 
         const cloneData = _.clone(allData);
         const hapusData = cloneData.filter((e) => e.id !== postingId);
@@ -272,10 +273,16 @@ function ButtonDelete({
             data: hapusData,
           })
         );
+
+        ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
       } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(deleteData.message);
       }
-    });
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
+    }
   }
   return (
     <>
@@ -324,120 +331,132 @@ function ButtonStatus({
   const [loading, setLoading] = useState(false);
 
   async function onTutupForum() {
-    setOpenStatus(false);
+    try {
-
-    const upateStatusClose = await forum_funEditStatusPostingById(
-      postingId as any,
-      2
-    );
-    if (upateStatusClose.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
       setLoading(true);
-
+      const upateStatusClose = await forum_funEditStatusPostingById(
-      const cloneData = _.clone(allData);
+        postingId as any,
-      const loadData = cloneData.map(
+        2
-        (e) => (
-          e.id === postingId,
-          {
-            ...e,
-            ForumMaster_StatusPosting: {
-              id: e.id === postingId ? 2 : e.ForumMaster_StatusPosting.id,
-              status:
-                e.id === postingId
-                  ? "Close"
-                  : e.ForumMaster_StatusPosting.status,
-            },
-          }
-        )
-      );
-      onLoadData(loadData);
-
-      //
-      mqtt_client.publish(
-        "Forum_ganti_status",
-        JSON.stringify({
-          id: postingId,
-          data: loadData,
-        })
       );
 
-      const findData = cloneData.find((val) => val.id === postingId);
+      if (upateStatusClose.status === 200) {
-      const updateDetail = {
+        setOpenStatus(false);
-        ...findData,
+        ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
-        ForumMaster_StatusPosting: {
-          id: 2,
-          status: "Close",
-        },
-      };
 
-      mqtt_client.publish(
+        const cloneData = _.clone(allData);
-        "Forum_detail_ganti_status",
+        const loadData = cloneData.map(
-        JSON.stringify({
+          (e) => (
-          id: postingId,
+            e.id === postingId,
-          data: updateDetail.ForumMaster_StatusPosting,
+            {
-        })
+              ...e,
-      );
+              ForumMaster_StatusPosting: {
-    } else {
+                id: e.id === postingId ? 2 : e.ForumMaster_StatusPosting.id,
-      ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
+                status:
+                  e.id === postingId
+                    ? "Close"
+                    : e.ForumMaster_StatusPosting.status,
+              },
+            }
+          )
+        );
+        onLoadData(loadData);
+
+        //
+        mqtt_client.publish(
+          "Forum_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: loadData,
+          })
+        );
+
+        const findData = cloneData.find((val) => val.id === postingId);
+        const updateDetail = {
+          ...findData,
+          ForumMaster_StatusPosting: {
+            id: 2,
+            status: "Close",
+          },
+        };
+
+        mqtt_client.publish(
+          "Forum_detail_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: updateDetail.ForumMaster_StatusPosting,
+          })
+        );
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
     }
   }
 
   async function onBukaForum() {
-    setOpenStatus(false);
+    try {
-
-    const updateStatusOpen = await forum_funEditStatusPostingById(
-      postingId as any,
-      1
-    );
-    if (updateStatusOpen.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
       setLoading(true);
-
+      const updateStatusOpen = await forum_funEditStatusPostingById(
-      const cloneData = _.clone(allData);
+        postingId as any,
-      const loadData = cloneData.map(
+        1
-        (e) => (
-          e.id === postingId,
-          {
-            ...e,
-            ForumMaster_StatusPosting: {
-              id: e.id === postingId ? 1 : e.ForumMaster_StatusPosting.id,
-              status:
-                e.id === postingId
-                  ? "Open"
-                  : e.ForumMaster_StatusPosting.status,
-            },
-          }
-        )
       );
 
-      mqtt_client.publish(
+      if (updateStatusOpen.status === 200) {
-        "Forum_ganti_status",
+        setOpenStatus(false);
-        JSON.stringify({
+        ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
-          id: postingId,
-          data: loadData,
-        })
-      );
 
-      onLoadData(loadData);
+        const cloneData = _.clone(allData);
+        const loadData = cloneData.map(
+          (e) => (
+            e.id === postingId,
+            {
+              ...e,
+              ForumMaster_StatusPosting: {
+                id: e.id === postingId ? 1 : e.ForumMaster_StatusPosting.id,
+                status:
+                  e.id === postingId
+                    ? "Open"
+                    : e.ForumMaster_StatusPosting.status,
+              },
+            }
+          )
+        );
 
-      const findData = cloneData.find((val) => val.id === postingId);
+        mqtt_client.publish(
-      const updateDetail = {
+          "Forum_ganti_status",
-        ...findData,
+          JSON.stringify({
-        ForumMaster_StatusPosting: {
+            id: postingId,
-          id: 1,
+            data: loadData,
-          status: "Open",
+          })
-        },
+        );
-      };
 
-      mqtt_client.publish(
+        onLoadData(loadData);
-        "Forum_detail_ganti_status",
+
-        JSON.stringify({
+        const findData = cloneData.find((val) => val.id === postingId);
-          id: postingId,
+        const updateDetail = {
-          data: updateDetail.ForumMaster_StatusPosting,
+          ...findData,
-        })
+          ForumMaster_StatusPosting: {
-      );
+            id: 1,
-    } else {
+            status: "Open",
-      ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
+          },
+        };
+
+        mqtt_client.publish(
+          "Forum_detail_ganti_status",
+          JSON.stringify({
+            id: postingId,
+            data: updateDetail.ForumMaster_StatusPosting,
+          })
+        );
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error get data forum", error);
     }
   }
 
@@ -461,7 +480,7 @@ function ButtonStatus({
           {statusId === 1 ? (
             <Button
               loaderPosition="center"
-              loading={loading ? true : false}
+              loading={loading}
               color="orange"
               radius={"xl"}
               onClick={() => {
@@ -473,7 +492,7 @@ function ButtonStatus({
           ) : (
             <Button
               loaderPosition="center"
-              loading={loading ? true : false}
+              loading={loading}
               color="green"
               radius={"xl"}
               onClick={() => {

src/app_modules/forum/component/other_component.tsx

@@ -0,0 +1,19 @@
+import { Stack, Text } from "@mantine/core";
+import { IconSearchOff } from "@tabler/icons-react";
+
+export { Forum_ComponentIsDataEmpty };
+
+function Forum_ComponentIsDataEmpty() {
+  return (
+    <>
+      <Stack align="center" justify="center" h={"80vh"}>
+        <IconSearchOff size={80} color="white" />
+        <Stack spacing={0} align="center">
+          <Text color="white" fw={"bold"} fz={"xs"}>
+            Tidak ada data
+          </Text>
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/component/skeleton_view.tsx

@@ -0,0 +1,15 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Stack } from "@mantine/core";
+
+export { Forum_SkeletonCard };
+
+function Forum_SkeletonCard() {
+  return (
+    <>
+      <Stack>
+        <CustomSkeleton height={230} width={"100%"} />
+        <CustomSkeleton height={230} width={"100%"} />
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/main/beranda.tsx

@@ -1,65 +1,92 @@
 "use client";
 
-import { RouterForum } from "@/lib/router_hipmi/router_forum";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
-import mqtt_client from "@/util/mqtt_client";
+import { RouterForum } from "@/lib/router_hipmi/router_forum";
-import {
+import { clientLogger } from "@/util/clientLogger";
-  Affix,
+import { Affix, Center, Loader, Stack, TextInput, rem } from "@mantine/core";
-  Button,
+import { useShallowEffect } from "@mantine/hooks";
-  Center,
-  Loader,
-  Stack,
-  Text,
-  TextInput,
-  rem,
-} from "@mantine/core";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import { IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentForum_BerandaCardView from "../component/main_component/card_view";
-import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
-import { MODEL_FORUM_POSTING } from "../model/interface";
 import { apiGetAllForum } from "../component/api_fetch_forum";
-import { clientLogger } from "@/util/clientLogger";
+import { ButtonUpdateBeranda } from "../component/button/button_update_beranda";
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import ComponentForum_BerandaCardView from "../component/main_component/card_view";
+import { Forum_ComponentIsDataEmpty } from "../component/other_component";
+import { Forum_SkeletonCard } from "../component/skeleton_view";
+import { MODEL_FORUM_POSTING } from "../model/interface";
+import mqtt_client from "@/util/mqtt_client";
 
 export default function Forum_Beranda({
   userLoginId,
 }: {
   userLoginId: string;
 }) {
-  const router = useRouter();
+  const [data, setData] = useState<MODEL_FORUM_POSTING[]>([]);
-  const [scroll, scrollTo] = useWindowScroll();
-
-  const [data, setData] = useState<MODEL_FORUM_POSTING[] | null>(null);
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setIsSearch] = useState("");
   const [isNewPost, setIsNewPost] = useState(false);
   const [countNewPost, setCountNewPost] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
   useShallowEffect(() => {
     handleLoadData(isSearch);
   }, [isSearch]);
 
   const handleLoadData = async (isSearch: string) => {
+    setIsLoading(true);
     try {
       const response = await apiGetAllForum({
-        page: `${activePage}`,
+        page: "1",
         search: isSearch,
       });
 
       if (response) {
         setData(response.data);
+        setActivePage(1);
+        setHasMore(response.data.length > 0);
       }
     } catch (error) {
       clientLogger.error("Error get data forum", error);
+      setData([]);
+      setHasMore(false);
+    } finally {
+      setIsLoading(false);
     }
   };
 
+  const handleMoreData = async () => {
+    if (!hasMore || isLoading) return null;
+
+    try {
+      const nextPage = activePage + 1;
+
+      const response = await apiGetAllForum({
+        page: `${nextPage}`,
+        search: isSearch,
+      });
+
+      if (response?.data && response.data.length > 0) {
+        setActivePage(nextPage);
+        setHasMore(response.data.length > 0);
+        return response.data;
+      } else {
+        setHasMore(false);
+        return null;
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum", error);
+      setHasMore(false);
+      return null;
+    }
+  };
+
+  const hanldeSearch = async (text: string) => {
+    setIsSearch(text);
+    setActivePage(1);
+    setHasMore(true);
+  };
+
   useShallowEffect(() => {
     mqtt_client.subscribe("Forum_create_new");
     mqtt_client.subscribe("Forum_ganti_status");
@@ -109,12 +136,6 @@ export default function Forum_Beranda({
     });
   }, [countNewPost, data]);
 
-  async function onSearch(text: string) {
-    setIsSearch(text);
-    setActivePage(1);
-
-  }
-
   return (
     <>
       {isNewPost && (
@@ -140,24 +161,14 @@ export default function Forum_Beranda({
           radius={"xl"}
           placeholder="Topik forum apa yang anda cari hari ini ?"
           onChange={(val) => {
-            onSearch(val.currentTarget.value);
+            hanldeSearch(val.currentTarget.value);
           }}
         />
 
-        {!data ? (
+        {!data.length && isLoading ? (
-          <Stack>
+          <Forum_SkeletonCard />
-            <CustomSkeleton height={230} width={"100%"} />
-            <CustomSkeleton height={230} width={"100%"} />
-          </Stack>
         ) : _.isEmpty(data) ? (
-          <Stack align="center" justify="center" h={"80vh"}>
+          <Forum_ComponentIsDataEmpty />
-            <IconSearchOff size={80} color="white" />
-            <Stack spacing={0} align="center">
-              <Text color="white" fw={"bold"} fz={"xs"}>
-                Tidak ada data
-              </Text>
-            </Stack>
-          </Stack>
         ) : (
           // --- Main component --- //
           <ScrollOnly
@@ -169,22 +180,7 @@ export default function Forum_Beranda({
             )}
             data={data}
             setData={setData as any}
-            moreData={async () => {
+            moreData={handleMoreData}
-              try {
-                const nextPage = activePage + 1;
-                const response = await apiGetAllForum({
-                  page: `${nextPage}`,
-                  search: isSearch,
-                });
-
-                if (response) {
-                  setActivePage((val) => val + 1);
-                  return response.data;
-                }
-              } catch (error) {
-                clientLogger.error("Error get data forum", error);
-              }
-            }}
           >
             {(item) => (
               <ComponentForum_BerandaCardView
@@ -202,51 +198,3 @@ export default function Forum_Beranda({
     </>
   );
 }
-
-function ButtonUpdateBeranda({
-  countNewPost,
-  onSetData,
-  onSetIsNewPost,
-  onSetCountNewPosting,
-}: {
-  countNewPost: number;
-  onSetData: (val: any) => void;
-  onSetIsNewPost: (val: any) => void;
-  onSetCountNewPosting: (val: any) => void;
-}) {
-  const [scroll, scrollTo] = useWindowScroll();
-  const [isLoading, setIsLoading] = useState(false);
-
-  async function onLoadData() {
-    setIsLoading(true);
-    const loadData = await forum_new_getAllPosting({ page: 1 });
-
-    if (loadData) {
-      onSetData(loadData);
-      onSetIsNewPost(false);
-      setIsLoading(false);
-      onSetCountNewPosting(0);
-    }
-  }
-
-  return (
-    <>
-      <Center>
-        <Button
-          style={{
-            transition: "0.5s",
-            border: `1px solid ${AccentColor.skyblue}`,
-          }}
-          bg={AccentColor.blue}
-          loaderPosition="center"
-          loading={isLoading ? true : false}
-          radius={"xl"}
-          opacity={scroll.y > 0 ? 0.5 : 0.8}
-          onClick={() => onLoadData()}
-        >
-          Update beranda + {countNewPost}
-        </Button>
-      </Center>
-    </>
-  );
-}