Intergrasi to API

Deskripsi:
- Fix server action collaboration to API

src/app_modules/colab/main/beranda.tsx

@@ -9,23 +9,41 @@ import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
+import { apiGetAllCollaboration } from "../_lib/api_collaboration";
 import { ComponentColab_ButtonUpdateBeranda } from "../component/button/button_update_beranda";
 import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
-import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
 import { MODEL_COLLABORATION } from "../model/interface";
+import { Collaboration_SkeletonBeranda } from "../component/skeleton_view";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Colab_Beranda({
-  listData,
   userLoginId,
 }: {
-  listData: MODEL_COLLABORATION[];
   userLoginId: string;
 }) {
-  const [data, setData] = useState(listData);
+  const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
   const [activePage, setActivePage] = useState(1);
-
   const [isNewPost, setIsNewPost] = useState(false);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "beranda",
+        page: "1",
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get all collaboration", error);
+    }
+  }
+
   useShallowEffect(() => {
     mqtt_client.subscribe("Colab_create");
 
@@ -36,6 +54,10 @@ export default function Colab_Beranda({
     });
   }, []);
 
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonBeranda />;
+  }
+
   return (
     <>
       <Box>
@@ -62,15 +84,16 @@ export default function Colab_Beranda({
                 </Center>
               )}
               data={data}
-              setData={setData}
+              setData={setData as any}
               moreData={async () => {
-                const loadData = await colab_getListAllProyek({
-                  page: activePage + 1,
+                const respone = await apiGetAllCollaboration({
+                  kategori: "beranda",
+                  page: `${activePage + 1}`,
                 });
 
                 setActivePage((val) => val + 1);
 
-                return loadData;
+                return respone.data;
               }}
             >
               {(item) => (

src/app_modules/colab/main/grup/index.tsx

@@ -1,28 +1,51 @@
 "use client";
 
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import {
-  Box,
-  Center,
-  Loader
-} from "@mantine/core";
+import { Box, Center, Loader, Skeleton, Stack } from "@mantine/core";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
 import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
+import { MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT } from "../../model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetAllCollaboration } from "../../_lib/api_collaboration";
 import {
-  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT
-} from "../../model/interface";
+  Collaboration_SkeletonBeranda,
+  Collaboration_SkeletonGrup,
+} from "../../component/skeleton_view";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
-export default function Colab_GrupDiskus({
-  listRoom,
-}: {
-  listRoom: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
-}) {
-  const [data, setData] = useState(listRoom);
+export default function Colab_GrupDiskus() {
+  const [data, setData] = useState<
+    MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[] | null
+  >(null);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "grup",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get grup", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonGrup />;
+  }
+
   return (
     <>
       <Box>
@@ -38,15 +61,16 @@ export default function Colab_GrupDiskus({
                 </Center>
               )}
               data={data}
-              setData={setData}
+              setData={setData as any}
               moreData={async () => {
-                const loadData = await colab_getListRoomChatByAuthorId({
-                  page: activePage + 1,
+                const respone = await apiGetAllCollaboration({
+                  kategori: "grup",
+                  page: `${activePage + 1}`,
                 });
 
                 setActivePage((val) => val + 1);
 
-                return loadData;
+                return respone.data;
               }}
             >
               {(item) => <ComponentColab_CardGrup data={item} />}

src/app_modules/colab/main/proyek/index.tsx

@@ -1,25 +1,17 @@
 "use client";
 
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { Stack, Tabs, Text } from "@mantine/core";
-import { IconBrandOffice, IconUsersGroup, IconUser } from "@tabler/icons-react";
-import { useState } from "react";
-import Colab_ProyekSaya from "./saya";
-import Colab_PartisipasiProyek from "./partisipasi";
+import { IconUser, IconUsersGroup } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { gs_colab_proyek } from "../../global_state";
-import {
-  MODEL_COLLABORATION,
-  MODEL_COLLABORATION_PARTISIPASI,
-} from "../../model/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import Colab_PartisipasiProyek from "./partisipasi";
+import Colab_ProyekSaya from "./saya";
 
-export default function Colab_Proyek({
-  listPartisipasiUser,
-  listProyekSaya,
-}: {
-  listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
-  listProyekSaya: MODEL_COLLABORATION[];
-}) {
+export default function Colab_Proyek() {
   const [activeTab, setActiveTab] = useAtom(gs_colab_proyek);
 
   const listTabs = [
@@ -28,18 +20,14 @@ export default function Colab_Proyek({
       icon: <IconUsersGroup />,
       label: "Partisipasi Proyek",
       value: "Partisipasi",
-      path: (
-        <Colab_PartisipasiProyek
-          listPartisipasiUser={listPartisipasiUser as any}
-        />
-      ),
+      path: <Colab_PartisipasiProyek />,
     },
     {
       id: 2,
       icon: <IconUser />,
       label: "Proyek Saya",
       value: "Saya",
-      path: <Colab_ProyekSaya listProyekSaya={listProyekSaya as any} />,
+      path: <Colab_ProyekSaya />,
     },
   ];
 

src/app_modules/colab/main/proyek/partisipasi.tsx

@@ -9,21 +9,45 @@ import { useState } from "react";
 import { ComponentColab_CardSemuaPartisipan } from "../../component/card_view/card_semua_partisipan";
 import colab_getListPartisipasiProyekByAuthorId from "../../fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
 import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetAllCollaboration } from "../../_lib/api_collaboration";
+import { clientLogger } from "@/util/clientLogger";
+import { Collaboration_SkeletonBeranda } from "../../component/skeleton_view";
 
-export default function Colab_PartisipasiProyek({
-  listPartisipasiUser,
-}: {
-  listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
-}) {
-  const [data, setData] = useState(listPartisipasiUser);
+export default function Colab_PartisipasiProyek() {
+  const [data, setData] = useState<MODEL_COLLABORATION_PARTISIPASI[] | null>(
+    null
+  );
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "partisipasi",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get partisipasi", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonBeranda />;
+  }
+
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
-        // --- Main component --- //
         <Box>
           <ScrollOnly
             height="73vh"
@@ -33,14 +57,15 @@ export default function Colab_PartisipasiProyek({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await colab_getListPartisipasiProyekByAuthorId({
-                page: activePage + 1,
+              const respone = await apiGetAllCollaboration({
+                kategori: "partisipasi",
+                page: `${activePage + 1}`,
               });
               setActivePage((val) => val + 1);
 
-              return loadData;
+              return respone.data;
             }}
           >
             {(item) => (

src/app_modules/colab/main/proyek/saya.tsx

@@ -2,29 +2,51 @@
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { clientLogger } from "@/util/clientLogger";
 import { Box, Center, Loader } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
+import { apiGetAllCollaboration } from "../../_lib/api_collaboration";
 import { ComponentColab_CardProyekSaya } from "../../component/card_view/card_proyek_saya";
-import colab_getListAllProyekSayaByAuthorId from "../../fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
+import { Collaboration_SkeletonBeranda } from "../../component/skeleton_view";
 import { MODEL_COLLABORATION } from "../../model/interface";
 
-export default function Colab_ProyekSaya({
-  listProyekSaya,
-}: {
-  listProyekSaya: MODEL_COLLABORATION[];
-}) {
-  const [data, setData] = useState(listProyekSaya);
+export default function Colab_ProyekSaya() {
+  const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetAllCollaboration({
+        kategori: "proyeksaya",
+        page: `${activePage}`,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get proyeksaya", error);
+    }
+  }
+
+  if (_.isNull(data)) {
+    return <Collaboration_SkeletonBeranda />;
+  }
+
   return (
     <>
       {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData />
       ) : (
         // --- Main component --- //
-        <Box >
+        <Box>
           <ScrollOnly
             height="73vh"
             renderLoading={() => (
@@ -33,14 +55,16 @@ export default function Colab_ProyekSaya({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
             moreData={async () => {
-              const loadData = await colab_getListAllProyekSayaByAuthorId({
-                page: activePage + 1,
+              const respone = await apiGetAllCollaboration({
+                kategori: "proyeksaya",
+                page: `${activePage + 1}`,
               });
+
               setActivePage((val) => val + 1);
 
-              return loadData;
+              return respone.data;
             }}
           >
             {(item) => (