From fdc408e3030d31b825bc681da229ac668a582225 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Sun, 29 Dec 2024 19:12:30 +0800
Subject: [PATCH] feat:form-ai

---
 components/form/content/image-ai-form.tsx | 72 +++++++++++------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/components/form/content/image-ai-form.tsx b/components/form/content/image-ai-form.tsx
index 8bc0b421..d991a45c 100644
--- a/components/form/content/image-ai-form.tsx
+++ b/components/form/content/image-ai-form.tsx
@@ -35,6 +35,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { loading } from "@/lib/swal";
 import {
   generateDataArticle,
+  getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
 } from "@/service/content/ai";
@@ -86,14 +87,17 @@ export default function FormImageAI() {
   const [selectedSEO, setSelectedSEO] = useState<string>("");
   const [title, setTitle] = useState<string>("");
   const [selectedAdvConfig, setSelectedAdvConfig] = useState<string>("");
-  const [articleIds, setArticleIds] = useState<any>([]);
+  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const [articleIds, setArticleIds] = useState<string[]>([]);
+  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
+  const [articleBody, setArticleBody] = useState<string>("");
   const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
     null
   );
-  const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
-  const [articleBody, setArticleBody] = useState<string>("");
-  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [detailData, setDetailData] = useState<any>(null);
+  const [articleImages, setArticleImages] = useState<string[]>([]);
 
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
@@ -211,7 +215,6 @@ export default function FormImageAI() {
   };
 
   const handleGenerateArtikel = async () => {
-    loading();
     const request = {
       advConfig: selectedAdvConfig,
       style: selectedWritingStyle,
@@ -219,7 +222,7 @@ export default function FormImageAI() {
       connectToWeb: true,
       lang: selectedLanguage,
       pointOfView: "None",
-      title: selectedTitle,
+      title: title,
       imageSource: "Web",
       mainKeyword: selectedMainKeyword,
       additionalKeywords: selectedSEO,
@@ -241,7 +244,7 @@ export default function FormImageAI() {
     const newArticleId = res?.data?.data?.id;
     setIsGeneratedArticle(true);
 
-    setArticleIds((prevIds: any) => {
+    setArticleIds((prevIds: string[]) => {
       if (prevIds.length < 5) {
         return [...prevIds, newArticleId];
       } else {
@@ -251,12 +254,30 @@ export default function FormImageAI() {
       }
     });
 
-    Cookies.set("nulisAIArticleIdTemp", articleIds);
+    Cookies.set("nulisAIArticleIdTemp", JSON.stringify(articleIds));
   };
 
-  const handleArticleIdClick = (articleId: string) => {
-    setEditingArticleId(articleId);
-    setSelectedArticleId(articleId);
+  // const handleArticleIdClick = (articleId: string) => {
+  //   setEditingArticleId(articleId);
+  //   setSelectedArticleId(articleId);
+  // };
+
+  const handleArticleIdClick = async (id: string) => {
+    // Fetch article details by ID
+    const res = await getDetailArticle(id);
+    const articleData = res?.data?.data;
+
+    const cleanArticleBody = articleData?.articleBody?.replace(
+      /<img[^>]*>/g,
+      ""
+    );
+    const articleImagesData = articleData?.imagesUrl?.split(",");
+
+    // Update state with new article data
+    setArticleBody(cleanArticleBody || "");
+    setDetailData(articleData);
+    setSelectedArticleId(id);
+    setArticleImages(articleImagesData || []);
   };
 
   const handleEditClick = () => {
@@ -591,7 +612,7 @@ export default function FormImageAI() {
 
                 {isGeneratedArticle && (
                   <div className="mt-3 pb-0">
-                    {articleIds.map((id: any, index: any) => (
+                    {articleIds.map((id: string, index: number) => (
                       <Button
                         key={index}
                         className={`btn m-1 ${
@@ -644,7 +665,7 @@ export default function FormImageAI() {
                     render={({ field: { onChange, value } }) => (
                       <JoditEditor
                         ref={editor}
-                        value={value || articleBody} // Show the selected article body in the editor
+                        value={articleBody || value} // Ensure the JoditEditor receives the correct article body
                         onChange={onChange}
                         className="dark:text-black"
                       />
@@ -656,29 +677,6 @@ export default function FormImageAI() {
                     </p>
                   )}
                 </div>
-
-                {/* {isGeneratedArticle && articleIds.length > 0 && (
-                  <div className="my-4">
-                    <h3>Generated Article IDs:</h3>
-                    {articleIds.map((id: any, index: any) => (
-                      <span
-                        key={index}
-                        className="badge badge-pill bg-primary text-white cursor-pointer mx-2"
-                        onClick={() => handleArticleIdClick(id)}
-                      >
-                        {id}
-                      </span>
-                    ))}
-                  </div>
-                )} */}
-
-                {/* {editingArticleId && (
-                  <div className="my-4">
-                    <Button color="secondary" onClick={handleEditClick}>
-                      Edit Article
-                    </Button>
-                  </div>
-                )} */}
               </div>
               <div className="py-3">
                 <Label>Attachment</Label>