fix forum

deskripsi:
- fix forumku , server action to API

src/app/api/forum/forumku/[id]/route.ts

@@ -0,0 +1,122 @@
+import { NextResponse } from "next/server";
+
+export { GET };
+
+async function GET(request: Request, { params }: { params: { id: string } }) {
+  try {
+    let fixData;
+    const { id } = params;
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get("page");
+    const takeData = 5;
+    const skipData = Number(page) * takeData - takeData;
+
+    console.log("id", id)
+    console.log("page >", page)
+
+    if (!page) {
+      fixData = await prisma.forum_Posting.findMany({
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          authorId: id,
+          isActive: true,
+        },
+        select: {
+          id: true,
+          diskusi: true,
+          createdAt: true,
+          isActive: true,
+          authorId: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                  imageId: true,
+                },
+              },
+            },
+          },
+          Forum_Komentar: {
+            where: {
+              isActive: true,
+            },
+          },
+          ForumMaster_StatusPosting: {
+            select: {
+              id: true,
+              status: true,
+            },
+          },
+          forumMaster_StatusPostingId: true,
+        },
+      });
+    } else {
+      fixData = await prisma.forum_Posting.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          authorId: id,
+          isActive: true,
+        },
+        select: {
+          id: true,
+          diskusi: true,
+          createdAt: true,
+          isActive: true,
+          authorId: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: {
+                select: {
+                  id: true,
+                  name: true,
+                  imageId: true,
+                },
+              },
+            },
+          },
+          Forum_Komentar: {
+            where: {
+              isActive: true,
+            },
+          },
+          ForumMaster_StatusPosting: {
+            select: {
+              id: true,
+              status: true,
+            },
+          },
+          forumMaster_StatusPostingId: true,
+        },
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Berhasil mendapatkan data",
+      data: fixData,
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data",
+        error: (error as Error).message,
+      },
+      {
+        status: 500,
+      }
+    );
+  }
+}

src/app/dev/forum/forumku/[id]/layout.tsx

@@ -1,22 +1,14 @@
 import { LayoutForum_Forumku } from "@/app_modules/forum";
-import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
 import React from "react";
 
 export default async function Layout({
   children,
-  params,
 }: {
   children: React.ReactNode;
-  params: { id: string };
 }) {
-  const authorId = params.id;
-  const dataAuthor = await user_getOneByUserId(authorId);
-
   return (
     <>
-      <LayoutForum_Forumku username={dataAuthor?.username as any}>
-        {children}
-      </LayoutForum_Forumku>
+      <LayoutForum_Forumku>{children}</LayoutForum_Forumku>
     </>
   );
 }

src/app/dev/forum/forumku/[id]/page.tsx

@@ -34,8 +34,6 @@ export default async function Page({ params }: { params: { id: string } }) {
   return (
     <>
       <Forum_Forumku
-        auhtorSelectedData={auhtorSelectedData as any}
-        dataPosting={dataPosting as any}
         totalPosting={totalPosting}
         userLoginId={userLoginId as any}
       />

src/app/zCoba/skeleton/page.tsx

@@ -6,7 +6,7 @@ import {
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { Button, Grid, Skeleton, Stack } from "@mantine/core";
+import { Button, Center, Grid, Group, Skeleton, Stack } from "@mantine/core";
 import Link from "next/link";
 
 export default function Voting_ComponentSkeletonViewPuh() {
@@ -15,13 +15,34 @@ export default function Voting_ComponentSkeletonViewPuh() {
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
       >
-        <Stack spacing={"xl"} p={"sm"}>
+        <Stack>
+          <Center>
+            <CustomSkeleton height={100} width={100} circle />
+          </Center>
+
+          <Grid grow>
+            <Grid.Col span={6}>
+              <Stack spacing={"xs"}>
+                <CustomSkeleton height={20} width={"80%"} />
+                <CustomSkeleton height={20} width={"80%"} />
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={6}>
+              <Group position="right">
+                <CustomSkeleton height={50} width={"80%"} radius={"xl"} />
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+
+        {/* <Stack spacing={"xl"} p={"sm"}>
           {Array.from({ length: 4 }).map((_, i) => (
             <CustomSkeleton key={i} height={50} width={"100%"} />
           ))}
           <CustomSkeleton height={100} width={"100%"} />
           <CustomSkeleton radius="xl" height={50} width={"100%"} />
-        </Stack>
+        </Stack> */}
       </UIGlobal_LayoutTamplate>
     </>
   );

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 (
     <>