creare stiker for forum

2025-04-24 14:11:26 +08:00
parent a05368520e
commit 5b3c99be39
4 changed files with 68 additions and 157 deletions
--- a/src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
+++ b/src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
@@ -24,7 +24,10 @@ import {
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
-import { MODEL_FORUM_POSTING } from "../../model/interface";
+import {
+  MODEL_FORUM_KOMENTAR,
+  MODEL_FORUM_POSTING,
+} from "../../model/interface";
 import dynamic from "next/dynamic";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { listStiker } from "@/app_modules/_global/lib/stiker";
@@ -58,12 +61,12 @@ export default function Forum_V3_CreateKomentar({
  postingId,
  data,
  userLoginId,
-  onSetNewKomentar,
+  onSetLoadData,
 }: {
  postingId: string;
  data: MODEL_FORUM_POSTING;
  userLoginId: string;
-  onSetNewKomentar: (val: boolean) => void;
+  onSetLoadData: (val: string) => void;
 }) {
  const [loading, setLoading] = useState(false);
  const [isComment, setIsComment] = useState(false);
@@ -85,8 +88,15 @@ export default function Forum_V3_CreateKomentar({
        postingId,
        editorContent
      );
+
      if (createComment.status === 201) {
-        onSetNewKomentar(true);
+        const newCommentar: MODEL_FORUM_KOMENTAR | any = {
+          komentar: editorContent,
+          Author: createComment.data?.Author,
+          createdAt: data.createdAt,
+          id: createComment.data?.id,
+        };
+        onSetLoadData(newCommentar);
        setEditorContent("");
        ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);

@@ -114,12 +124,12 @@ export default function Forum_V3_CreateKomentar({
          }
        }
      } else {
-        setLoading(false);
        ComponentGlobal_NotifikasiGagal(createComment.message);
      }
    } catch (error) {
-      setLoading(false);
      clientLogger.error("Error create komentar forum", error);
+    } finally {
+      setLoading(false);
    }
  }

@@ -215,8 +225,11 @@ export default function Forum_V3_CreateKomentar({
          <Stack>
            <Paper p="sm" withBorder shadow="lg" mah={300} bg={MainColor.white}>
              <Group position="right">
-                <ActionIcon onClick={() => setIsComment(false)} variant="transparent">
-                  <IconX size={25} color={MainColor.darkblue}/>
+                <ActionIcon
+                  onClick={() => setIsComment(false)}
+                  variant="transparent"
+                >
+                  <IconX size={25} color={MainColor.darkblue} />
                </ActionIcon>
              </Group>
              <ScrollArea h={250}>
--- a/src/app_modules/forum/component/detail_component/comp_create_commentar.tsx
+++ b/src/app_modules/forum/component/detail_component/comp_create_commentar.tsx
@@ -1,133 +0,0 @@
-"use client";
-
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
-import { Stack, Paper, Group, Button, Divider } from "@mantine/core";
-import { useState } from "react";
-import dynamic from "next/dynamic";
-const ReactQuill = dynamic(
-  () => {
-    return import("react-quill");
-  },
-  { ssr: false }
-);
-import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
-import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
-import { MODEL_FORUM_POSTING } from "../../model/interface";
-import { useParams, 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 Forum_CompCreateComment({
-  data,
-  userLoginId,
-  onSetNewKomentar,
-}: {
-  data: MODEL_FORUM_POSTING;
-  userLoginId: string;
-  onSetNewKomentar: (val: string) => void;
-}) {
-  const param = useParams<{ id: string }>();
-  const postingId = param.id;
-  const [value, setValue] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [isEmpty, setIsEmpty] = useState(false);
-
-  async function onComment() {
-    if (value.length > 500) {
-      return null;
-    }
-
-    try {
-      setLoading(true);
-      const createComment = await forum_funCreateKomentar(postingId, value);
-      if (createComment.status === 201) {
-        onSetNewKomentar(value);
-        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",
-          };
-
-          const createNotifikasi = await notifikasiToUser_funCreate({
-            data: dataNotif as any,
-          });
-
-          if (createNotifikasi.status === 201) {
-            mqtt_client.publish(
-              "USER",
-              JSON.stringify({
-                userId: dataNotif.userId,
-                count: 1,
-              })
-            );
-          }
-        }
-      } else {
-        setLoading(false);
-        ComponentGlobal_NotifikasiGagal(createComment.message);
-      }
-    } catch (error) {
-      setLoading(false);
-      clientLogger.error("Error create komentar forum", error);
-    }
-  }
-
-  return (
-    <>
-      <Stack>
-        <Paper withBorder shadow="lg">
-          <ReactQuill
-            value={value}
-            theme="bubble"
-            placeholder="Ketik komentar anda?"
-            onChange={(val) => {
-              setValue(val);
-            }}
-            style={{
-              overflowY: "auto",
-              maxHeight: 100,
-              minHeight: 50,
-            }}
-          />
-        </Paper>
-
-        <Group position="apart">
-          <ComponentGlobal_InputCountDown
-            maxInput={500}
-            lengthInput={value.length}
-          />
-          <Button
-            style={{
-              transition: "0.5s",
-            }}
-            disabled={
-              value === "" || value === "<p><br></p>" || value.length > 500
-                ? true
-                : false
-            }
-            bg={MainColor.yellow}
-            color={"yellow"}
-            c="black"
-            loaderPosition="center"
-            loading={loading}
-            radius={"xl"}
-            onClick={() => onComment()}
-          >
-            Balas
-          </Button>
-        </Group>
-      </Stack>
-    </>
-  );
-}
--- a/src/app_modules/forum/detail/v3_main_detail.tsx
+++ b/src/app_modules/forum/detail/v3_main_detail.tsx
@@ -12,15 +12,15 @@ import { useParams } from "next/navigation";
 import { useState } from "react";
 import "react-quill/dist/quill.bubble.css";
 import {
-    apiGetKomentarForumById,
-    apiGetOneForumById,
+  apiGetKomentarForumById,
+  apiGetOneForumById,
 } from "../component/api_fetch_forum";
 import Forum_V3_CreateKomentar from "../component/detail_component/comp_V3_create.comment";
 import ComponentForum_KomentarView from "../component/detail_component/detail_list_komentar";
 import ComponentForum_DetailForumView from "../component/detail_component/detail_view";
 import {
-    Forum_SkeletonKomentar,
-    Forum_SkeletonListKomentar,
+  Forum_SkeletonKomentar,
+  Forum_SkeletonListKomentar,
 } from "../component/skeleton_view";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";

@@ -37,7 +37,6 @@ export default function Forum_V3_MainDetail({
    MODEL_FORUM_KOMENTAR[] | null
  >(null);
  const [activePage, setActivePage] = useState(1);
-  const [newKomentar, setNewKomentar] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  useShallowEffect(() => {
@@ -66,7 +65,7 @@ export default function Forum_V3_MainDetail({

  useShallowEffect(() => {
    handleLoadDataKomentar();
-  }, [newKomentar]);
+  }, []);

  const handleLoadDataKomentar = async () => {
    try {
@@ -86,7 +85,9 @@ export default function Forum_V3_MainDetail({
    }
  };

-  const handleMoreDataKomentar = async () => {
+  const handleMoreDataKomentar = async (
+    currentKomentarList: MODEL_FORUM_KOMENTAR[]
+  ): Promise<MODEL_FORUM_KOMENTAR[]> => {
    try {
      const nextPage = activePage + 1;
      const response = await apiGetKomentarForumById({
@@ -96,13 +97,20 @@ export default function Forum_V3_MainDetail({

      if (response.success) {
        setActivePage(nextPage);
-        return response.data;
+        const filteredData = response.data.filter(
+          (itemBaru: MODEL_FORUM_KOMENTAR) =>
+            !currentKomentarList.some(
+              (itemLama: MODEL_FORUM_KOMENTAR) => itemLama.id === itemBaru.id
+            )
+        );
+
+        return filteredData;
      } else {
-        return null;
+        return [];
      }
    } catch (error) {
      clientLogger.error("Error get data komentar forum", error);
-      return null;
+      return [];
    }
  };

@@ -131,7 +139,7 @@ export default function Forum_V3_MainDetail({
  return (
    <>
      <Stack>
-        {!dataPosting ? (
+        {!dataPosting || isLoading ? (
          <CustomSkeleton height={200} width={"100%"} />
        ) : (
          <ComponentForum_DetailForumView
@@ -152,8 +160,8 @@ export default function Forum_V3_MainDetail({
              postingId={dataPosting?.id}
              data={dataPosting}
              userLoginId={userLoginId}
-              onSetNewKomentar={(val) => {
-                setNewKomentar(val);
+              onSetLoadData={(val) => {
+                setListKomentar((prev: any) => [val, ...prev]);
              }}
            />
          )
@@ -172,9 +180,9 @@ export default function Forum_V3_MainDetail({
                  <Loader color={"yellow"} />
                </Center>
              )}
-              data={listKomentar}
+              data={listKomentar || []}
              setData={setListKomentar as any}
-              moreData={handleMoreDataKomentar}
+              moreData={() => handleMoreDataKomentar(listKomentar as any)}
            >
              {(item) => (
                <ComponentForum_KomentarView
--- a/src/app_modules/forum/fun/create/fun_create_komentar.tsx
+++ b/src/app_modules/forum/fun/create/fun_create_komentar.tsx
@@ -17,11 +17,34 @@ export async function forum_funCreateKomentar(
        forum_PostingId: postingId,
        authorId: userLoginId,
      },
+      select: {
+        id: true,
+        isActive: true,
+        komentar: true,
+        createdAt: true,
+        Author: {
+          select: {
+            id: true,
+            username: true,
+            Profile: {
+              select: {
+                name: true,
+                imageId: true,
+              },
+            },
+          },
+        },
+        authorId: true,
+      },
    });

    if (!create) return { status: 400, message: "Gagal menambahkan komentar" };

-    return { status: 201, message: "Berhasil menambahkan komentar" };
+    return {
+      status: 201,
+      message: "Berhasil menambahkan komentar",
+      data: create,
+    };
  } catch (error) {
    console.log(error);
    return {