From aeea40392c5ae0c1eed2cf4002393ea82c7467aa Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Mon, 9 Jun 2025 11:04:59 +0700 Subject: [PATCH 1/3] QUDO-159 --- .../indeks/detail/[slug]/page.tsx | 538 +++++++++++++++++- .../polda/[polda_name]/indeks/page.tsx | 297 +++++++--- .../(polda)/polda/[polda_name]/layout.tsx | 6 +- .../(polda)/polda/[polda_name]/page.tsx | 26 +- .../indeks/detail/[slug]/page.tsx | 538 +++++++++++++++++- .../satker/[satker_name]/indeks/page.tsx | 299 +++++++--- .../(public)/indeks/detail/[slug]/page.tsx | 41 +- components/main/audio-detail.tsx | 22 +- components/main/document-detail.tsx | 22 +- components/main/image-detail.tsx | 56 +- components/main/video-detail.tsx | 40 +- 11 files changed, 1629 insertions(+), 256 deletions(-) diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx index b76f2d03..ef5df705 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx @@ -1,18 +1,45 @@ "use client"; import { Textarea } from "@/components/ui/textarea"; -import { useParams, usePathname, useRouter } from "next/navigation"; +import { useParams, usePathname, useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; -import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; -import { Link } from "@/i18n/routing"; -import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { Link, useRouter } from "@/i18n/routing"; +import { + deleteBlogComments, + getBlogComments, + getDetailIndeks, + getPublicSuggestionList, + postBlogComments, + publicDetailBlog, +} from "@/service/landing/landing"; import { formatDateToIndonesian } from "@/utils/globals"; import { Icon } from "@iconify/react/dist/iconify.js"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { close, loading } from "@/config/swal"; +import { Input } from "@/components/ui/input"; +import { useTranslations } from "next-intl"; +import Image from "next/image"; const IndeksDetail = () => { + const searchParams = useSearchParams(); + const id = searchParams?.get("id"); const [indeksData, setIndeksData] = useState(); const params = useParams(); const slug = params?.slug; - const [relatedPost, setRelatedPost] = useState(); + const [indexData, setIndexData] = useState(); + const [message, setMessage] = useState(""); + const [messageChild, setMessageChild] = useState(""); + const userId = getCookiesDecrypt("uie"); + const userRoleId = getCookiesDecrypt("urie"); + const router: any = useRouter(); + const [listComments, setListComments] = useState([]); + const t = useTranslations("LandingPage"); useEffect(() => { initFetch(); @@ -21,63 +48,512 @@ const IndeksDetail = () => { const initFetch = async () => { const response = await getDetailIndeks(); console.log(response); - setRelatedPost(response?.data?.data?.content); + setIndexData(response?.data?.data?.content); }; const detailFetch = async () => { const response = await publicDetailBlog(slug); console.log(response); setIndeksData(response?.data?.data); + getDataComment(response?.data?.data?.id); }; + async function getDataComment(id?: any) { + const response = await getBlogComments(id || indeksData?.id); + console.log(response.data?.data); + setListComments(response.data?.data); + } + + const showInput = (e: any) => { + console.log(document.querySelector(`#${e}`)?.classList); + document.querySelector(`#${e}`)?.classList.toggle("hidden"); + }; + + async function sendCommentParent() { + if (message?.length > 3) { + loading(); + const data = { + blogId: indeksData?.id, + message: message, + parentId: null, + }; + + const response = await postBlogComments(data); + + console.log(response); + setMessage(""); + getDataComment(); + close(); + } + } + + // async function sendCommentChild(parentId: any) { + // if (messageChild.length > 3) { + // loading(); + // const data = { + // blogId: indeksData?.id, + // message: messageChild, + // parentId, + // }; + + // console.log(data); + // const response = await postBlogComments(data); + // console.log(response); + // const responseGet = await getPublicSuggestionList(slug); + // console.log(responseGet?.data?.data); + // setMessageChild(""); + // // $(":input").val(""); + // close(); + // } + // } + + async function sendCommentChild(parentId: any) { + const inputMsg = document.querySelector( + `#input-comment-${parentId}` + ) as HTMLInputElement; + + if (inputMsg && inputMsg.value.length > 3) { + loading(); + const data = { + blogId: indeksData?.id, + message: inputMsg.value, + parentId, + }; + + console.log(data); + const response = await postBlogComments(data); + console.log(response); + const responseGet = await getPublicSuggestionList(slug); + console.log(responseGet?.data?.data); + getDataComment(); + inputMsg.value = ""; + close(); + } + } + + async function deleteDataComment(dataId: any) { + loading(); + const response = await deleteBlogComments(dataId); + console.log(response); + getDataComment(); + close(); + } + + const getInputValue = (e: any) => { + const message = e.target.value; + console.log(message); + setMessage(message); + getDataComment(); + }; + + const postData = () => { + if (Number(userRoleId) < 1) { + router.push("/auth"); + } else { + sendCommentParent(); + } + getDataComment(); + }; + + const postDataChild = (id: any) => { + if (Number(userRoleId) < 1) { + router.push("/auth"); + } else { + sendCommentChild(id); + } + }; + + const deleteData = (dataId: any) => { + deleteDataComment(dataId); + console.log(dataId); + }; + + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => + typeof window === "undefined" + ? Buffer.from(str).toString("base64") + : window.btoa(str); + return ( <> -
+
{/* Judul */} -
-

Indeks / Detail

-

{indeksData?.title}

+
+

Index / Detail

+

+ {indeksData?.title} +

{/* Gambar Utama */}
- Main + Main
+ {/* Footer Informasi */} -
-
- oleh {indeksData?.uploaderName}  |  Diupdate pada {indeksData?.createdAt} WIB   +
+
+
+

+ {t("by")}  + + {indeksData?.uploaderName} + +   |  {t("updatedOn")} {indeksData?.createdAt} WIB +   +

+
{/* Keterangan */} -
-

+

+

{/* Comment */} -
-
-
-

Berikan Komentar

-