fix forum

deskripsi:
- fix forumku , server action to API

src/app_modules/forum/component/api_fetch_forum.ts

@@ -1,4 +1,4 @@
-export { apiGetAllForum, apiGetOneForumById };
+export { apiGetAllForum, apiGetOneForumById, apiGetForumkuById };
 
 const apiGetAllForum = async ({
   page,
@@ -71,3 +71,43 @@ const apiGetOneForumById = async ({ id }: { id: string }) => {
     throw error; // Re-throw the error to handle it in the calling function
   }
 };
+
+const apiGetForumkuById = async ({
+  id,
+  page,
+}: {
+  id: string;
+  page: 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 isPage = `?page=${page}`;
+    const response = await fetch(`/api/forum/forumku/${id}${isPage}`, {
+      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 all forum:", response.statusText, errorData);
+      throw new Error(errorData?.message || "Failed to get all forum");
+    }
+
+    // Return the JSON response
+    return await response.json();
+  } catch (error) {
+    console.error("Error get all forum", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};

src/app_modules/forum/component/skeleton_view.tsx

@@ -1,7 +1,7 @@
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { Stack } from "@mantine/core";
+import { Center, Grid, Group, Stack } from "@mantine/core";
 
-export { Forum_SkeletonCard };
+export { Forum_SkeletonCard, Forum_SkeletonForumku };
 
 function Forum_SkeletonCard() {
   return (
@@ -13,3 +13,30 @@ function Forum_SkeletonCard() {
     </>
   );
 }
+
+function Forum_SkeletonForumku(){
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <Center>
+          <CustomSkeleton height={100} width={100} circle />
+        </Center>
+
+        <Grid grow>
+          <Grid.Col span={6}>
+            <Stack spacing={"xs"}>
+              <CustomSkeleton height={15} width={"80%"} />
+              <CustomSkeleton height={15} width={"80%"} />
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={6}>
+            <Group position="right">
+              <CustomSkeleton height={40} width={"80%"} radius={"xl"} />
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/forumku/index.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { RouterForum } from "@/lib/router_hipmi/router_forum";
-import {
-  AccentColor
-} from "@/app_modules/_global/color/color_pallet";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
@@ -14,91 +12,149 @@ import {
   Text,
   rem,
 } from "@mantine/core";
-import { useWindowScroll } from "@mantine/hooks";
+import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
 import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentForum_ForumkuMainCardView from "../component/forumku_component/forumku_view";
 import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
 import { MODEL_FORUM_POSTING } from "../model/interface";
 import ComponentForum_ViewForumProfile from "./forum_profile";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
+import backendLogger from "@/util/backendLogger";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetForumkuById } from "../component/api_fetch_forum";
+import {
+  Forum_SkeletonCard,
+  Forum_SkeletonForumku,
+} from "../component/skeleton_view";
+import { data } from "autoprefixer";
+import { Forum_ComponentIsDataEmpty } from "../component/other_component";
 
 export default function Forum_Forumku({
-  auhtorSelectedData,
-  dataPosting,
   totalPosting,
   userLoginId,
 }: {
-  auhtorSelectedData: MODEL_USER;
-  dataPosting: MODEL_FORUM_POSTING[];
   totalPosting: number;
   userLoginId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState(dataPosting);
+  const params = useParams<{ id: string }>();
+  const userId = params.id;
+  const [dataUser, setDataUser] = useState<MODEL_USER | null>(null);
+  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING[]>([]);
   const [activePage, setActivePage] = useState(1);
 
-  const [scroll, scrollTo] = useWindowScroll();
-  const [loadingCreate, setLoadingCreate] = useState(false);
+  useShallowEffect(() => {
+    const handleLoadDataUser = async () => {
+      try {
+        const response = await apiGetUserById({
+          id: userId,
+        });
+
+        if (response) {
+          console.log("response", response);
+          setDataUser(response.data);
+        }
+      } catch (error) {
+        clientLogger.error("Error get user", error);
+      }
+    };
+
+    handleLoadDataUser();
+  }, []);
+
+  useShallowEffect(() => {
+    handleLoadDataForum();
+  }, []);
+
+  const handleLoadDataForum = async () => {
+    try {
+      const response = await apiGetForumkuById({
+        id: userId,
+        page: "1",
+      });
+
+      if (response.success) {
+        setDataPosting(response.data);
+        setActivePage(1);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum");
+      setDataPosting([]);
+    }
+  };
+
+  const handleMoreData = async () => {
+    try {
+      const nextPage = activePage + 1;
+
+      const response = await apiGetForumkuById({
+        id: userId,
+        page: `${nextPage}`,
+      });
+
+      if (response.success) {
+        setActivePage(nextPage);
+        return response.data;
+      } else {
+        return null;
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum");
+      return null;
+    }
+  };
 
   return (
     <>
-      {userLoginId === auhtorSelectedData.id && (
-        <ComponentGlobal_CreateButton path={RouterForum.create} />
-      )}
-
       <Stack spacing={"xl"}>
-        <ComponentForum_ViewForumProfile
-          auhtorSelectedData={auhtorSelectedData}
-          totalPosting={totalPosting}
-        />
+        {!dataUser ? (
+          <Forum_SkeletonForumku />
+        ) : (
+          <ComponentForum_ViewForumProfile
+            auhtorSelectedData={dataUser}
+            totalPosting={totalPosting}
+          />
+        )}
 
-        {_.isEmpty(data) ? (
-          <Stack align="center" justify="center" h={"80vh"}>
-            <IconSearchOff size={80} color="white" />
-            <Stack spacing={0} align="center">
-              <Text c={"white"} fw={"bold"} fz={"xs"}>
-                Tidak ada data
-              </Text>
-            </Stack>
-          </Stack>
+        {!dataPosting.length ? (
+          <Forum_SkeletonCard />
+        ) : _.isEmpty(dataPosting) ? (
+          <Forum_ComponentIsDataEmpty />
         ) : (
           // --- Main component --- //
           <ScrollOnly
-            height={data.length < 5 ? "75vh" : "100vh"}
+            height={dataPosting.length < 5 ? "75vh" : "100vh"}
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
               </Center>
             )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await forum_getAllPostingByAuhtorId({
-                page: activePage + 1,
-                authorId: auhtorSelectedData.id,
-              });
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
+            data={dataPosting}
+            setData={setDataPosting}
+            moreData={handleMoreData}
           >
             {(item) => (
               <ComponentForum_ForumkuMainCardView
                 data={item}
                 userLoginId={userLoginId}
                 onLoadData={(val) => {
-                  setData(val);
+                  setDataPosting(val);
                 }}
-                allData={data}
+                allData={dataPosting}
               />
             )}
           </ScrollOnly>
         )}
       </Stack>
+
+      {userLoginId === dataUser?.id && (
+        <ComponentGlobal_CreateButton path={RouterForum.create} />
+      )}
     </>
   );
 }

src/app_modules/forum/forumku/layout.tsx

@@ -7,10 +7,8 @@ import React from "react";
 
 export default function LayoutForum_Forumku({
   children,
-  username,
 }: {
   children: React.ReactNode;
-  username: string;
 }) {
   return (
     <>