Fix Collaboration use Server to API

src/app_modules/admin/colab/sub_menu/publish.tsx

@@ -31,179 +31,144 @@ import { IconBan, IconCheck, IconEye } from "@tabler/icons-react";
 import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useRouter } from "next/navigation";
 
-export default function AdminColab_TablePublish({
-  listData,
-}: {
-  listData: any;
-}) {
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { apiGetAdminCollaborationPublish } from "../lib/api_fetch_admin_collaboration";
+import { RouterAdminColab } from "@/lib/router_admin/router_admin_colab";
+
+export default function AdminColab_TablePublish() {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Project Collaboration" />
-        <TableMenu listData={listData} />
+        <TableMenu />
         {/* <pre>{JSON.stringify(listData.nPage, null, 2)}</pre> */}
       </Stack>
     </>
   );
 }
-function TableMenu({ listData }: { listData: any }) {
-  const [data, setData] = useState<MODEL_COLLABORATION[]>(listData.data);
-  const [isNPage, setNPage] = useState(listData.nPage);
+function TableMenu() {
+  const router = useRouter();
+  const [data, setData] = useState<MODEL_COLLABORATION[] | null>(null);
+  const [isNPage, setNPage] = useState<number>(1);
   const [activePage, setActivePage] = useState(1);
+  const [idData, setIdData] = useState("");
+  const [isLoading, setLoading] = useState(false);
 
-  const [idProject, setIdProject] = useState("");
-  const [openDetail, setOpenDetail] = useState(false);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-  const [detailData, setDetailData] = useState<MODEL_COLLABORATION>();
+  useShallowEffect(() => {
+    loadInitialData();
+  }, [activePage]);
 
-  const [openReject, setOpenReject] = useState(false);
-  const [report, setReport] = useState("");
-  const [loadingReject, setLoadingReject] = useState(false);
-  const [loadingReport, setLoadingReport] = useState(false);
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminCollaborationPublish({
+        page: `${activePage}`,
+      })
+      console.log("Ini Response", response)
 
-  // PAGINATION dan No awal  data di tampilkan
-  let noAwal = activePage * 5 - 4;
-  async function onLoad(pindahPage: any) {
-    const load = await adminColab_getListAllPublish({ page: pindahPage });
-    setActivePage(pindahPage);
-    setData(load.data as any);
-    setNPage(load.nPage);
+      if (response?.success && response?.data?.data) {
+        setData(response.data.data);
+        setNPage(response.data.nPage || 1);
+      } else {
+        console.error("Invalid data format recieved", response);
+        setData([])
+      }
+    } catch (error) {
+      clientLogger.error("Invalid data table publish", error);
+      setData([]);
+    }
   }
 
-  // Table Body
-  const tableRow = data.map((e, i) => (
-    <tr key={i}>
-      <td>
-        <Center c={AdminColor.white}>{noAwal++}</Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>
-          <Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
-        </Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>
-          <Box>
-            <Center c={AdminColor.white}>
-              <Text lineClamp={1}>{e?.title}</Text>
+  const onPageCLick = (page: number) => {
+    setActivePage(page);
+  }
+
+  const renderTableBody = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
             </Center>
-          </Box>
-        </Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>
-          <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
-        </Center>
-      </td>
-      <td>
-        <Center c={AdminColor.white}>
-          <Text>{e?.ProjectCollaboration_Partisipasi.length}</Text>
-        </Center>
-      </td>
-      <td>
-        <Center>
-          <Stack>
+          </td>
+        </tr>
+      )
+    }
+
+    return data.map((e, i) => (
+      <tr key={i}>
+        <td>
+          <Center c={AdminColor.white}>
+            <Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
+          </Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>
+            <Box>
+              <Center c={AdminColor.white}>
+                <Text lineClamp={1}>{e?.title}</Text>
+              </Center>
+            </Box>
+          </Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>
+            <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
+          </Center>
+        </td>
+        <td>
+          <Center c={AdminColor.white}>
+            <Text>{e?.ProjectCollaboration_Partisipasi.length}</Text>
+          </Center>
+        </td>
+        <td>
+          <Center>
             <Button
-              loading={
-                idProject === e?.id ? (loadingDetail ? true : false) : false
-              }
+              loading={isLoading && e?.id == idData ? true : false}
               leftIcon={<IconEye />}
               loaderPosition="center"
               radius={"xl"}
               color="green"
               onClick={() => {
-                getDetailData(e.id);
+                setLoading(true);
+                setIdData(e?.id);
+                router.push(RouterAdminColab.detail_publish + `${e?.id}`);
               }}
             >
               Detail
             </Button>
-            <Button
-              loading={
-                idProject === e?.id ? (loadingReject ? true : false) : false
-              }
-              leftIcon={<IconBan />}
-              loaderPosition="center"
-              radius={"xl"}
-              color="red"
-              onClick={() => {
-                onRejected(e.id);
-              }}
-            >
-              Reject
-            </Button>
-          </Stack>
-        </Center>
-      </td>
-    </tr>
-  ));
-
-  // Menampilkan Detail Data
-  async function getDetailData(colabId: any) {
-    setLoadingDetail(true);
-    setIdProject(colabId);
-
-    await adminColab_getOneByColabId({ id: colabId }).then((res) => {
-      if (res.status === 200) {
-        setDetailData(res.data as any);
-        setOpenDetail(true);
-        setLoadingDetail(false);
-      } else {
-        ComponentGlobal_NotifikasiPeringatan("Gagal Load");
-      }
-    });
+          </Center>
+        </td>
+      </tr>
+    ));
   }
 
-  // Menampilkan Data Title yang akan di REJECT
-  async function onRejected(colabId: string) {
-    setLoadingReject(true);
-    setIdProject(colabId);
+  // async function onReport() {
+  //   if (report === "")
+  //     return ComponentGlobal_NotifikasiPeringatan("Lengkapi Alasan Report");
 
-    await adminColab_getOneByColabId({ id: colabId }).then((res) => {
-      if (res.status === 200) {
-        const selectedData = _.omit(res.data, [
-          "Author",
-          "ProjectCollaborationMaster_Industri",
-          "ProjectCollaboration_Partisipasi",
-          "benefit",
-          "createdAt",
-          "purpose",
-          "lokasi",
-        ]);
+  //   await adminColab_funReportProjectById({
+  //     colabId: idData,
+  //     report: report,
+  //   }).then(async (res) => {
+  //     if (res.status === 200) {
+  //       const newData = await adminColab_getListAllPublish({
+  //         page: activePage,
+  //       });
 
-        setDetailData(selectedData as any);
-        setOpenReject(true);
-        setLoadingReject(false);
-      } else {
-        ComponentGlobal_NotifikasiPeringatan("Gagal Load");
-      }
-    });
-  }
-
-  // Update status report pada project
-  async function onReport() {
-    if (report === "")
-      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Alasan Report");
-
-    await adminColab_funReportProjectById({
-      colabId: idProject,
-      report: report,
-    }).then(async (res) => {
-      if (res.status === 200) {
-        const newData = await adminColab_getListAllPublish({
-          page: activePage,
-        });
-
-        setActivePage(activePage);
-        setData(newData.data as any);
-        setNPage(newData.nPage);
-        setOpenReject(false);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiPeringatan(res.message);
-      }
-    });
-  }
+  //       setActivePage(activePage);
+  //       setData(newData.data as any);
+  //       setNPage(newData.nPage);
+  //       setOpenReject(false);
+  //       ComponentGlobal_NotifikasiBerhasil(res.message);
+  //     } else {
+  //       ComponentGlobal_NotifikasiPeringatan(res.message);
+  //     }
+  //   });
+  // }
 
   return (
     <>
@@ -217,101 +182,52 @@ function TableMenu({ listData }: { listData: any }) {
         >
           <Title order={4}>Publish</Title>
         </Group>
-        <Paper p={"md"} bg={AdminColor.softBlue} >
-          <Stack>
-            <ScrollArea h={"65vh"}>
-              <Table
-                verticalSpacing={"xs"}
-                horizontalSpacing={"md"}
-                p={"md"}
-                
-              >
-                <thead>
-                  <tr>
-                    <th>
-                      <Center c={AdminColor.white}>No</Center>
-                    </th>
-                    <th>
-                      <Center c={AdminColor.white}>Username</Center>
-                    </th>
-                    <th>
-                      <Center c={AdminColor.white}>Title</Center>
-                    </th>
-                    <th>
-                      <Center c={AdminColor.white}>Industri</Center>
-                    </th>
-                    <th>
-                      <Center c={AdminColor.white}>Jumlah Partisipan</Center>
-                    </th>
-                    <th>
-                      <Center c={AdminColor.white}>Aksi</Center>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>{tableRow}</tbody>
-              </Table>
-            </ScrollArea>
-            <Pagination
-              position="center"
-              total={isNPage}
-              value={activePage}
-              onChange={(val) => {
-                onLoad(val);
-              }}
-            />
-          </Stack>
-        </Paper>
+        {!data ? (
+          <CustomSkeleton height={"80vh"} width={"100%"} />
+        ) : (
+          <Paper p={"md"} bg={AdminColor.softBlue} >
+            <Stack>
+              <ScrollArea h={"65vh"}>
+                <Table
+                  verticalSpacing={"xs"}
+                  horizontalSpacing={"md"}
+                  p={"md"}
+
+                >
+                  <thead>
+                    <tr>
+                      <th>
+                        <Center c={AdminColor.white}>Username</Center>
+                      </th>
+                      <th>
+                        <Center c={AdminColor.white}>Title</Center>
+                      </th>
+                      <th>
+                        <Center c={AdminColor.white}>Industri</Center>
+                      </th>
+                      <th>
+                        <Center c={AdminColor.white}>Jumlah Partisipan</Center>
+                      </th>
+                      <th>
+                        <Center c={AdminColor.white}>Aksi</Center>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>{renderTableBody()}</tbody>
+                </Table>
+              </ScrollArea>
+              <Pagination
+                position="center"
+                total={isNPage}
+                value={activePage}
+                onChange={(val) => {
+                  onPageCLick(val);
+                }}
+              />
+            </Stack>
+          </Paper>
+        )}
       </Stack>
-
-      {/* Detail Data */}
-      <Modal
-        styles={{body: { backgroundColor: AdminColor.softBlue}}}
-        opened={openDetail}
-        onClose={() => setOpenDetail(false)}
-        centered
-        withCloseButton={false}
-        size={"lg"}
-      >
-        <Paper p={"md"} bg={AdminColor.softBlue}>
-          <ComponentAdminColab_DetailData data={detailData as any} />
-        </Paper>
-      </Modal>
-
-      {/* Reject Project */}
-      <Modal
-        styles={{body: { backgroundColor: AdminColor.softBlue}}}
-        opened={openReject}
-        onClose={() => setOpenReject(false)}
-        centered
-        withCloseButton={false}
-        size={"lg"}
-      >
-        <Paper bg={AdminColor.softBlue} p={"md"}>
-          <Stack>
-            <Text c={AdminColor.white}>
-              Apakah anda yakin ingin mereport project{" "}
-              <Text c={AdminColor.white} span inherit fw={"bold"}>
-                {detailData?.title}
-              </Text>
-              ?
-            </Text>{" "}
-            <Textarea
-              minRows={2}
-              placeholder="Ketik alasan report.."
-              onChange={(val) => setReport(val.currentTarget.value)}
-            />
-            <Group position="right">
-              <Button
-                leftIcon={<IconCheck />}
-                radius={"xl"}
-                onClick={() => onReport()}
-              >
-                Simpan
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Modal>
     </>
   );
 }