Retrieve postImage in EditPostPage

client/src/components/InsertPostImage.tsx

@@ -1,13 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 interface InsertPostImageProps {
     onImageSelected: (file: File | null) => void;
+    initialImageUrl?: string; // Optional prop for initial image URL
 }
 
-const InsertPostImage: React.FC<InsertPostImageProps> = ({ onImageSelected }) => {
+const InsertPostImage: React.FC<InsertPostImageProps> = ({ onImageSelected, initialImageUrl }) => {
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [previewImage, setPreviewImage] = useState<string>('');
 
+    useEffect(() => {
+        // Update the preview image if there's an initial image URL
+        if (initialImageUrl) {
+            setPreviewImage(initialImageUrl);
+            setSelectedFile(null); // Clear any file selection
+        }
+    }, [initialImageUrl]);
+
     const handleImageSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
         const selectedFiles = event.target.files as FileList;
         const file = selectedFiles?.[0] || null;
@@ -17,7 +26,7 @@ const InsertPostImage: React.FC<InsertPostImageProps> = ({ onImageSelected }) =>
     };
 
     return (
-        <div className={`flex flex-col dark:bg-zinc-800 rounded-md ${selectedFile ? 'h-auto' : 'h-20'}`}
+        <div className={`flex flex-col dark:bg-zinc-800 rounded-md ${selectedFile || initialImageUrl ? 'h-auto' : 'h-20'}`}
             style={{ width: 300 }}>
             <div>
                 <div className="flex flex-col">
@@ -27,10 +36,10 @@ const InsertPostImage: React.FC<InsertPostImageProps> = ({ onImageSelected }) =>
                         className="mb-3"
                     />
                 </div>
-                {selectedFile && (
+                {(previewImage || initialImageUrl) && (
                     <div>
                         <img
-                            src={previewImage}
+                            src={previewImage || initialImageUrl}
                             alt="Selected Image"
                             className="w-full h-full object-cover rounded-md"
                         />

client/src/pages/EditPostPage.tsx

@@ -41,7 +41,7 @@ function EditPostPage() {
   const [post, setPost] = useState({
     title: "",
     content: "",
-    postImage: null,
+    postImage: "",
     tags: "",
   });
   const [loading, setLoading] = useState(true);
@@ -51,27 +51,15 @@ function EditPostPage() {
       try {
         const response = await instance.get(`${config.serverAddress}/post/${id}`);
         const postData = response.data;
-        console.log("Fetched data: ", postData)
-        console.log("postData.tags data: ", postData.Tags);
 
         if (postData && postData.Tags) {
-          // Adjust the structure according to the actual shape of tagObject
+          const postTags = postData.Tags.map((tagObject: any) => tagObject.tag);
-          const postTags = postData.Tags.map((tagObject: any) => {
-            console.log("Tag Object: ", tagObject); // Debug each tagObject
-            return tagObject.tag; // Adjust according to actual key
-          });
-
           setTags(postTags);
-          console.log("postTags:", postTags);
-
-        } else {
-          console.log("postData.Tags is not available or is undefined");
         }
 
-        // Set the post data including other fields
         setPost({
           ...postData,
-          postImage: postData.postImage ? `${config.serverAddress}/post/post-image/${id}` : null,
+          postImage: postData.postImage ? `${config.serverAddress}/post/post-image/${id}` : "",
           tags: tags,
         });
 
@@ -85,11 +73,6 @@ function EditPostPage() {
     fetchPost();
   }, [id]);
 
-
-  useEffect(() => {
-    console.log("Tags updated: ", tags);
-  }, [tags]);
-
   const handleSubmit = async (
     values: any,
     { setSubmitting, resetForm, setFieldError, setFieldValue }: any
@@ -98,16 +81,11 @@ function EditPostPage() {
       const formData = new FormData();
       formData.append("title", values.title);
       formData.append("content", values.content);
-      // Append postImage only if it exists
-
-      console.log(values.postImage instanceof File); // Should be true if it's a File
 
       if (values.postImage && values.postImage instanceof File) {
         formData.append("postImage", values.postImage);
       }
-      formData.append("tags", JSON.stringify(tags)); // This sends tags as a JSON string
+      formData.append("tags", JSON.stringify(tags));
-
-      console.log("Updating formData:", formData);
 
       const response = await instance.put(
         config.serverAddress + `/post/${id}`,
@@ -116,7 +94,6 @@ function EditPostPage() {
       );
 
       if (response.status === 200) {
-        console.log("Post updated successfully:", response.data);
         resetForm();
         setTags([]);
         setFieldValue("postImage", null);
@@ -184,9 +161,8 @@ function EditPostPage() {
                 <div className="text-sm">
                   <div className="flex flex-row gap-10">
                     <InsertPostImage
-                      onImageSelected={(file) => {
+                      onImageSelected={(file) => setFieldValue("postImage", file)}
-                        setFieldValue("postImage", file);
+                      initialImageUrl={post.postImage} // Pass the image URL here
-                      }}
                     />
                   </div>
                 </div>