diff --git a/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx b/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx index e2c3f8c5..3f582c9a 100644 --- a/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx +++ b/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx @@ -4,7 +4,7 @@ import HeaderManagement from "@/components/landing-page/header-management"; import SidebarManagement from "@/components/landing-page/sidebar-management"; import { useRouter } from "@/i18n/routing"; import { getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils"; -import { useSearchParams } from "next/navigation"; +import { useParams, useSearchParams } from "next/navigation"; import React, { useEffect, useState } from "react"; import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; @@ -15,7 +15,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import CustomEditor from "@/components/editor/custom-editor"; import { generateDataArticle, getDetailArticle } from "@/service/content/ai"; import { Button } from "@/components/ui/button"; -import { error, loading } from "@/config/swal"; +import { close, error, loading } from "@/config/swal"; import { saveContentRewrite } from "@/service/content/content"; import { getPublicSuggestionList } from "@/service/landing/landing"; import { getDetail } from "@/service/detail/detail"; @@ -23,9 +23,13 @@ import { yupResolver } from "@hookform/resolvers/yup"; import * as Yup from "yup"; import { htmlToString } from "@/utils/globals"; import Cookies from "js-cookie"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; const imageSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), + mainKeyword: z.string().min(1, { message: "Keyword diperlukan" }), + seo: z.string().min(1, { message: "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" }), description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }), creatorName: z.string().min(1, { message: "Creator diperlukan" }), // tags: z.string().min(1, { message: "Judul diperlukan" }), @@ -33,12 +37,12 @@ const imageSchema = z.object({ const page = (props: { states?: any }) => { const { states } = props; - const [profile, setProfile] = useState(); const MySwal = withReactContent(Swal); const router = useRouter(); const [, setLoadingState] = useState(false); const searchParams = useSearchParams(); - const id: any = searchParams?.get("title"); + const getParams = useParams(); + const id: any = getParams?.id; const [content, setContent] = useState([]); const [isFromSPIT, setIsFromSPIT] = useState(false); const [listSuggestion, setListSuggestion] = useState(); @@ -54,21 +58,22 @@ const page = (props: { states?: any }) => { const [selectedContextType, setSelectedContextType] = useState(""); const [selectedLanguage, setSelectedLanguage] = useState(""); const [selectedTitle, setSelectedTitle] = useState(""); - const [selectedMainKeyword, setSelectedMainKeyword] = useState(""); - const [selectedSEO, setSelectedSEO] = useState(""); const [selectedSize, setSelectedSize] = useState(""); const [detailArticle, setDetailArticle] = useState(null); - const [contentType, setContentType] = useState("all"); const [isLoadingData, setIsLoadingData] = useState(false); const [detailData, setDetailData] = useState(null); const [articleImages, setArticleImages] = useState([]); const userLevelId = getCookiesDecrypt("ulie"); const roleId = getCookiesDecrypt("urie"); + type ImageSchema = z.infer; const validationSchema = Yup.object().shape({ title: Yup.string().required("Judul tidak boleh kosong"), + mainKeyword: Yup.string().required("Keyword tidak boleh kosong"), + seo: Yup.string().required("Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"), + description: Yup.string().required("Narasi Penugasan harus lebih dari 2 karakter."), }); let componentMounted = true; @@ -87,43 +92,9 @@ const page = (props: { states?: any }) => { reset, formState: { errors }, setValue, + getValues, } = useForm(formOptions); - const handleArticleIdClick = async (id: string) => { - setIsLoadingData(true); - let retryCount = 0; - const maxRetries = 20; - - try { - const waitForStatusUpdate = async () => { - while (retryCount < maxRetries) { - const res = await getDetailArticle(id); - const articleData = res?.data?.data; - - if (articleData?.status === 2) { - return articleData; - } - - retryCount++; - await new Promise((resolve) => setTimeout(resolve, 5000)); - } - - throw new Error("Timeout: Artikel belum selesai diproses."); - }; - const articleData = await waitForStatusUpdate(); - const cleanArticleBody = articleData?.articleBody?.replace(/]*>/g, ""); - const articleImagesData = articleData?.imagesUrl?.split(","); - setArticleBody(cleanArticleBody || ""); - setDetailData(articleData); - setSelectedArticleId(id); - setArticleImages(articleImagesData || []); - } catch (error) { - console.error("Error fetching article details:", error); - } finally { - setIsLoadingData(false); - } - }; - const save = async (data: any) => { const request = { title: data.title, @@ -176,6 +147,7 @@ const page = (props: { states?: any }) => { } }); } + useEffect(() => { async function initState() { setLoadingState(true); @@ -188,10 +160,13 @@ const page = (props: { states?: any }) => { // close(); if (componentMounted) { + setValue("title", response?.data?.data?.title); + setValue("mainKeyword", response?.data?.data?.title); + setValue("seo", response?.data?.data?.description); setContent(response?.data.data); setIsFromSPIT(response?.data.data?.isFromSPIT); setListSuggestion(responseGet?.data?.data); - console.log("data list file", response?.data.data?.files); + console.log("data list file", response?.data?.data); // const mainUrl = response?.data.data?.files[0]?.url; // const ticket = response?.data.data?.files[0]?.ticket; // const urlBlob = await getBlobContent(mainUrl, ticket); @@ -232,23 +207,24 @@ const page = (props: { states?: any }) => { const handleGenerateArtikel = async () => { loading(); const request = { - advConfig: selectedAdvConfig, + advConfig: "", style: selectedWritingStyle, website: "None", connectToWeb: true, lang: selectedLanguage, pointOfView: "None", - title: content?.title, + title: getValues("title"), imageSource: "Web", - mainKeyword: content?.title, - additionalKeywords: content?.htmlDescription, + mainKeyword: getValues("mainKeyword"), + additionalKeywords: getValues("seo"), targetCountry: null, articleSize: selectedSize, projectId: 2, createdBy: roleId, - clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ", + // clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ", + clientId: "mediahubClientId", }; - + console.log("Request", request); const res = await generateDataArticle(request); close(); @@ -273,17 +249,41 @@ const page = (props: { states?: any }) => { Cookies.set("nulisAIArticleIdTemp", articleIds); }; - const handleArticleClick = async (id: any) => { - const res = await getDetailArticle(id); - const articleData = res?.data?.data; - const cleanArticleBody = articleData?.articleBody?.replace(/]*>/g, ""); + const handleArticleIdClick = async (id: string) => { + setIsLoadingData(true); + let retryCount = 0; + const maxRetries = 20; - const articleImagesData = articleData?.imagesUrl?.split(","); // Split URLs into an array + try { + const waitForStatusUpdate = async () => { + while (retryCount < maxRetries) { + const res = await getDetailArticle(id); + const articleData = res?.data?.data; - setArticleBody(cleanArticleBody || ""); // Set articleBody for CKEditor - setDetailArticle(articleData); - setSelectedArticleId(id); - // setArticleImages(articleImagesData || []); // Set images array in state + if (articleData?.status === 2) { + return articleData; + } + + retryCount++; + await new Promise((resolve) => setTimeout(resolve, 5000)); + } + + throw new Error("Timeout: Artikel belum selesai diproses."); + }; + const articleData = await waitForStatusUpdate(); + const cleanArticleBody = articleData?.articleBody?.replace(/]*>/g, ""); + console.log("lalalala", cleanArticleBody); + const articleImagesData = articleData?.imagesUrl?.split(","); + setValue("description", cleanArticleBody || ""); + setArticleBody(cleanArticleBody || ""); + setDetailData(articleData); + setSelectedArticleId(id); + setArticleImages(articleImagesData || []); + } catch (error) { + console.error("Error fetching article details:", error); + } finally { + setIsLoadingData(false); + } }; return ( @@ -297,165 +297,156 @@ const page = (props: { states?: any }) => {
Content Rewrite
- {/* {content && ( */} -
-
-
-

Bahasa

- -
-
-

Context Type

- -
-
-

Writing Style

- -
-
-

Article Size

- -
-
- -
-

Judul

- setSelectedTitle(e.target.value)} - /> -
-
-

Main Keyword

- - // setSelectedMainKeyword(e.target.value) - // } - placeholder="Masukan Main Keyword disini!" - defaultValue={content?.title} - /> -
-
-

SEO

-