fix tampilan forum

deksripsi:
- penambahan className untuk mempermudah css pada html

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

@@ -27,7 +27,11 @@ async function GET(request: Request, { params }: { params: { id: string } }) {
         },
         _count: {
           select: {
-            Forum_Komentar: true,
+            Forum_Komentar: {
+              where: {
+                isActive: true,
+              },
+            },
           },
         },
         ForumMaster_StatusPosting: true,
@@ -38,7 +42,7 @@ async function GET(request: Request, { params }: { params: { id: string } }) {
     const fixData = {
       ...data,
       count: data?._count.Forum_Komentar,
-    }
+    };
 
     return NextResponse.json({
       success: true,

src/app/dev/forum/detail/main-detail/[id]/page.tsx

@@ -1,12 +1,10 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import Forum_MainDetail from "@/app_modules/forum/detail/main_detail";
 import Forum_V3_MainDetail from "@/app_modules/forum/detail/v3_main_detail";
 
 export default async function Page() {
   const userLoginId = await funGetUserIdByToken();
   return (
     <>
-      {/* <Forum_MainDetail userLoginId={userLoginId as string} /> */}
       <Forum_V3_MainDetail userLoginId={userLoginId as string} />
     </>
   );

src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx

@@ -18,7 +18,7 @@ export function Comp_V3_SetInnerHTMLWithStiker({
   return (
     <>
       <div
-        // className={className}
+        className={className}
         style={{ ...baseStyle, ...style }}
         dangerouslySetInnerHTML={{ __html: props ?? "" }}
       />
@@ -42,10 +42,10 @@ export function Comp_V3_SetInnerHTMLWithStiker({
         margin-bottom: 4px;
       }
 
-      img {
+      // img {
-        max-width: 70px !important;
+      //   max-width: 70px !important;
-        max-height: 70px !important;
+      //   max-height: 70px !important;
-      }
+      // }
     `}
       </style>
     </>

src/app_modules/forum/component/detail_component/detail_list_komentar.tsx

@@ -1,20 +1,22 @@
 "use client";
 
-import { Box, Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
+import { MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Box, Spoiler, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 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";
-import { useShallowEffect } from "@mantine/hooks";
-import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
-import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_KomentarView({
   data,
+  listKomentar,
   setKomentar,
   postingId,
   userLoginId,
 }: {
   data: MODEL_FORUM_KOMENTAR;
+  listKomentar: MODEL_FORUM_KOMENTAR[];
   setKomentar: any;
   postingId: string;
   userLoginId: string;
@@ -51,10 +53,11 @@ export default function ComponentForum_KomentarView({
             userId={data?.Author?.id}
             komentarId={data?.id}
             isMoreButton={true}
-            setKomentar={setKomentar}
             postingId={postingId}
             userLoginId={userLoginId}
             profile={data.Author.Profile}
+            setKomentar={setKomentar}
+            listKomentar={listKomentar}
           />
 
           <Box

src/app_modules/forum/component/detail_component/detail_view.tsx

@@ -20,21 +20,21 @@ export default function ComponentForum_DetailForumView({
   userLoginId: string;
   onLoadData: (val: any) => void;
 }) {
-  // useShallowEffect(() => {
+  useShallowEffect(() => {
-  //   // Add custom style for stickers inside Quill editor
+    // Add custom style for stickers inside Quill editor
-  //   const style = document.createElement("style");
+    const style = document.createElement("style");
-  //   style.textContent = `
+    style.textContent = `
-  //       .chat-content img {
+        .chat-content img {
-  //       max-width: 70px !important;
+        max-width: 70px !important;
-  //       max-height: 70px !important;
+        max-height: 70px !important;
-  //     }
+      }
-  //   `;
+    `;
-  //   document.head.appendChild(style);
+    document.head.appendChild(style);
-  //   return () => {
+    return () => {
-  //     // Clean up when component unmounts
+      // Clean up when component unmounts
-  //     document.head.removeChild(style);
+      document.head.removeChild(style);
-  //   };
+    };
-  // }, []);
+  }, []);
 
   return (
     <>
@@ -61,7 +61,7 @@ export default function ComponentForum_DetailForumView({
               {data?.diskusi ? (
                 <Comp_V3_SetInnerHTMLWithStiker
                   props={data?.diskusi}
-                  // className="chat-content"
+                  className="chat-content"
                 />
               ) : (
                 ""

src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx

@@ -13,6 +13,7 @@ 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";
+import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
 
 export default function ComponentForum_KomentarAuthorNameOnHeader({
   userId,
@@ -24,6 +25,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
   postingId,
   userLoginId,
   profile,
+  listKomentar,
 }: {
   userId?: string;
   komentarId?: string;
@@ -34,6 +36,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
   postingId?: string;
   userLoginId: string;
   profile: MODEL_PROFILE;
+  listKomentar?: MODEL_FORUM_KOMENTAR[];
 }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
@@ -107,9 +110,10 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
                   <ComponentForum_KomentarButtonMore
                     userId={userId}
                     komentarId={komentarId}
-                    setKomentar={setKomentar}
                     postingId={postingId}
                     userLoginId={userLoginId}
+                    setKomentar={setKomentar}
+                    listKomentar={listKomentar}
                   />
                 </Group>
               ) : (

src/app_modules/forum/component/komentar_component/komentar_button_more.tsx

@@ -27,6 +27,9 @@ import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { forum_funDeleteKomentarById } from "../../fun/delete/fun_delete_komentar_by_id";
 import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
+import _ from "lodash";
 
 export default function ComponentForum_KomentarButtonMore({
   userId,
@@ -34,12 +37,14 @@ export default function ComponentForum_KomentarButtonMore({
   setKomentar,
   postingId,
   userLoginId,
+  listKomentar,
 }: {
   userId: any;
   komentarId: any;
   setKomentar?: any;
   postingId?: string;
   userLoginId: string;
+  listKomentar?: MODEL_FORUM_KOMENTAR[];
 }) {
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
@@ -151,6 +156,7 @@ export default function ComponentForum_KomentarButtonMore({
           setOpenDel={setOpenDel}
           setKomentar={setKomentar}
           postingId={postingId}
+          listKomentar={listKomentar}
         />
       </Modal>
 
@@ -166,29 +172,39 @@ function ButtonDelete({
   setOpenDel,
   setKomentar,
   postingId,
+  listKomentar,
 }: {
   komentarId?: string;
   setOpenDel: any;
   setKomentar?: any;
   postingId?: string;
+  listKomentar?: MODEL_FORUM_KOMENTAR[];
 }) {
   const [loading, setLoading] = useState(false);
 
-  if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
   async function onDelete() {
-    await forum_funDeleteKomentarById(komentarId as any).then(async (res) => {
+    try {
-      if (res.status === 200) {
+      setLoading(true);
-        await forum_funGetAllKomentarById(postingId as any).then((val) => {
+      await forum_funDeleteKomentarById(komentarId as any).then(async (res) => {
-          setKomentar(val);
+        if (res.status === 200) {
+          const cloneList = _.clone(listKomentar);
+          const filterData = cloneList?.filter(
+            (item) => item.id !== komentarId
+          );
+
+          setKomentar({ filterComment: filterData, triggerCount: true });
+
           setOpenDel(false);
-          setLoading(true);
           ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-        });
+        } else {
-      } else {
+          ComponentGlobal_NotifikasiPeringatan(res.message);
-        ComponentGlobal_NotifikasiGagal(res.message);
+        }
-      }
+      });
-    });
+    } catch (error) {
+      ComponentGlobal_NotifikasiGagal("Gagal menghapus data");
+    } finally {
+      setLoading(false);
+    }
   }
   return (
     <>
@@ -202,7 +218,7 @@ function ButtonDelete({
           </Button>
           <Button
             loaderPosition="center"
-            loading={loading ? true : false}
+            loading={loading}
             color="red"
             radius={"xl"}
             onClick={() => {
@@ -212,6 +228,7 @@ function ButtonDelete({
             Hapus
           </Button>
         </Group>
+        {/* {JSON.stringify(listKomentar, null, 2)} */}
       </Stack>
     </>
   );

src/app_modules/forum/detail/main_detail.tsx

@@ -1,194 +0,0 @@
-"use client";
-
-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";
-import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
-import "react-quill/dist/quill.bubble.css";
-import ComponentForum_DetailCreateKomentar from "../component/detail_component/detail_create_komentar";
-import ComponentForum_KomentarView from "../component/detail_component/detail_list_komentar";
-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({
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
-  const param = useParams<{ id: string }>();
-  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING | null>(
-    null
-  );
-  const [listKomentar, setListKomentar] = useState<
-    MODEL_FORUM_KOMENTAR[] | null
-  >(null);
-  const [activePage, setActivePage] = useState(1);
-  const [newKomentar, setNewKomentar] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useShallowEffect(() => {
-    handleLoadData();
-  }, []);
-
-  const handleLoadData = async () => {
-    try {
-      setIsLoading(true);
-      const response = await apiGetOneForumById({
-        id: param.id,
-      });
-
-      if (response) {
-        setDataPosting(response.data);
-      } else {
-        setDataPosting(null);
-      }
-    } catch (error) {
-      clientLogger.error("Error get data forum", error);
-      setDataPosting(null);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useShallowEffect(() => {
-    handleLoadDataKomentar();
-  }, [newKomentar]);
-
-  const handleLoadDataKomentar = async () => {
-    try {
-      const response = await apiGetKomentarForumById({
-        id: param.id,
-        page: `${activePage}`,
-      });
-
-      if (response.success) {
-        setListKomentar(response.data);
-      } else {
-        setListKomentar([]);
-      }
-    } catch (error) {
-      clientLogger.error("Error get data komentar forum", error);
-      setListKomentar([]);
-    }
-  };
-
-  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 === dataPosting?.id) {
-        const cloneData = _.clone(dataPosting);
-
-        // console.log(newData.data);
-        const updateData = {
-          ...cloneData,
-          ForumMaster_StatusPosting: {
-            id: newData.data.id,
-            status: newData.data.status,
-          },
-        };
-
-        setDataPosting(updateData as any);
-      }
-    });
-  }, [dataPosting]);
-
-  return (
-    <>
-      <Stack>
-        {!dataPosting ? (
-          <CustomSkeleton height={200} width={"100%"} />
-        ) : (
-          <ComponentForum_DetailForumView
-            data={dataPosting}
-            totalKomentar={dataPosting.count}
-            userLoginId={userLoginId}
-            onLoadData={(val) => {
-              setDataPosting(val);
-            }}
-          />
-        )}
-
-        {!dataPosting ? (
-          <Forum_SkeletonKomentar />
-        ) : (
-          (dataPosting?.ForumMaster_StatusPosting?.id as any) === 1 && (
-            <ComponentForum_DetailCreateKomentar
-              postingId={dataPosting?.id}
-              data={dataPosting}
-              userLoginId={userLoginId}
-              onSetNewKomentar={(val) => {
-                setNewKomentar(val);
-              }}
-            />
-          )
-        )}
-
-        {!listKomentar ? (
-          <Forum_SkeletonListKomentar />
-        ) : _.isEmpty(listKomentar) ? (
-          <ComponentGlobal_IsEmptyData text="Tidak ada komentar" />
-        ) : (
-          <Box>
-            <ScrollOnly
-              height={"70vh"}
-              renderLoading={() => (
-                <Center mt={"lg"}>
-                  <Loader color={"yellow"} />
-                </Center>
-              )}
-              data={listKomentar}
-              setData={setListKomentar as any}
-              moreData={handleMoreDataKomentar}
-            >
-              {(item) => (
-                <ComponentForum_KomentarView
-                  data={item}
-                  setKomentar={setListKomentar}
-                  postingId={dataPosting?.id as any}
-                  userLoginId={userLoginId}
-                />
-              )}
-            </ScrollOnly>
-          </Box>
-        )}
-      </Stack>
-    </>
-  );
-}

src/app_modules/forum/detail/v3_main_detail.tsx

@@ -33,6 +33,7 @@ export default function Forum_V3_MainDetail({
   const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING | null>(
     null
   );
+  const [countNewComment, setCountNewComment] = useState(false);
   const [listKomentar, setListKomentar] = useState<
     MODEL_FORUM_KOMENTAR[] | null
   >(null);
@@ -114,6 +115,22 @@ export default function Forum_V3_MainDetail({
     }
   };
 
+  async function handlerCountComment({
+    count,
+    trigger,
+  }: {
+    count: number;
+    trigger: boolean;
+  }) {
+    if (trigger && dataPosting) {
+      const cloneData = _.clone(dataPosting);
+      const newCount = count - 1;
+      cloneData.count = newCount;
+      setDataPosting(cloneData);
+      setCountNewComment(false);
+    }
+  }
+
   useShallowEffect(() => {
     mqtt_client.subscribe("Forum_detail_ganti_status");
 
@@ -187,7 +204,14 @@ export default function Forum_V3_MainDetail({
               {(item) => (
                 <ComponentForum_KomentarView
                   data={item}
-                  setKomentar={setListKomentar}
+                  listKomentar={listKomentar as any}
+                  setKomentar={(val: any) => (
+                    setListKomentar(val.filterComment as any),
+                    handlerCountComment({
+                      count: dataPosting?.count as number,
+                      trigger: val.triggerCount,
+                    })
+                  )}
                   postingId={dataPosting?.id as any}
                   userLoginId={userLoginId}
                 />

src/app_modules/forum/index.ts

@@ -5,7 +5,6 @@ import Forum_Forumku from "./forumku";
 import Forum_Create from "./create";
 import LayoutForum_Create from "./create/layout";
 import LayoutForum_Forumku from "./forumku/layout";
-import Forum_MainDetail from "./detail/main_detail";
 import LayoutForum_Detail from "./detail/layout";
 import Forum_EditPosting from "./edit/posting";
 import LayoutForum_EditPosting from "./edit/posting/layout";
@@ -28,7 +27,6 @@ export {
   Forum_Create,
   LayoutForum_Create,
   LayoutForum_Forumku,
-  Forum_MainDetail as Forum_Detail,
   LayoutForum_Detail,
   Forum_EditPosting,
   LayoutForum_EditPosting,