From a338dafc80aa8da8a1c42878e6426d369cc90c57 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Fri, 25 Apr 2025 17:51:30 +0800 Subject: [PATCH] fix stiker on forum --- src/app/dev/forum/edit/posting/[id]/page.tsx | 5 +- src/app_modules/_global/lib/stiker.ts | 2 +- .../lib/stiker/comp_V3_text_editor_stiker.tsx | 45 ++++ .../lib/stiker/comp_button_sticker.tsx | 56 +++++ .../lib/stiker/react_quill_dynamix.tsx | 20 ++ .../stiker/react_quill_format_for_stiker.ts | 61 +++++ src/app_modules/_global/ui/ui_modal.tsx | 40 ++-- .../button/button_create_posting.tsx | 65 ++++++ .../button/button_update_posting.tsx | 64 ++++++ .../comp_V3_create.comment.tsx | 122 ++-------- .../detail_component/detail_header.tsx | 1 + .../forumku_component/forumku_more_button.tsx | 1 + .../forumku_component/forumku_view.tsx | 23 +- .../komentar_button_more.tsx | 3 +- .../main_component/card_more_button.tsx | 2 +- src/app_modules/forum/create/V3_create.tsx | 209 ++---------------- .../forum/edit/posting/V3_edit_posting.tsx | 116 ++++++++++ src/app_modules/forum/forumku/index.tsx | 12 +- 18 files changed, 531 insertions(+), 316 deletions(-) create mode 100644 src/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker.tsx create mode 100644 src/app_modules/_global/lib/stiker/comp_button_sticker.tsx create mode 100644 src/app_modules/_global/lib/stiker/react_quill_dynamix.tsx create mode 100644 src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts create mode 100644 src/app_modules/forum/component/button/button_create_posting.tsx create mode 100644 src/app_modules/forum/component/button/button_update_posting.tsx create mode 100644 src/app_modules/forum/edit/posting/V3_edit_posting.tsx diff --git a/src/app/dev/forum/edit/posting/[id]/page.tsx b/src/app/dev/forum/edit/posting/[id]/page.tsx index 726a9ff6..f1b8337b 100644 --- a/src/app/dev/forum/edit/posting/[id]/page.tsx +++ b/src/app/dev/forum/edit/posting/[id]/page.tsx @@ -1,10 +1,11 @@ import { Forum_EditPosting } from "@/app_modules/forum"; +import Forum_V3_EditPosting from "@/app_modules/forum/edit/posting/V3_edit_posting"; export default async function Page() { - return ( <> - + {/* */} + ); } diff --git a/src/app_modules/_global/lib/stiker.ts b/src/app_modules/_global/lib/stiker.ts index 7ad745b2..32c86160 100644 --- a/src/app_modules/_global/lib/stiker.ts +++ b/src/app_modules/_global/lib/stiker.ts @@ -32,7 +32,7 @@ const dummyStiker = [ { id: 7, name: "stiker7", - url: "https://play-lh.googleusercontent.com/MHPScwJ_owQJtf26PpiANC83sGj8d_cPz_83R3XhmFN9nJUuoWHJ0Y-GaEsKhXk4sA", + url: "https://down-id.img.susercontent.com/file/39fbca466b027a644d8386f265330365", }, { id: 8, diff --git a/src/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker.tsx b/src/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker.tsx new file mode 100644 index 00000000..5b3e84c6 --- /dev/null +++ b/src/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker.tsx @@ -0,0 +1,45 @@ +import { Paper, ScrollArea } from "@mantine/core"; +import React from "react"; +import { MainColor } from "../../color"; +import { ReactQuillDynamic } from "./react_quill_dynamix"; +import { + formatsReactQuill, + modulesReactQuill, +} from "./react_quill_format_for_stiker"; + +const ReactQuill = ReactQuillDynamic; + +export function Component_V3_TextEditorWithSticker({ + quillRef, + data, + onSetData, +}: { + quillRef: React.MutableRefObject; + data: any; + onSetData: (value: any) => void; +}) { + return ( + <> + + + { + onSetData(val); + }} + modules={modulesReactQuill} + formats={formatsReactQuill} + placeholder="Ketik pesan di sini atau tambahkan stiker..." + style={{ + color: "black", + backgroundColor: MainColor.white, + border: "none", + }} + /> + + + + ); +} diff --git a/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx b/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx new file mode 100644 index 00000000..54bfb74b --- /dev/null +++ b/src/app_modules/_global/lib/stiker/comp_button_sticker.tsx @@ -0,0 +1,56 @@ +import { ActionIcon, Box, Image, ScrollArea, SimpleGrid, Tooltip } from "@mantine/core"; +import { IconMoodSmileFilled } from "@tabler/icons-react"; +import { MainColor } from "../../color"; +import { UIGlobal_Modal } from "../../ui"; +import { listStiker } from "../stiker"; +import { insertStickerReactQuill } from "./react_quill_format_for_stiker"; + +interface Props { + open: () => void; + close: () => void; + opened: boolean; + quillRef: any; +} +export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => { + return ( + <> + + + + + + + + + {listStiker.map((item) => ( + + + {item.name} + insertStickerReactQuill({ + stickerUrl: item.url, + quillRef: quillRef, + close: close, + }) + } + /> + + + ))} + + + + + + ); +} \ No newline at end of file diff --git a/src/app_modules/_global/lib/stiker/react_quill_dynamix.tsx b/src/app_modules/_global/lib/stiker/react_quill_dynamix.tsx new file mode 100644 index 00000000..d95ede3a --- /dev/null +++ b/src/app_modules/_global/lib/stiker/react_quill_dynamix.tsx @@ -0,0 +1,20 @@ +import { Text } from "@mantine/core"; +import dynamic from "next/dynamic"; + +export const ReactQuillDynamic = dynamic( + async () => { + const { default: RQ } = await import("react-quill"); + // Tidak perlu import CSS dengan import statement + return function comp({ forwardedRef, ...props }: any) { + return ; + }; + }, + { + ssr: false, + loading: () => ( + + Ketik pesan di sini atau tambahkan stiker... + + ), + } +); diff --git a/src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts b/src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts new file mode 100644 index 00000000..a09919aa --- /dev/null +++ b/src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts @@ -0,0 +1,61 @@ +import React from "react"; + +export { + modulesReactQuill, + formatsReactQuill, + insertStickerReactQuill +}; + +const modulesReactQuill = { + toolbar: [ + [{ header: [1, 2, false] }], + ["bold", "italic", "underline", "strike", "blockquote"], + [{ list: "ordered" }, { list: "bullet" }], + ["link"], + ["clean"], + ], +}; + +const formatsReactQuill = [ + "header", + "bold", + "italic", + "underline", + "strike", + "blockquote", + "list", + "bullet", + "link", + "image", +]; + + const insertStickerReactQuill = ({ + stickerUrl, + quillRef, + close, + }: { + stickerUrl: string; + quillRef: React.MutableRefObject; + close: () => void; + }) => { + if (!quillRef.current) return; + + const quill = quillRef.current.getEditor(); + const range = quill.getSelection(true); + + // Custom image insertion with size + // Use custom blot or HTML string with size attributes + const stickerHtml = `sticker`; + + // Insert HTML at cursor position + quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml); + + // Move cursor after inserted sticker + quill.setSelection(range.index + 1, 0); + + // Focus back on editor + quill.focus(); + + // Close sticker modal + close(); + }; \ No newline at end of file diff --git a/src/app_modules/_global/ui/ui_modal.tsx b/src/app_modules/_global/ui/ui_modal.tsx index 78116b52..068adf26 100644 --- a/src/app_modules/_global/ui/ui_modal.tsx +++ b/src/app_modules/_global/ui/ui_modal.tsx @@ -1,6 +1,14 @@ "use client"; -import { Modal, Stack, Title, Group, Button, Box, ActionIcon } from "@mantine/core"; +import { + Modal, + Stack, + Title, + Group, + Button, + Box, + ActionIcon, +} from "@mantine/core"; import { MainColor, AccentColor } from "../color/color_pallet"; import React from "react"; import { IconX } from "@tabler/icons-react"; @@ -12,7 +20,7 @@ export default function UIGlobal_Modal({ buttonKiri, buttonKanan, children, - closeButton + closeButton, }: { opened: any; close: any; @@ -20,14 +28,14 @@ export default function UIGlobal_Modal({ buttonKiri?: any; buttonKanan?: any; children?: React.ReactNode; - closeButton?: boolean + closeButton?: boolean; }) { return ( <> { - close(); + close(); }} centered withCloseButton={false} @@ -41,16 +49,22 @@ export default function UIGlobal_Modal({ - {title} - - {closeButton ? - - : null} + {title} + + {closeButton ? ( + + + + ) : null} - {children ? children : - {buttonKiri} - {buttonKanan} - } + {children ? ( + children + ) : ( + + {buttonKiri} + {buttonKanan} + + )} diff --git a/src/app_modules/forum/component/button/button_create_posting.tsx b/src/app_modules/forum/component/button/button_create_posting.tsx new file mode 100644 index 00000000..782af7ad --- /dev/null +++ b/src/app_modules/forum/component/button/button_create_posting.tsx @@ -0,0 +1,65 @@ +import { MainColor } from "@/app_modules/_global/color"; +import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html"; +import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting"; +import { + ComponentGlobal_NotifikasiBerhasil, + ComponentGlobal_NotifikasiGagal, +} from "@/app_modules/_global/notif_global"; +import { Button } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { forum_funCreate } from "../../fun/create/fun_create"; +import mqtt_client from "@/util/mqtt_client"; + +interface ButtonActionProps { + value: string; +} + +export default function Forum_ButtonCreatePosting({ + value, +}: ButtonActionProps) { + const router = useRouter(); + const [loading, setLoading] = useState(false); + + async function onCreate() { + try { + setLoading(true); + const create = await forum_funCreate(value); + if (create.status === 201) { + ComponentGlobal_NotifikasiBerhasil(create.message); + router.back(); + + mqtt_client.publish( + "Forum_create_new", + JSON.stringify({ isNewPost: true, count: 1 }) + ); + } else { + ComponentGlobal_NotifikasiGagal(create.message); + setLoading(false); + } + } catch (error) { + console.log(error); + setLoading(false); + } + } + + return ( + + ); +} diff --git a/src/app_modules/forum/component/button/button_update_posting.tsx b/src/app_modules/forum/component/button/button_update_posting.tsx new file mode 100644 index 00000000..b0c3eb16 --- /dev/null +++ b/src/app_modules/forum/component/button/button_update_posting.tsx @@ -0,0 +1,64 @@ +import { MainColor } from "@/app_modules/_global/color"; +import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html"; +import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting"; +import { ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global"; +import { clientLogger } from "@/util/clientLogger"; +import { Button } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { forum_funEditPostingById } from "../../fun/edit/fun_edit_posting_by_id"; + +export default function Forum_ButtonUpdatePosting({ + postingId, + diskusi, +}: { + postingId: string; + diskusi: string; +}) { + const router = useRouter(); + const [loading, setLoading] = useState(false); + + async function onUpdate() { + try { + setLoading(true); + const update = await forum_funEditPostingById(postingId, diskusi); + + if (update.status === 200) { + ComponentGlobal_NotifikasiBerhasil(update.message); + router.back(); + } else { + setLoading(false); + ComponentGlobal_NotifikasiGagal(update.message); + } + } catch (error) { + setLoading(false); + clientLogger.error("Error update forum", error); + } + } + + return ( + <> + + + ); +} 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 5aa95ab6..4d0908b8 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 @@ -4,28 +4,23 @@ import { MainColor } from "@/app_modules/_global/color/color_pallet"; import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown"; import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html"; import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting"; -import { listStiker } from "@/app_modules/_global/lib/stiker"; +import { Component_V3_TextEditorWithSticker } from "@/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker"; +import { Comp_ButtonSticker } from "@/app_modules/_global/lib/stiker/comp_button_sticker"; import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil"; import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal"; -import { UIGlobal_Modal } from "@/app_modules/_global/ui"; import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user"; import { clientLogger } from "@/util/clientLogger"; import mqtt_client from "@/util/mqtt_client"; import { ActionIcon, - Box, Button, Group, - Image, Paper, - ScrollArea, - SimpleGrid, Stack, - Text, - Tooltip, + Text } from "@mantine/core"; import { useDisclosure, useShallowEffect } from "@mantine/hooks"; -import { IconMoodSmileFilled, IconX } from "@tabler/icons-react"; +import { IconX } from "@tabler/icons-react"; import dynamic from "next/dynamic"; import React, { useState } from "react"; import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar"; @@ -158,53 +153,6 @@ export default function Forum_V3_CreateKomentar({ }; }, []); - // Custom toolbar options for ReactQuill - const modules = { - toolbar: [ - [{ header: [1, 2, false] }], - ["bold", "italic", "underline", "strike", "blockquote"], - [{ list: "ordered" }, { list: "bullet" }], - ["link"], - ["clean"], - ], - }; - - const formats = [ - "header", - "bold", - "italic", - "underline", - "strike", - "blockquote", - "list", - "bullet", - "link", - "image", - ]; - - const insertSticker = (stickerUrl: string) => { - if (!quillRef.current) return; - - const quill = quillRef.current.getEditor(); - const range = quill.getSelection(true); - - // Custom image insertion with size - // Use custom blot or HTML string with size attributes - const stickerHtml = `sticker`; - - // Insert HTML at cursor position - quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml); - - // Move cursor after inserted sticker - quill.setSelection(range.index + 1, 0); - - // Focus back on editor - quill.focus(); - - // Close sticker modal - close(); - }; - // // Function to send message // const sendMessage = () => { // if (editorContent.trim() !== "") { @@ -218,7 +166,7 @@ export default function Forum_V3_CreateKomentar({ {isComment ? ( - + setIsComment(false)} @@ -227,23 +175,14 @@ export default function Forum_V3_CreateKomentar({ - - {quillLoaded && ( - - )} - + + {quillLoaded && ( + + )} - - - + diff --git a/src/app_modules/forum/component/forumku_component/forumku_more_button.tsx b/src/app_modules/forum/component/forumku_component/forumku_more_button.tsx index 8e1bcccd..4b546e97 100644 --- a/src/app_modules/forum/component/forumku_component/forumku_more_button.tsx +++ b/src/app_modules/forum/component/forumku_component/forumku_more_button.tsx @@ -178,6 +178,7 @@ export default function ComponentForum_ForumkuMoreButton({ border: `1px solid ${AccentColor.yellow}`, }} radius={"xl"} + c="black" onClick={close} > Batal diff --git a/src/app_modules/forum/component/forumku_component/forumku_view.tsx b/src/app_modules/forum/component/forumku_component/forumku_view.tsx index a1efbac5..95e6a255 100644 --- a/src/app_modules/forum/component/forumku_component/forumku_view.tsx +++ b/src/app_modules/forum/component/forumku_component/forumku_view.tsx @@ -11,6 +11,8 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; import { MODEL_FORUM_POSTING } from "../../model/interface"; import ComponentForum_ForumkuHeaderCard from "./forumku_header"; +import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker"; +import { useShallowEffect } from "@mantine/hooks"; export default function ComponentForum_ForumkuMainCardView({ data, @@ -26,6 +28,22 @@ export default function ComponentForum_ForumkuMainCardView({ const router = useRouter(); const [visable, setVisible] = useState(false); + useShallowEffect(() => { + // Add custom style for stickers inside Quill editor + const style = document.createElement("style"); + style.textContent = ` + .chat-content img { + max-width: 70px !important; + max-height: 70px !important; + } + `; + document.head.appendChild(style); + return () => { + // Clean up when component unmounts + document.head.removeChild(style); + }; + }, []); + return ( <> @@ -47,7 +65,10 @@ export default function ComponentForum_ForumkuMainCardView({ }} > -
+ diff --git a/src/app_modules/forum/component/komentar_component/komentar_button_more.tsx b/src/app_modules/forum/component/komentar_component/komentar_button_more.tsx index 8b1aeb29..391c8756 100644 --- a/src/app_modules/forum/component/komentar_component/komentar_button_more.tsx +++ b/src/app_modules/forum/component/komentar_component/komentar_button_more.tsx @@ -124,9 +124,10 @@ export default function ComponentForum_KomentarButtonMore({ border: `1px solid ${AccentColor.yellow}`, }} radius={"xl"} + c="black" onClick={close} > - Batal + Batal diff --git a/src/app_modules/forum/component/main_component/card_more_button.tsx b/src/app_modules/forum/component/main_component/card_more_button.tsx index bda87f56..9384bdf6 100644 --- a/src/app_modules/forum/component/main_component/card_more_button.tsx +++ b/src/app_modules/forum/component/main_component/card_more_button.tsx @@ -180,7 +180,7 @@ export default function ComponentForum_BerandaMoreButton({ radius={"xl"} onClick={close} > - Batal + Batal diff --git a/src/app_modules/forum/create/V3_create.tsx b/src/app_modules/forum/create/V3_create.tsx index 6f604d38..4d3d2dad 100644 --- a/src/app_modules/forum/create/V3_create.tsx +++ b/src/app_modules/forum/create/V3_create.tsx @@ -1,53 +1,16 @@ "use client"; -import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; -import { - ActionIcon, - Box, - Button, - Group, - Image, - Paper, - ScrollArea, - SimpleGrid, - Stack, - Text, - Tooltip, -} from "@mantine/core"; -import { useDisclosure, useShallowEffect } from "@mantine/hooks"; -import React, { useState } from "react"; -import dynamic from "next/dynamic"; -import { useRouter } from "next/navigation"; -import { MainColor } from "@/app_modules/_global/color"; import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component"; import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html"; import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting"; -import { listStiker } from "@/app_modules/_global/lib/stiker"; -import { - ComponentGlobal_NotifikasiBerhasil, - ComponentGlobal_NotifikasiGagal, -} from "@/app_modules/_global/notif_global"; -import { UIGlobal_Modal } from "@/app_modules/_global/ui"; -import { IconMoodSmileFilled } from "@tabler/icons-react"; -import { forum_funCreate } from "../fun/create/fun_create"; - -const ReactQuill = dynamic( - async () => { - const { default: RQ } = await import("react-quill"); - // Tidak perlu import CSS dengan import statement - return function comp({ forwardedRef, ...props }: any) { - return ; - }; - }, - { - ssr: false, - loading: () => ( - - Ketik pesan di sini atau tambahkan stiker... - - ), - } -); +import { Component_V3_TextEditorWithSticker } from "@/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker"; +import { Comp_ButtonSticker } from "@/app_modules/_global/lib/stiker/comp_button_sticker"; +import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; +import { Group, Stack } from "@mantine/core"; +import { useDisclosure, useShallowEffect } from "@mantine/hooks"; +import { useRouter } from "next/navigation"; +import React, { useState } from "react"; +import Forum_ButtonCreatePosting from "../component/button/button_create_posting"; export function Forum_V3_Create() { const router = useRouter(); @@ -95,76 +58,16 @@ export function Forum_V3_Create() { }; }, []); - // Custom toolbar options for ReactQuill - const modules = { - toolbar: [ - [{ header: [1, 2, false] }], - ["bold", "italic", "underline", "strike", "blockquote"], - [{ list: "ordered" }, { list: "bullet" }], - ["link"], - ["clean"], - ], - }; - - const formats = [ - "header", - "bold", - "italic", - "underline", - "strike", - "blockquote", - "list", - "bullet", - "link", - "image", - ]; - - const insertSticker = (stickerUrl: string) => { - if (!quillRef.current) return; - - const quill = quillRef.current.getEditor(); - const range = quill.getSelection(true); - - // Custom image insertion with size - // Use custom blot or HTML string with size attributes - const stickerHtml = `sticker`; - - // Insert HTML at cursor position - quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml); - - // Move cursor after inserted sticker - quill.setSelection(range.index + 1, 0); - - // Focus back on editor - quill.focus(); - - // Close sticker modal - close(); - }; - return ( <> {isReady ? ( {quillLoaded && ( - - - - - + )} @@ -174,37 +77,16 @@ export function Forum_V3_Create() { /> - - - + - + - - - - {listStiker.map((item) => ( - - - {item.name} insertSticker(item.url)} - /> - - - ))} - - ) : ( @@ -212,54 +94,3 @@ export function Forum_V3_Create() { ); } - -interface ButtonActionProps { - value: string; -} - -function ButtonAction({ value }: ButtonActionProps) { - const router = useRouter(); - const [loading, setLoading] = useState(false); - - async function onCreate() { - try { - setLoading(true); - const create = await forum_funCreate(value); - if (create.status === 201) { - ComponentGlobal_NotifikasiBerhasil(create.message); - router.back(); - - mqtt_client.publish( - "Forum_create_new", - JSON.stringify({ isNewPost: true, count: 1 }) - ); - } else { - ComponentGlobal_NotifikasiGagal(create.message); - } - } catch (error) { - console.log(error); - } finally { - setLoading(false); - } - } - - return ( - - ); -} diff --git a/src/app_modules/forum/edit/posting/V3_edit_posting.tsx b/src/app_modules/forum/edit/posting/V3_edit_posting.tsx new file mode 100644 index 00000000..1ba62e02 --- /dev/null +++ b/src/app_modules/forum/edit/posting/V3_edit_posting.tsx @@ -0,0 +1,116 @@ +"use client"; + +import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown"; +import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html"; +import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting"; +import { Comp_ButtonSticker } from "@/app_modules/_global/lib/stiker/comp_button_sticker"; +import { Component_V3_TextEditorWithSticker } from "@/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker"; +import CustomSkeleton from "@/app_modules/components/CustomSkeleton"; +import { clientLogger } from "@/util/clientLogger"; +import { Group, Stack } from "@mantine/core"; +import { useDisclosure, useShallowEffect } from "@mantine/hooks"; +import { useParams } from "next/navigation"; +import React, { useState } from "react"; +import { apiGetOneForumById } from "../../component/api_fetch_forum"; +import Forum_ButtonUpdatePosting from "../../component/button/button_update_posting"; +import { MODEL_FORUM_POSTING } from "../../model/interface"; + +export default function Forum_V3_EditPosting() { + const param = useParams<{ id: string }>(); + const [data, setData] = useState(null); + + // New State + const [opened, { open, close }] = useDisclosure(false); + const quillRef = React.useRef(null); + const [quillLoaded, setQuillLoaded] = useState(false); + + useShallowEffect(() => { + handleLoadData(); + }, []); + + const handleLoadData = async () => { + try { + const response = await apiGetOneForumById({ + id: param.id, + }); + + if (response.success) { + setData(response.data); + } + } catch (error) { + clientLogger.error("Error get data forum", error); + } + }; + + useShallowEffect(() => { + // Add Quill CSS via tag + const link = document.createElement("link"); + link.href = "https://cdn.quilljs.com/1.3.6/quill.snow.css"; + link.rel = "stylesheet"; + document.head.appendChild(link); + + // Add custom style for stickers inside Quill editor + const style = document.createElement("style"); + style.textContent = ` + .ql-editor img { + max-width: 70px !important; + max-height: 70px !important; + } + // .chat-content img { + // max-width: 70px !important; + // max-height: 70px !important; + // } + `; + document.head.appendChild(style); + + setQuillLoaded(true); + + return () => { + // Clean up when component unmounts + document.head.removeChild(link); + document.head.removeChild(style); + }; + }, []); + + if (!data) return ; + + return ( + <> + + {quillLoaded && ( + { + setData({ + ...data, + diskusi: val, + }); + }} + /> + )} + + + + + + + + + + + + + ); +} diff --git a/src/app_modules/forum/forumku/index.tsx b/src/app_modules/forum/forumku/index.tsx index 2b9515b7..93c6393f 100644 --- a/src/app_modules/forum/forumku/index.tsx +++ b/src/app_modules/forum/forumku/index.tsx @@ -30,7 +30,7 @@ export default function Forum_Forumku({ const params = useParams<{ id: string }>(); const userId = params.id; const [dataUser, setDataUser] = useState(null); - const [dataPosting, setDataPosting] = useState([]); + const [dataPosting, setDataPosting] = useState(null); const [isLoading, setIsLoading] = useState(false); const [activePage, setActivePage] = useState(1); @@ -108,11 +108,11 @@ export default function Forum_Forumku({ ) : ( )} - {!dataPosting.length && isLoading ? ( + {!dataPosting || isLoading ? ( ) : _.isEmpty(dataPosting) ? ( @@ -125,8 +125,8 @@ export default function Forum_Forumku({ )} - data={dataPosting} - setData={setDataPosting} + data={dataPosting as MODEL_FORUM_POSTING[]} + setData={setDataPosting as any} moreData={handleMoreData} > {(item) => ( @@ -136,7 +136,7 @@ export default function Forum_Forumku({ onLoadData={(val) => { setDataPosting(val); }} - allData={dataPosting} + allData={dataPosting || []} /> )}