303 lines
10 KiB
TypeScript
303 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { close, error, loading } from "@/config/swal";
|
|
import { useRouter } from "@/i18n/routing";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { getContentRewrite, getInfoProfile } from "@/service/landing/landing";
|
|
import { useParams, useSearchParams } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import * as Yup from "yup";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useForm } from "react-hook-form";
|
|
import { generateDataArticle } from "@/service/content/ai";
|
|
import HeaderManagement from "@/components/landing-page/header-management";
|
|
import SidebarManagement from "@/components/landing-page/sidebar-management";
|
|
import { saveContentRewrite } from "@/service/content/content";
|
|
import CustomEditor from "@/components/editor/custom-editor";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
const page = () => {
|
|
const [profile, setProfile] = useState();
|
|
const MySwal = withReactContent(Swal);
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const [, setLoadingState] = useState(false);
|
|
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();
|
|
const userId = getCookiesDecrypt("uie");
|
|
const userRoleId = getCookiesDecrypt("urie");
|
|
const [articleIds, setArticleIds] = useState<any>([]);
|
|
const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
|
|
const [selectedArticleId, setSelectedArticleId] = useState(null);
|
|
const [articleBody, setArticleBody] = useState<any>("");
|
|
const [selectedAdvConfig, setSelectedAdvConfig] = useState("");
|
|
const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
|
|
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<any>(null);
|
|
const userLevelId = getCookiesDecrypt("ulie");
|
|
const roleId = getCookiesDecrypt("urie");
|
|
|
|
// useEffect(() => {
|
|
// let userLevelId: number | undefined;
|
|
|
|
// if (userLevelId != undefined && userLevelId == 216) {
|
|
// setIsMabesApprover(true);
|
|
// }
|
|
// }, [userLevelId]);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
loading();
|
|
const response = await getInfoProfile();
|
|
|
|
// console.log(response?.data?.data);
|
|
setProfile(response?.data?.data);
|
|
close();
|
|
}
|
|
|
|
async function getInitData() {
|
|
const response = await getContentRewrite(id);
|
|
const data = response?.data?.data;
|
|
setContent(data);
|
|
|
|
const cleanArticleBody = data?.articleBody?.replace(/<img[^>]*>/g, "");
|
|
setArticleBody(cleanArticleBody || "");
|
|
}
|
|
|
|
initState();
|
|
getInitData();
|
|
}, []);
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
title: Yup.string().required("Judul tidak boleh kosong"),
|
|
});
|
|
|
|
const formOptions = {
|
|
resolver: yupResolver(validationSchema),
|
|
};
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
setValue,
|
|
} = useForm(formOptions);
|
|
|
|
const handleGenerateArtikel = async () => {
|
|
loading();
|
|
const request: any = {
|
|
advConfig: selectedAdvConfig,
|
|
style: selectedWritingStyle,
|
|
website: "None",
|
|
connectToWeb: true,
|
|
lang: selectedLanguage,
|
|
pointOfView: "None",
|
|
title: content?.title,
|
|
imageSource: "Web",
|
|
mainKeyword: content?.title,
|
|
additionalKeywords: content?.htmlDescription,
|
|
targetCountry: null,
|
|
articleSize: selectedSize,
|
|
projectId: 2,
|
|
createdBy: roleId,
|
|
clientId: "ngDLPPiorplznw2jTqVe3YFCz5xqKfUJ",
|
|
};
|
|
|
|
const res = await generateDataArticle(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 save = async (data: any) => {
|
|
const request = {
|
|
id: 1,
|
|
articleId: id.split("-")?.[0],
|
|
title: data.title,
|
|
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) {
|
|
close();
|
|
}
|
|
});
|
|
}
|
|
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<HeaderManagement />
|
|
<div className="flex flex-row">
|
|
<SidebarManagement />
|
|
<div className="w-2/3 p-12">
|
|
<div className="flex flex-col">
|
|
<div className="text-xl font-bold mb-5">Detail Content Rewrite</div>
|
|
<div className="p-8 border border-black rounded-lg">
|
|
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
|
|
{content && (
|
|
<>
|
|
<div className="w-full">
|
|
<div className="mb-1">
|
|
<p className="font-bold text-base">Judul</p>
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
className={`w-full mb-3 ${errors.title ? "is-invalid" : ""}`}
|
|
{...register("title", {
|
|
value: content?.title,
|
|
})}
|
|
id="title"
|
|
defaultValue={content?.title}
|
|
// onChange={(e) => setSelectedTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between gap-3 lg:flex-row">
|
|
<div className="w-1/2">
|
|
<div className="mb-1">
|
|
<p className="font-semibold">Main Keyword</p>
|
|
</div>
|
|
<div>
|
|
<Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
|
|
</div>
|
|
</div>
|
|
<div className="w-1/2">
|
|
<div className="mb-1">
|
|
<label htmlFor="title" className="font-semibold">
|
|
Additional Keyword{" "}
|
|
</label>
|
|
</div>
|
|
<Input
|
|
className="border mb-3 rounded-md p-2 border-black"
|
|
type="text"
|
|
id="additionalKeyword"
|
|
name="additionalKeyword"
|
|
// onChange={(e) =>
|
|
// setSelectedMainKeyword(e.target.value)
|
|
// }
|
|
placeholder="Masukan Additional Keyword disini!"
|
|
defaultValue={content?.additionalKeyword}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 justify-between lg:flex-row">
|
|
<div className="w-1/2">
|
|
<div className="font-semibold mb-1">
|
|
<label htmlFor="metaTitle">Meta Title</label>
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
className="border rounded-md mb-3 p-2 border-black"
|
|
id="metaTitle"
|
|
name="metaTitle"
|
|
// onChange={(e) =>
|
|
// setSelectedMainKeyword(e.target.value)
|
|
// }
|
|
placeholder="Masukan Meta Title disini!"
|
|
defaultValue={content?.metaTitle}
|
|
/>
|
|
</div>
|
|
<div className="w-1/2">
|
|
<div className="font-semibold mb-1">
|
|
<label htmlFor="metaDescription">Meta Description</label>
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
className="border rounded-md mb-3 p-2 border-black"
|
|
id="metaDescription"
|
|
name="metaDescription"
|
|
// onChange={(e) =>
|
|
// setSelectedMainKeyword(e.target.value)
|
|
// }
|
|
placeholder="Masukan Meta Description disini!"
|
|
defaultValue={content?.metaDescription}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
<div className="font-semibold mb-3">
|
|
<label htmlFor="description">Deskripsi Artikel</label>
|
|
<CustomEditor onChange={(e: any) => {}} initialData={articleBody || ""} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default page;
|