fix forum

deskripsi: - fix postingan dan komentar
2025-02-18 16:25:23 +08:00
parent c9f766314c
commit 4318ea4890
16 changed files with 397 additions and 191 deletions
--- a/src/app_modules/forum/component/api_fetch_forum.ts
+++ b/src/app_modules/forum/component/api_fetch_forum.ts
@@ -1,4 +1,9 @@
-export { apiGetAllForum, apiGetOneForumById, apiGetForumkuById };
+export {
+  apiGetAllForum,
+  apiGetOneForumById,
+  apiGetForumkuByUserId as apiGetForumkuById,
+  apiGetKomentarForumById,
+};

 const apiGetAllForum = async ({
  page,
@@ -72,7 +77,7 @@ const apiGetOneForumById = async ({ id }: { id: string }) => {
  }
 };

-const apiGetForumkuById = async ({
+const apiGetForumkuByUserId = async ({
  id,
  page,
 }: {
@@ -111,3 +116,37 @@ const apiGetForumkuById = async ({
    throw error; // Re-throw the error to handle it in the calling function
  }
 };
+
+const apiGetKomentarForumById = 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 nextPage = `?page=${page}`;
+    const response = await fetch(`/api/forum/${id}/komentar${nextPage}`, {
+      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
+  }
+};
--- a/src/app_modules/forum/component/detail_component/detail_create_komentar.tsx
+++ b/src/app_modules/forum/component/detail_component/detail_create_komentar.tsx
@@ -19,16 +19,20 @@ import { MODEL_FORUM_POSTING } from "../../model/interface";
 import { useRouter } from "next/navigation";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import mqtt_client from "@/util/mqtt_client";
+import backendLogger from "@/util/backendLogger";
+import { clientLogger } from "@/util/clientLogger";
 export default function ComponentForum_DetailCreateKomentar({
  postingId,
  onSetKomentar,
  data,
  userLoginId,
+  onSetNewKomentar,
 }: {
  postingId: string;
  onSetKomentar: (val: any) => void;
  data: MODEL_FORUM_POSTING;
  userLoginId: string;
+  onSetNewKomentar: (val: boolean) => void;
 }) {
  const router = useRouter();
  const [value, setValue] = useState("");
@@ -40,45 +44,52 @@ export default function ComponentForum_DetailCreateKomentar({
      return null;
    }

-    const createComment = await forum_funCreateKomentar(postingId, value);
-    if (createComment.status === 201) {
-      // const loadKomentar = await forum_funGetAllKomentarById(data.id);
+    try {
+      setLoading(true);
+      const createComment = await forum_funCreateKomentar(postingId, value);
+      if (createComment.status === 201) {
+        // const loadData = await forum_funGetAllKomentarById({
+        //   postingId: data.id,
+        //   page: 1,
+        // });
+        // onSetKomentar(loadData);

-      const loadData = await forum_funGetAllKomentarById({
-        postingId: data.id,
-        page: 1,
-      });
-      onSetKomentar(loadData);
+        onSetNewKomentar(true);
+        setValue("");
+        setIsEmpty(true);
+        ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);

-      setValue("");
-      setIsEmpty(true);
-      ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
+        if (userLoginId !== data.Author.id) {
+          const dataNotif = {
+            appId: data.id,
+            userId: data.authorId,
+            pesan: value,
+            kategoriApp: "FORUM",
+            title: "Komentar baru",
+          };

-      if (userLoginId !== data.Author.id) {
-        const dataNotif = {
-          appId: data.id,
-          userId: data.authorId,
-          pesan: value,
-          kategoriApp: "FORUM",
-          title: "Komentar baru",
-        };
+          const createNotifikasi = await notifikasiToUser_funCreate({
+            data: dataNotif as any,
+          });

-        const createNotifikasi = await notifikasiToUser_funCreate({
-          data: dataNotif as any,
-        });
-
-        if (createNotifikasi.status === 201) {
-          mqtt_client.publish(
-            "USER",
-            JSON.stringify({
-              userId: dataNotif.userId,
-              count: 1,
-            })
-          );
+          if (createNotifikasi.status === 201) {
+            mqtt_client.publish(
+              "USER",
+              JSON.stringify({
+                userId: dataNotif.userId,
+                count: 1,
+              })
+            );
+          }
        }
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(createComment.message);
      }
-    } else {
-      ComponentGlobal_NotifikasiGagal(createComment.message);
+    } catch (error) {
+      setLoading(false);
+
+      clientLogger.error("Error create komentar forum", error);
    }
  }

@@ -117,8 +128,9 @@ export default function ComponentForum_DetailCreateKomentar({
            }
            bg={MainColor.yellow}
            color={"yellow"}
+            c="black"
            loaderPosition="center"
-            loading={loading ? true : false}
+            loading={loading}
            radius={"xl"}
            onClick={() => onComment()}
          >
--- a/src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
+++ b/src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
@@ -1,14 +1,9 @@
 "use client";

-import {
-  Card,
-  Divider,
-  Spoiler,
-  Stack,
-  Text
-} from "@mantine/core";
+import { Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
 import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
 import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";

 export default function ComponentForum_KomentarView({
  data,
@@ -23,65 +18,34 @@ export default function ComponentForum_KomentarView({
 }) {
  return (
    <>
-      <Card mb={"xs"} bg={"transparent"}>
-        <Card.Section>
-          <ComponentForum_KomentarAuthorNameOnHeader
-            tglPublish={data?.createdAt}
-            userId={data?.Author?.id}
-            komentarId={data?.id}
-            isMoreButton={true}
-            setKomentar={setKomentar}
-            postingId={postingId}
-            userLoginId={userLoginId}
-            profile={data.Author.Profile}
-          />
-        </Card.Section>
-        <Card.Section sx={{ zIndex: 0 }} p={"sm"}>
-          <Stack spacing={"xs"}>
-            <Text fz={"sm"} lineClamp={4} c={"white"}>
-              {data.komentar ? (
-                <Spoiler
-                  hideLabel="sembunyikan"
-                  maxHeight={100}
-                  showLabel="tampilkan"
-                >
-                  <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
-                </Spoiler>
-              ) : (
-                ""
-              )}
-            </Text>
-          </Stack>
-        </Card.Section>
+      <ComponentGlobal_CardStyles>
+        <ComponentForum_KomentarAuthorNameOnHeader
+          tglPublish={data?.createdAt}
+          userId={data?.Author?.id}
+          komentarId={data?.id}
+          isMoreButton={true}
+          setKomentar={setKomentar}
+          postingId={postingId}
+          userLoginId={userLoginId}
+          profile={data.Author.Profile}
+        />

-        <Card.Section>
-          <Stack>
-            <Divider />
-          </Stack>
-        </Card.Section>
-      </Card>
-
-      {/* <Stack>
-        {_.isEmpty(data) ? (
-          <Center>
-            <Text fw={"bold"} fz={"xs"} c={"white"}>
-              Belum ada komentar
-            </Text>
-          </Center>
-        ) : (
-          <Box>
-            <Center>
-              <Text fw={"bold"} fz={"xs"} c={"white"}>
-                {" "}
-                Komentar
-              </Text>
-            </Center>
-            {data.map((e, i) => (
-             
-            ))}
-          </Box>
-        )}
-      </Stack> */}
+        <Stack spacing={"xs"} sx={{ zIndex: 0 }} p={"sm"}>
+          <Text fz={"sm"} lineClamp={4} c={"white"}>
+            {data.komentar ? (
+              <Spoiler
+                hideLabel="sembunyikan"
+                maxHeight={100}
+                showLabel="tampilkan"
+              >
+                <div dangerouslySetInnerHTML={{ __html: data.komentar }} />
+              </Spoiler>
+            ) : (
+              ""
+            )}
+          </Text>
+        </Stack>
+      </ComponentGlobal_CardStyles>
    </>
  );
 }
--- a/src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx
+++ b/src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx
@@ -12,6 +12,7 @@ import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { data } from "autoprefixer";
 import { MODEL_PROFILE } from "@/app_modules/katalog/profile/model/interface";
+import moment from "moment";

 export default function ComponentForum_KomentarAuthorNameOnHeader({
  userId,
@@ -84,10 +85,11 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
              <Group spacing={3}>
                <Text c={"white"} fz={"sm"}>
                  {tglPublish
-                    ? tglPublish.toLocaleDateString(["id-ID"], {
+                    ? new Intl.DateTimeFormat("id-ID", {
                        day: "numeric",
                        month: "short",
-                      })
+                        year: "numeric",
+                      }).format(new Date(tglPublish))
                    : new Date().toLocaleDateString(["id-ID"], {
                        day: "numeric",
                        month: "short",
--- a/src/app_modules/forum/component/skeleton_view.tsx
+++ b/src/app_modules/forum/component/skeleton_view.tsx
@@ -1,7 +1,12 @@
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Center, Grid, Group, Stack } from "@mantine/core";

-export { Forum_SkeletonCard, Forum_SkeletonForumku };
+export {
+  Forum_SkeletonCard,
+  Forum_SkeletonForumku,
+  Forum_SkeletonKomentar,
+  Forum_SkeletonListKomentar,
+};

 function Forum_SkeletonCard() {
  return (
@@ -14,7 +19,7 @@ function Forum_SkeletonCard() {
  );
 }

-function Forum_SkeletonForumku(){
+function Forum_SkeletonForumku() {
  return (
    <>
      <Stack spacing={"xl"}>
@@ -40,3 +45,29 @@ function Forum_SkeletonForumku(){
    </>
  );
 }
+
+function Forum_SkeletonKomentar() {
+  return (
+    <>
+      <Stack mt={"lg"}>
+        <CustomSkeleton height={50} />
+        <Group position="apart">
+          <CustomSkeleton height={15} width={"20%"} radius={"xl"} />
+          <CustomSkeleton height={40} width={"30%"} radius={"xl"} />
+        </Group>
+      </Stack>
+    </>
+  );
+}
+
+function Forum_SkeletonListKomentar() {
+  return (
+    <>
+      <Stack>
+        {Array.from(new Array(2)).map((e, i) => (
+          <CustomSkeleton key={i} height={100} />
+        ))}
+      </Stack>
+    </>
+  );
+}
--- a/src/app_modules/forum/detail/main_detail.tsx
+++ b/src/app_modules/forum/detail/main_detail.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
+import { Box, Center, Group, Loader, Stack, TextInput } from "@mantine/core";
 import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
 import mqtt_client from "@/util/mqtt_client";
@@ -12,41 +12,99 @@ import ComponentForum_KomentarView from "../component/detail_component/detail_li
 import ComponentForum_DetailForumView from "../component/detail_component/detail_view";
 import { ScrollOnly } from "next-scroll-loader";
 import { forum_funGetAllKomentarById } from "../fun/get/get_all_komentar_by_id";
+import {
+  apiGetKomentarForumById,
+  apiGetOneForumById,
+} from "../component/api_fetch_forum";
+import { useParams } from "next/navigation";
+import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import {
+  Forum_SkeletonKomentar,
+  Forum_SkeletonListKomentar,
+} from "../component/skeleton_view";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";

 export default function Forum_MainDetail({
-  dataPosting,
-  listKomentar,
  userLoginId,
  countKomentar,
 }: {
-  dataPosting: MODEL_FORUM_POSTING;
-  listKomentar: MODEL_FORUM_KOMENTAR[];
  userLoginId: string;
  countKomentar: number;
 }) {
-  const [data, setData] = useState(dataPosting);
-  const [lsKomentar, setLsKomentar] = useState(listKomentar);
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_FORUM_POSTING | null>(null);
+  const [lsKomentar, setLsKomentar] = useState<MODEL_FORUM_KOMENTAR[]>([]);
  const [activePage, setActivePage] = useState(1);
+  const [newKomentar, setNewKomentar] = useState(false);

-  // useShallowEffect(() => {
-  //   onLoadKomentar({
-  //     onLoad(val) {
-  //       setKomentar(val);
-  //     },
-  //   });
-  // }, [setKomentar]);
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);

-  // async function onLoadKomentar({ onLoad }: { onLoad: (val: any) => void }) {
-  //   const loadKomentar = await forum_getKomentarById(data.id);
-  //   onLoad(loadKomentar);
-  // }
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneForumById({
+        id: param.id,
+      });
+
+      if (response) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum", error);
+      setData(null);
+    }
+  };
+
+  useShallowEffect(() => {
+    handleLoadDataKomentar();
+  }, [newKomentar]);
+
+  const handleLoadDataKomentar = async () => {
+    try {
+      const response = await apiGetKomentarForumById({
+        id: param.id,
+        page: `${activePage}`,
+      });
+
+      if (response.success) {
+        setLsKomentar(response.data);
+      } else {
+        setLsKomentar([]);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data komentar forum", error);
+      setLsKomentar([]);
+    }
+  };
+
+  const handleMoreDataKomentar = async () => {
+    try {
+      const nextPage = activePage + 1;
+      const response = await apiGetKomentarForumById({
+        id: param.id,
+        page: `${nextPage}`,
+      });
+
+      if (response.success) {
+        setActivePage(nextPage);
+        return response.data;
+      } else {
+        return null;
+      }
+    } catch (error) {
+      clientLogger.error("Error get data komentar forum", error);
+      return null;
+    }
+  };

  useShallowEffect(() => {
    mqtt_client.subscribe("Forum_detail_ganti_status");

    mqtt_client.on("message", (topic: any, message: any) => {
      const newData = JSON.parse(message.toString());
-      if (newData.id === data.id) {
+      if (newData.id === data?.id) {
        const cloneData = _.clone(data);

        // console.log(newData.data);
@@ -66,58 +124,65 @@ export default function Forum_MainDetail({
  return (
    <>
      <Stack>
-        <ComponentForum_DetailForumView
-          data={data}
-          totalKomentar={countKomentar}
-          userLoginId={userLoginId}
-          onLoadData={(val) => {
-            setData(val);
-          }}
-        />
-
-        {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-          <ComponentForum_DetailCreateKomentar
-            postingId={dataPosting?.id}
-            onSetKomentar={(val) => {
-              setLsKomentar(val);
-            }}
-            data={data}
-            userLoginId={userLoginId}
-          />
+        {!data ? (
+          <CustomSkeleton height={200} width={"100%"} />
        ) : (
-          ""
+          <ComponentForum_DetailForumView
+            data={data}
+            totalKomentar={countKomentar}
+            userLoginId={userLoginId}
+            onLoadData={(val) => {
+              setData(val);
+            }}
+          />
        )}

-        <Box>
-          <ScrollOnly
-            height={"60vh"}
-            renderLoading={() => (
-              <Center mt={"lg"}>
-                <Loader color={"yellow"} />
-              </Center>
-            )}
-            data={lsKomentar}
-            setData={setLsKomentar}
-            moreData={async () => {
-              const loadData = await forum_funGetAllKomentarById({
-                postingId: data.id,
-                page: activePage + 1,
-              });
-              setActivePage((val) => val + 1);
+        {!data ? (
+          <Forum_SkeletonKomentar />
+        ) : (
+          (data?.ForumMaster_StatusPosting?.id as any) === 1 && (
+            <ComponentForum_DetailCreateKomentar
+              postingId={data?.id}
+              onSetKomentar={(val) => {
+                setLsKomentar(val);
+              }}
+              data={data}
+              userLoginId={userLoginId}
+              onSetNewKomentar={(val) => {
+                setNewKomentar(val);
+              }}
+            />
+          )
+        )}

-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentForum_KomentarView
-                data={item}
-                setKomentar={setLsKomentar}
-                postingId={data?.id}
-                userLoginId={userLoginId}
-              />
-            )}
-          </ScrollOnly>
-        </Box>
+        {!lsKomentar.length ? (
+          <Forum_SkeletonListKomentar />
+        ) : _.isEmpty(lsKomentar) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <Box >
+            <ScrollOnly
+              height={"60vh"}
+              renderLoading={() => (
+                <Center mt={"lg"}>
+                  <Loader color={"yellow"} />
+                </Center>
+              )}
+              data={lsKomentar}
+              setData={setLsKomentar}
+              moreData={handleMoreDataKomentar}
+            >
+              {(item) => (
+                <ComponentForum_KomentarView
+                  data={item}
+                  setKomentar={setLsKomentar}
+                  postingId={data?.id as any}
+                  userLoginId={userLoginId}
+                />
+              )}
+            </ScrollOnly>
+          </Box>
+        )}
      </Stack>
    </>
  );