From 9266b1924d47290d5c06f7566a2ba478b7e0a4ab Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Mon, 20 Jan 2025 21:51:01 +0700 Subject: [PATCH] feat: comment section in detail image --- .../(public)/image/detail/[slug]/page.tsx | 299 +++++++++++++++--- service/landing/landing.ts | 23 +- 2 files changed, 261 insertions(+), 61 deletions(-) diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index b76d52bc..64423d3a 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -8,15 +8,19 @@ import NewContent from "@/components/landing-page/new-content"; import { useToast } from "@/components/ui/use-toast"; import { getCookiesDecrypt } from "@/lib/utils"; import { close, error, loading, successCallback, warning } from "@/config/swal"; -import { checkWishlistStatus, createPublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing"; +import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing"; import { Link, useRouter } from "@/i18n/routing"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking"; -import { checkMaliciousText } from "@/utils/globals"; +import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals"; +import withReactContent from "sweetalert2-react-content"; +import Swal from "sweetalert2"; +import parse from "html-react-parser"; const DetailInfo = () => { + const MySwal = withReactContent(Swal); const [selectedSize, setSelectedSize] = useState("L"); const [selectedTab, setSelectedTab] = useState("video"); const router = useRouter(); @@ -40,12 +44,10 @@ const DetailInfo = () => { const [emailShareInput, setEmailShareInput] = useState(); const [emailMessageInput, setEmailMessageInput] = useState(); const searchParams = useSearchParams(); - const id = searchParams?.get("id"); const [width, setWidth] = useState(); const userRoleId = getCookiesDecrypt("urie"); const [message, setMessage] = useState(""); - const [listSuggestion, setListSuggestion] = useState(); - + const [listSuggestion, setListSuggestion] = useState(); let typeString = "image"; @@ -57,9 +59,12 @@ const DetailInfo = () => { const initFetch = async () => { const response = await getDetail(String(slug)); console.log("detailImage", response); + const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); + setIsFromSPIT(response?.data?.data?.isFromSPIT); setWidth(window.innerWidth); setContent(response?.data.data); + setListSuggestion(responseGet.data?.data); setMain({ id: response?.data?.data?.files[0]?.id, type: response?.data?.data?.fileType.name, @@ -259,7 +264,7 @@ const DetailInfo = () => { router.push("/auth/login"); } else { const data = { - mediaUploadId: id?.split("-")?.[0], + mediaUploadId: slug?.split("-")?.[0], email: emailShareList || [emailShareInput], message: emailMessageInput, url: window.location.href, @@ -291,6 +296,15 @@ const DetailInfo = () => { return false; }; + function addDefaultProfile(ev: any) { + ev.target.src = "/assets/avatar-profile.png"; + } + + const showInput = (e: any) => { + console.log(document.querySelector(`#${e}`)?.classList); + document.querySelector(`#${e}`)?.classList.toggle("comment-hidden"); + }; + const getInputValue = (e: any) => { const message = e.target.value; console.log(message); @@ -301,7 +315,7 @@ const DetailInfo = () => { if (message?.length > 3) { loading(); const data = { - mediaUploadId: id?.split("-")?.[0], + mediaUploadId: slug?.split("-")?.[0], message, parentId: null, }; @@ -310,44 +324,53 @@ const DetailInfo = () => { console.log(response); setMessage(""); - const responseGet = await getPublicSuggestionList(id?.split("-")?.[0]); + + const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); console.log(responseGet?.data?.data); setListSuggestion(responseGet?.data?.data); - $(":input").val(""); + + // Hapus nilai semua input secara manual jika perlu + const inputs = document.querySelectorAll("input"); + inputs.forEach((input) => { + input.value = ""; + }); + close(); } } - // async function sendSuggestionChild(parentId: any) { - // const inputMsg = document.querySelectorAll(`#input-comment-${parentId}`)[0] - // .value; + async function sendSuggestionChild(parentId: any) { + const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement; - // if (inputMsg?.length > 3) { - // loading(); - // const data = { - // mediaUploadId: id?.split("-")?.[0], - // message: inputMsg, - // parentId, - // }; + if (inputElement && inputElement.value.length > 3) { + loading(); + const data = { + mediaUploadId: slug?.split("-")?.[0], + message: inputElement.value, + parentId, + }; - // console.log(data); - // const response = await createPublicSuggestion(data); - // console.log(response); - // const responseGet: any = await getPublicSuggestionList(id?.split("-")?.[0]); - // console.log(responseGet.data?.data); - // setListSuggestion(responseGet.data?.data); - // // $(":input").val(""); - // document.querySelectorAll(`#input-comment-${parentId}`)[0].value = ""; - // // document.querySelectorAll("#comment-id-" + parentId)[0].style.display = "none"; - // close(); - // } - // } + console.log(data); + const response = await createPublicSuggestion(data); + console.log(response); + const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + + // Reset input field + inputElement.value = ""; + + // document.querySelector("#comment-id-" + parentId)?.style.display = "none"; + + close(); + } + } const postData = () => { const checkMessage = checkMaliciousText(message); if (checkMessage == "") { if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth/login"); + router.push("/auth"); } else { sendSuggestionParent(); } @@ -356,19 +379,44 @@ const DetailInfo = () => { } }; - // const postDataChild = (id: any) => { - // const checkMessage = checkMaliciousText(message); - // if (checkMessage == "") { - // if (Number(userRoleId) < 1 || userRoleId == undefined) { - // router.push("/auth/login"); - // } - // else { - // sendSuggestionChild(id); - // } - // } else { - // warning(checkMessage); - // } - // }; + const postDataChild = (id: any) => { + const checkMessage = checkMaliciousText(message); + if (checkMessage == "") { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + sendSuggestionChild(id); + } + } else { + warning(checkMessage); + } + }; + + async function deleteDataSuggestion(dataId: any) { + loading(); + const response = await deletePublicSuggestion(dataId); + console.log(response); + const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + close(); + } + + const deleteData = (dataId: any) => { + MySwal.fire({ + title: "Delete Comment", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Delete", + }).then((result) => { + if (result.isConfirmed) { + deleteDataSuggestion(dataId); + console.log(dataId); + } + }); + }; return ( <> @@ -514,16 +562,163 @@ const DetailInfo = () => {

Berikan Komentar

-