From 5b3c99be393aa323c40ae7e815431d725fd604a6 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Thu, 24 Apr 2025 14:11:26 +0800 Subject: [PATCH] creare stiker for forum --- .../comp_V3_create.comment.tsx | 29 ++-- .../comp_create_commentar.tsx | 133 ------------------ .../forum/detail/v3_main_detail.tsx | 38 +++-- .../forum/fun/create/fun_create_komentar.tsx | 25 +++- 4 files changed, 68 insertions(+), 157 deletions(-) delete mode 100644 src/app_modules/forum/component/detail_component/comp_create_commentar.tsx diff --git 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 index e25a4c71..853c08bc 100644 --- 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({ - setIsComment(false)} variant="transparent"> - + setIsComment(false)} + variant="transparent" + > + diff --git a/src/app_modules/forum/component/detail_component/comp_create_commentar.tsx b/src/app_modules/forum/component/detail_component/comp_create_commentar.tsx deleted file mode 100644 index e3033ee6..00000000 --- a/src/app_modules/forum/component/detail_component/comp_create_commentar.tsx +++ /dev/null @@ -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 ( - <> - - - { - setValue(val); - }} - style={{ - overflowY: "auto", - maxHeight: 100, - minHeight: 50, - }} - /> - - - - - - - - - ); -} diff --git a/src/app_modules/forum/detail/v3_main_detail.tsx b/src/app_modules/forum/detail/v3_main_detail.tsx index a8d9a5f8..2bf3cf34 100644 --- 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 => { 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 ( <> - {!dataPosting ? ( + {!dataPosting || isLoading ? ( ) : ( { - setNewKomentar(val); + onSetLoadData={(val) => { + setListKomentar((prev: any) => [val, ...prev]); }} /> ) @@ -172,9 +180,9 @@ export default function Forum_V3_MainDetail({ )} - data={listKomentar} + data={listKomentar || []} setData={setListKomentar as any} - moreData={handleMoreDataKomentar} + moreData={() => handleMoreDataKomentar(listKomentar as any)} > {(item) => (