From e5771ae8f4409bd5dadafff40cd3bb8651c377b1 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Fri, 7 Feb 2025 10:59:22 +0700
Subject: [PATCH] fix detail artilce, magazine

---
 .../form/article/create-article-form.tsx      |  24 +++-
 components/form/article/edit-article-form.tsx | 123 ++++++++++--------
 .../form/magazine/create-magazine-form.tsx    |   6 +-
 .../form/magazine/edit-magazine-form.tsx      |  20 +--
 .../main/dashboard/dashboard-container.tsx    |   7 +-
 5 files changed, 108 insertions(+), 72 deletions(-)

diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx
index da7bd31..2888906 100644
--- a/components/form/article/create-article-form.tsx
+++ b/components/form/article/create-article-form.tsx
@@ -105,6 +105,7 @@ export default function CreateArticleForm() {
     null
   );
   const [thumbnailValidation, setThumbnailValidation] = useState("");
+  const [filesValidation, setFileValidation] = useState("");
   const [diseData, setDiseData] = useState<DiseData>();
   const [selectedWritingType, setSelectedWritingType] = useState("single");
 
@@ -162,10 +163,21 @@ export default function CreateArticleForm() {
   };
 
   const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
-    if (thumbnailImg.length < 1 && !selectedMainImage) {
-      setThumbnailValidation("Required");
+    if ((thumbnailImg.length < 1 && !selectedMainImage) || files.length < 1) {
+      if (files.length < 1) {
+        setFileValidation("Required");
+      } else {
+        setFileValidation("");
+      }
+      if (thumbnailImg.length < 1 && !selectedMainImage) {
+        setThumbnailValidation("Required");
+      } else {
+        setThumbnailValidation("");
+      }
     } else {
       setThumbnailValidation("");
+      setFileValidation("Required");
+
       MySwal.fire({
         title: "Simpan Data",
         text: "",
@@ -463,7 +475,6 @@ export default function CreateArticleForm() {
               placeholder=""
               label=""
               value={value}
-              isReadOnly
               onChange={onChange}
               labelPlacement="outside"
               className="w-full "
@@ -577,6 +588,9 @@ export default function CreateArticleForm() {
             </Fragment>
           ) : null}
         </Fragment>
+        {filesValidation !== "" && files.length < 1 && (
+          <p className="text-red-400 text-sm mb-3">Upload File Media</p>
+        )}
       </div>
       <div className="w-full lg:w-[35%]  flex flex-col gap-8">
         <div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
@@ -630,7 +644,9 @@ export default function CreateArticleForm() {
                 onChange={handleFileChange}
               />
               {thumbnailValidation !== "" && (
-                <p className="text-red-400 text-sm mb-3">Thumbnail harus ada</p>
+                <p className="text-red-400 text-sm mb-3">
+                  Upload thumbnail atau pilih dari File Media
+                </p>
               )}
             </>
           )}
diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index 6e77004..153c9f2 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -419,7 +419,6 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
               placeholder=""
               label=""
               value={value}
-              isReadOnly
               onChange={onChange}
               labelPlacement="outside"
               className="w-full "
@@ -509,8 +508,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
           detailfiles ? (
             <>
               <div>
-                <img
-                  src={`http://38.47.180.165:8802${detailfiles[mainImage]?.file_url}`}
+                <Image
+                  alt="main"
+                  width={720}
+                  height={480}
+                  src={detailfiles[mainImage]?.file_url}
                   className="w-[75%] mx-auto"
                 />
               </div>
@@ -521,8 +523,11 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                     onClick={() => setMainImage(index)}
                     className="cursor-pointer"
                   >
-                    <img
-                      src={`http://38.47.180.165:8802${file.file_url}`}
+                    <Image
+                      width={480}
+                      height={360}
+                      alt={`image-${index}`}
+                      src={file.file_url}
                       className="h-[100px] object-cover w-[150px]"
                     />
                   </a>
@@ -534,52 +539,46 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
           )
         ) : (
           <div className="flex flex-col">
-            {detailfiles?.map(
-              (file: any, index: number) =>
-                index > 0 && (
-                  <div
-                    key={file?.file_name + index}
-                    className=" flex justify-between border px-3.5 py-3 rounded-md"
-                  >
-                    <div className="flex gap-3 items-center">
-                      <div className="file-preview">
-                        <img
-                          src={`http://38.47.180.165:8802${file?.file_url}`}
-                          className="h-[50px] object-cover"
-                        />
-                      </div>
-                      <div>
-                        <div className=" text-sm  text-card-foreground">
-                          {file?.file_name}
-                        </div>
-                        <div className=" text-xs font-light text-muted-foreground">
-                          {Math.round(file?.size / 100) / 10 > 1000 ? (
-                            <>
-                              {(Math.round(file?.size / 100) / 10000).toFixed(
-                                1
-                              )}
-                            </>
-                          ) : (
-                            <>
-                              {(Math.round(file?.size / 100) / 10).toFixed(1)}
-                            </>
-                          )}
-                          {" kb"}
-                        </div>
-                      </div>
-                    </div>
-
-                    <Button
-                      className=" border-none rounded-full"
-                      variant="bordered"
-                      color="danger"
-                      onClick={() => handleDeleteFile(file?.id)}
-                    >
-                      <TimesIcon />
-                    </Button>
+            {detailfiles?.map((file: any, index: number) => (
+              <div
+                key={file?.file_name + index}
+                className=" flex justify-between border px-3.5 py-3 rounded-md"
+              >
+                <div className="flex gap-3 items-center">
+                  <div className="file-preview">
+                    <Image
+                      width={480}
+                      height={360}
+                      alt={`image-${index}`}
+                      src={file?.file_url}
+                      className="h-[100px] object-cover w-[150px]"
+                    />
                   </div>
-                )
-            )}
+                  <div>
+                    <div className=" text-sm  text-card-foreground">
+                      {file?.file_name}
+                    </div>
+                    <div className=" text-xs font-light text-muted-foreground">
+                      {Math.round(file?.size / 100) / 10 > 1000 ? (
+                        <>{(Math.round(file?.size / 100) / 10000).toFixed(1)}</>
+                      ) : (
+                        <>{(Math.round(file?.size / 100) / 10).toFixed(1)}</>
+                      )}
+                      {" kb"}
+                    </div>
+                  </div>
+                </div>
+
+                <Button
+                  className=" border-none rounded-full"
+                  variant="bordered"
+                  color="danger"
+                  onClick={() => handleDeleteFile(file?.id)}
+                >
+                  <TimesIcon />
+                </Button>
+              </div>
+            ))}
           </div>
         )}
       </div>
@@ -587,10 +586,18 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
         <div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">
           <p className="text-sm">Thubmnail</p>
           {isDetail ? (
-            <img src={thumbnail} className="w-[30%]" alt="thumbnail" />
+            <Image
+              width={480}
+              height={360}
+              src={thumbnail}
+              className="w-[30%]"
+              alt="thumbnail"
+            />
           ) : selectedMainImage && files.length >= selectedMainImage ? (
             <div className="flex flex-row">
-              <img
+              <Image
+                width={480}
+                height={360}
                 src={URL.createObjectURL(files[selectedMainImage - 1])}
                 className="w-[30%]"
                 alt="thumbnail"
@@ -607,7 +614,13 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
             </div>
           ) : thumbnail !== "" ? (
             <div className="flex flex-row">
-              <img src={thumbnail} className="w-[30%]" alt="thumbnail" />
+              <Image
+                width={480}
+                height={360}
+                src={thumbnail}
+                className="w-[30%]"
+                alt="thumbnail"
+              />
 
               <Button
                 className=" border-none rounded-full"
@@ -621,7 +634,9 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
             </div>
           ) : thumbnailImg.length > 0 ? (
             <div className="flex flex-row">
-              <img
+              <Image
+                width={480}
+                height={360}
                 src={URL.createObjectURL(thumbnailImg[0])}
                 className="w-[30%]"
                 alt="thumbnail"
diff --git a/components/form/magazine/create-magazine-form.tsx b/components/form/magazine/create-magazine-form.tsx
index 3eff9fe..700751e 100644
--- a/components/form/magazine/create-magazine-form.tsx
+++ b/components/form/magazine/create-magazine-form.tsx
@@ -389,7 +389,9 @@ export default function NewCreateMagazineForm() {
 
         {thumbnailImg.length > 0 ? (
           <div className="flex flex-row">
-            <img
+            <Image
+              width={720}
+              height={480}
               src={URL.createObjectURL(thumbnailImg[0])}
               className="w-[30%]"
               alt="thumbnail"
@@ -409,7 +411,7 @@ export default function NewCreateMagazineForm() {
             <input
               id="file-upload"
               type="file"
-              multiple
+              accept="image/*"
               className="w-fit h-fit"
               onChange={handleFileChange}
             />
diff --git a/components/form/magazine/edit-magazine-form.tsx b/components/form/magazine/edit-magazine-form.tsx
index d5430e9..c5ba30f 100644
--- a/components/form/magazine/edit-magazine-form.tsx
+++ b/components/form/magazine/edit-magazine-form.tsx
@@ -156,12 +156,8 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
     const data = res?.data?.data;
     setValue("title", data?.title);
     setValue("description", data?.description);
-    if (res?.data?.data?.thumbnailPath) {
-      setPrevThumbnail(
-        res?.data?.data?.thumbnailPath?.split("/")[
-          res?.data?.data?.thumbnailPath?.split("/").length - 1
-        ]
-      );
+    if (res?.data?.data?.thumbnailUrl) {
+      setPrevThumbnail(res?.data?.data?.thumbnailUrl);
     }
 
     setDetailFiles(data?.files);
@@ -477,8 +473,10 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
 
         {prevThumbnail !== "" ? (
           <div className="flex flex-row">
-            <img
-              src={`http://38.47.180.165:8802/magazines/thumbnail/viewer/${prevThumbnail}`}
+            <Image
+              width={720}
+              height={480}
+              src={prevThumbnail}
               className="w-[30%]"
               alt="thumbnail"
             />
@@ -496,7 +494,9 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
           </div>
         ) : thumbnailImg.length > 0 ? (
           <div className="flex flex-row">
-            <img
+            <Image
+              width={720}
+              height={480}
               src={URL.createObjectURL(thumbnailImg[0])}
               className="w-[30%]"
               alt="thumbnail"
@@ -516,7 +516,7 @@ export default function EditMagazineForm(props: { isDetail: boolean }) {
             <input
               id="file-upload"
               type="file"
-              multiple
+              accept="image/*"
               className="w-fit h-fit"
               onChange={handleFileChange}
             />
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index 3b403c3..513908c 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -264,7 +264,7 @@ export default function DashboardContainer() {
                 />
               </div>
             </div>
-            <div className="flex flex-row border-b-1 gap-1">
+            <div className="flex flex-row border-b-1 gap-1 py-1">
               <div className="w-[5%]">NO</div>
               <div className="w-[50%] lg:w-[70%]">POLDA</div>
               <div className="w-[45%] lg:w-[25%] text-right">
@@ -273,7 +273,10 @@ export default function DashboardContainer() {
             </div>
             <div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
               {postCount?.map((list) => (
-                <div key={list.id} className="flex flex-row border-b-1 gap-1">
+                <div
+                  key={list.id}
+                  className="flex flex-row border-b-1 gap-1 py-1"
+                >
                   <div className="w-[5%]">{list?.no}</div>
                   <div className="w-[85%]">{list?.name}</div>
                   <div