556 lines
21 KiB
TypeScript
556 lines
21 KiB
TypeScript
"use client";
|
|
|
|
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 { useParams, useSearchParams } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import * as z from "zod";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import CustomEditor from "@/components/editor/custom-editor";
|
|
import {
|
|
generateDataArticle,
|
|
generateDataRewrite,
|
|
getDetailArticle,
|
|
} from "@/service/content/ai";
|
|
import { Button } from "@/components/ui/button";
|
|
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";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import * as Yup from "yup";
|
|
import Cookies from "js-cookie";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
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" }),
|
|
});
|
|
|
|
const page = (props: any) => {
|
|
const { states } = props;
|
|
const MySwal = withReactContent(Swal);
|
|
const router = useRouter();
|
|
const [, setLoadingState] = useState(false);
|
|
const searchParams = useSearchParams();
|
|
const getParams = useParams();
|
|
const id: any = getParams?.id;
|
|
const [content, setContent] = useState<any>([]);
|
|
const [isFromSPIT, setIsFromSPIT] = useState(false);
|
|
const [listSuggestion, setListSuggestion] = useState();
|
|
const [main, setMain] = useState<any>();
|
|
const userId = getCookiesDecrypt("uie");
|
|
const userRoleId = getCookiesDecrypt("urie");
|
|
const [articleIds, setArticleIds] = useState<any>([]);
|
|
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
|
|
const [selectedArticleId, setSelectedArticleId] = useState<any>(null);
|
|
const [articleBody, setArticleBody] = useState("");
|
|
const [selectedAdvConfig, setSelectedAdvConfig] = useState("");
|
|
const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
|
|
const [selectedContextType, setSelectedContextType] = useState("");
|
|
const [selectedLanguage, setSelectedLanguage] = useState("");
|
|
const [selectedTitle, setSelectedTitle] = useState("");
|
|
const [selectedSize, setSelectedSize] = useState("");
|
|
const [detailArticle, setDetailArticle] = useState<any>(null);
|
|
const [isLoadingData, setIsLoadingData] = useState<boolean>(false);
|
|
const [detailData, setDetailData] = useState<any>(null);
|
|
const [articleImages, setArticleImages] = useState<string[]>([]);
|
|
const t = useTranslations("LandingPage");
|
|
|
|
const userLevelId = getCookiesDecrypt("ulie");
|
|
const roleId = getCookiesDecrypt("urie");
|
|
|
|
type ImageSchema = z.infer<typeof imageSchema>;
|
|
|
|
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;
|
|
|
|
const { control } = useForm<ImageSchema>({
|
|
resolver: zodResolver(imageSchema),
|
|
});
|
|
|
|
const formOptions = {
|
|
resolver: yupResolver(validationSchema),
|
|
};
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
setValue,
|
|
getValues,
|
|
} = useForm(formOptions);
|
|
|
|
const save = async (data: any) => {
|
|
const request = {
|
|
title: data.title,
|
|
articleId: detailArticle?.id,
|
|
mediaUploadId: id.split("-")?.[0],
|
|
articleBody: detailArticle?.articleBody,
|
|
metaTitle: detailArticle?.metaTitle,
|
|
metaDescription: detailArticle?.metaDescription,
|
|
mainKeyword: detailArticle?.mainKeyword,
|
|
additionalKeyword: detailArticle?.additionalKeyword,
|
|
articleSize: detailArticle?.articleSize,
|
|
style: detailArticle?.style,
|
|
website: detailArticle?.website,
|
|
imageUrl: detailArticle?.imageUrl,
|
|
};
|
|
loading();
|
|
const res = await saveContentRewrite(request);
|
|
if (res?.error) {
|
|
error(res?.message);
|
|
return false;
|
|
}
|
|
successSubmit();
|
|
};
|
|
|
|
function successSubmit() {
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
icon: "success",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "OK",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
router.push("/content-management/rewrite");
|
|
}
|
|
});
|
|
}
|
|
|
|
function onSubmit(data: any) {
|
|
MySwal.fire({
|
|
title: "Simpan Data",
|
|
text: "",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "Simpan",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
save(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
setLoadingState(true);
|
|
const response = await getDetail(
|
|
id,
|
|
states == "polda" ? "polda" : "mabes"
|
|
);
|
|
console.log("Detail dataaaa ::", response);
|
|
if (response?.data?.data?.isActive == false) {
|
|
window.location.replace("/");
|
|
}
|
|
const responseGet = await getPublicSuggestionList(id?.split("-")?.[0]);
|
|
|
|
// 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);
|
|
// const mainUrl = response?.data?.data?.files[0]?.url;
|
|
// const ticket = response?.data?.data?.files[0]?.ticket;
|
|
// const urlBlob = await getBlobContent(mainUrl, ticket);
|
|
setMain({
|
|
id: response?.data?.data?.files[0]?.id,
|
|
type: response?.data?.data?.fileType.name,
|
|
url:
|
|
Number(response?.data?.data?.fileType?.id) == 4
|
|
? response?.data?.data?.files[0]?.secondaryUrl
|
|
: response?.data?.data?.files[0]?.url,
|
|
thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
|
|
names: response?.data?.data?.files[0]?.fileName,
|
|
format: response?.data?.data?.files[0]?.format,
|
|
widthPixel: response?.data?.data?.files[0]?.widthPixel,
|
|
heightPixel: response?.data?.data?.files[0]?.heightPixel,
|
|
size: response?.data?.data?.files[0]?.size,
|
|
caption: response?.data?.data?.files[0]?.caption,
|
|
});
|
|
|
|
// Send Meta Data
|
|
const metaData = {
|
|
title: response?.data?.data?.title,
|
|
image: response?.data?.data?.thumbnailLink,
|
|
};
|
|
|
|
setCookiesEncrypt("meta_data", metaData);
|
|
setLoadingState(false); // (2) write some value to state
|
|
// await new Promise(resolve => setTimeout(resolve, 1000)); // 2 sec
|
|
// setIdm();
|
|
}
|
|
|
|
return () => {
|
|
// This code runs when component is unmounted
|
|
componentMounted = false; // (4) set it to false if we leave the page
|
|
};
|
|
}
|
|
|
|
initState();
|
|
}, [id]);
|
|
|
|
const handleGenerateArtikel = async () => {
|
|
loading();
|
|
const request = {
|
|
style: "friendly",
|
|
lang: "id",
|
|
contextType: "text",
|
|
urlContext: null,
|
|
context: content?.description,
|
|
createdBy: roleId,
|
|
sentiment: "Humorous",
|
|
clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
|
|
};
|
|
console.log("Request", request);
|
|
const res = await generateDataRewrite(request);
|
|
close();
|
|
|
|
if (res.error) {
|
|
console.error(res.message);
|
|
return false;
|
|
}
|
|
|
|
const newArticleId = res?.data?.data?.id;
|
|
setIsGeneratedArticle(true);
|
|
|
|
setArticleIds((prevIds: any) => {
|
|
if (prevIds.length < 5) {
|
|
return [...prevIds, newArticleId];
|
|
} else {
|
|
const updatedIds = [...prevIds];
|
|
updatedIds[4] = newArticleId;
|
|
return updatedIds;
|
|
}
|
|
});
|
|
|
|
Cookies.set("nulisAIArticleIdTemp", articleIds);
|
|
};
|
|
|
|
const handleArticleIdClick = async (id: string) => {
|
|
setIsLoadingData(true);
|
|
let retryCount = 0;
|
|
const maxRetries = 20;
|
|
|
|
try {
|
|
const waitForStatusUpdate: any = 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(
|
|
/<img[^>]*>/g,
|
|
""
|
|
);
|
|
console.log("lalalala", cleanArticleBody);
|
|
const articleImagesData = articleData?.imagesUrl?.split(",");
|
|
setValue("description", cleanArticleBody || "");
|
|
setArticleBody(cleanArticleBody || "");
|
|
setDetailArticle(articleData);
|
|
setSelectedArticleId(id);
|
|
setArticleImages(articleImagesData || []);
|
|
} catch (error) {
|
|
console.error("Error fetching article details:", error);
|
|
} finally {
|
|
setIsLoadingData(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<HeaderManagement />
|
|
<div className="flex flex-col lg:flex-row">
|
|
<SidebarManagement />
|
|
<div className="w-full lg:w-2/3 p-8 lg:p-12">
|
|
<div className="flex flex-col">
|
|
<div className="text-xl font-bold mb-5">{t("content")} Rewrite</div>
|
|
<div className="p-8 border border-black rounded-lg">
|
|
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
|
|
{content && (
|
|
<div className="flex flex-col gap-2 ">
|
|
<div className="flex flex-col lg:flex-row gap-2">
|
|
<div className="gap-1 flex flex-col mb-3">
|
|
<p className="font-semibold">{t("language")}</p>
|
|
<Select
|
|
value={selectedLanguage}
|
|
onValueChange={setSelectedLanguage}
|
|
>
|
|
<SelectTrigger className="w-full lg:w-[180px]">
|
|
<SelectValue placeholder={t("selectLanguage")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>{t("selectLanguage")}</SelectLabel>
|
|
<SelectItem value="id">Indonesia</SelectItem>
|
|
<SelectItem value="en">English</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="gap-1 flex flex-col mb-3">
|
|
<p className="font-semibold">{t("contextType")}</p>
|
|
<Select
|
|
value={selectedContextType}
|
|
onValueChange={setSelectedContextType}
|
|
>
|
|
<SelectTrigger className="w-full lg:w-[180px]">
|
|
<SelectValue placeholder={t("selectContext")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>{t("selectContext")}</SelectLabel>
|
|
<SelectItem value="text">{t("text")}</SelectItem>
|
|
<SelectItem value="article">
|
|
{t("article")}
|
|
</SelectItem>
|
|
<SelectItem value="transcript">
|
|
{t("transcript")}
|
|
</SelectItem>
|
|
<SelectItem value="url">URL</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="gap-1 flex flex-col mb-3">
|
|
<p className="font-semibold">{t("writingStyle")}</p>
|
|
<Select
|
|
value={selectedWritingStyle}
|
|
onValueChange={setSelectedWritingStyle}
|
|
>
|
|
<SelectTrigger className="w-full lg:w-[180px]">
|
|
<SelectValue placeholder={t("selectWriting")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>{t("selectWriting")}</SelectLabel>
|
|
<SelectItem value="firendly">Friendly</SelectItem>
|
|
<SelectItem value="profesional">
|
|
Profesional
|
|
</SelectItem>
|
|
<SelectItem value="informational">
|
|
Informational
|
|
</SelectItem>
|
|
<SelectItem value="neutral">Neutral</SelectItem>
|
|
<SelectItem value="witty">Witty</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="gap-1 flex flex-col mb-3">
|
|
<p className="font-semibold">{t("articleSize")}</p>
|
|
<Select
|
|
value={selectedSize}
|
|
onValueChange={setSelectedSize}
|
|
>
|
|
<SelectTrigger className="w-full lg:w-[180px]">
|
|
<SelectValue placeholder={t("selectSize")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>{t("selectSize")}</SelectLabel>
|
|
<SelectItem value="news">
|
|
News (300 - 900 words)
|
|
</SelectItem>
|
|
<SelectItem value="info">
|
|
Info (900 - 2000 words)
|
|
</SelectItem>
|
|
<SelectItem value="detail">
|
|
Detail (2000 - 5000 words)
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<p className="font-semibold">{t("title")}</p>
|
|
<Controller
|
|
control={control}
|
|
name="title"
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
type="text"
|
|
className={`w-full border py-3 rounded-lg ${
|
|
errors.title ? "is-invalid" : ""
|
|
}`}
|
|
{...register("title")}
|
|
id="title"
|
|
value={value}
|
|
onChange={onChange}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="mb-3">
|
|
<p className="font-semibold">{t("mainKeyword")}</p>
|
|
<Controller
|
|
control={control}
|
|
name="mainKeyword"
|
|
render={({ field: { onChange, value } }) => (
|
|
<Input
|
|
type="text"
|
|
className={`w-full border py-3 rounded-lg ${
|
|
errors.mainKeyword ? "is-invalid" : ""
|
|
}`}
|
|
{...register("mainKeyword")}
|
|
id="mainKeyword"
|
|
value={value}
|
|
onChange={onChange}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="mb-3">
|
|
<p className="font-semibold">SEO</p>
|
|
<Controller
|
|
control={control}
|
|
name="seo"
|
|
render={({ field: { onChange, value } }) => (
|
|
<Textarea
|
|
className="py-20"
|
|
id="seo"
|
|
placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
|
|
{...register("seo")}
|
|
onChange={onChange}
|
|
value={value}
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="mb-4">
|
|
<a
|
|
onClick={handleGenerateArtikel}
|
|
className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base"
|
|
>
|
|
Generate Artikel
|
|
</a>
|
|
{isGeneratedArticle && (
|
|
<div className="mt-3 ml-2 pb-0">
|
|
{articleIds.map((id: any, index: any) => (
|
|
<p
|
|
key={index}
|
|
className={`text-black border border-black w-fit rounded-md p-3 m-1 ${
|
|
selectedArticleId === id
|
|
? "text-[#31ce36] w-fit p-3 hover:bg-[#31ce36] hover:text-white cursor-pointer border border-[#31ce36]"
|
|
: "text-[#48abf7] p-3 hover:text-white hover:bg-[#48abf7] w-fit cursor-pointer border border-[#48abf7]"
|
|
}`}
|
|
onClick={() => handleArticleIdClick(id)}
|
|
>
|
|
{id}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className=" mb-3">
|
|
<p className="font-semibold">{t("newDescription")}</p>
|
|
<Controller
|
|
control={control}
|
|
name="description"
|
|
render={({ field: { onChange, value } }) =>
|
|
isLoadingData ? (
|
|
<div className="flex justify-center items-center h-40">
|
|
<p className="text-gray-500">
|
|
Loading Proses Data...
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<CustomEditor
|
|
onChange={onChange}
|
|
initialData={articleBody || value}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
{articleBody === null || articleBody === "" ? (
|
|
<p className="text-red-400 px-0 text-sm">
|
|
Deskripsi tidak boleh kosong*
|
|
</p>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
<div className="flex flex-row gap-3">
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400 text-sm lg:text-base"
|
|
>
|
|
{t("back")}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white"
|
|
>
|
|
{t("save")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default page;
|