diff --git a/client/src/components/InsertPostImage.tsx b/client/src/components/InsertPostImage.tsx index 6758f60..0536ce8 100644 --- a/client/src/components/InsertPostImage.tsx +++ b/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 = ({ onImageSelected }) => { +const InsertPostImage: React.FC = ({ onImageSelected, initialImageUrl }) => { const [selectedFile, setSelectedFile] = useState(null); const [previewImage, setPreviewImage] = useState(''); + 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) => { const selectedFiles = event.target.files as FileList; const file = selectedFiles?.[0] || null; @@ -17,7 +26,7 @@ const InsertPostImage: React.FC = ({ onImageSelected }) => }; return ( -
@@ -27,10 +36,10 @@ const InsertPostImage: React.FC = ({ onImageSelected }) => className="mb-3" />
- {selectedFile && ( + {(previewImage || initialImageUrl) && (
Selected Image diff --git a/client/src/pages/EditPostPage.tsx b/client/src/pages/EditPostPage.tsx index cbe6e77..b0649e7 100644 --- a/client/src/pages/EditPostPage.tsx +++ b/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) => { - console.log("Tag Object: ", tagObject); // Debug each tagObject - return tagObject.tag; // Adjust according to actual key - }); - + const postTags = postData.Tags.map((tagObject: any) => tagObject.tag); 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 - - console.log("Updating formData:", formData); + formData.append("tags", JSON.stringify(tags)); 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() {
{ - setFieldValue("postImage", file); - }} + onImageSelected={(file) => setFieldValue("postImage", file)} + initialImageUrl={post.postImage} // Pass the image URL here />