fix: update cover image handling in EditPost component and refactor post loading logic

src/pages/EditPost.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Layout from '../components/Layout';
 import BlogEditor, { type BlogEditorRef } from '../blog/BlogEditor';
@@ -20,40 +20,46 @@ function EditPost() {
   const [title, setTitle] = useState('');
   const [initialContent, setInitialContent] = useState<string | undefined>(undefined);
   const [coverImage, setCoverImage] = useState<string | null>(null);
-  const [coverImageKey, setCoverImageKey] = useState<string>('');
+  const [originalCoverImageKey, setOriginalCoverImageKey] = useState<string>('');
-  const [initialCoverImageKey, setInitialCoverImageKey] = useState<string>('');
+  const [newCoverImageKey, setNewCoverImageKey] = useState<string | null>(null);
 
   const [uploadProgress, setUploadProgress] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  useEffect(() => {
+  const loadPost = useCallback(async () => {
     if (!postId) {
       setLoadError('Post not found.');
       setIsLoading(false);
       return;
     }
 
-    (async () => {
+    setIsLoading(true);
-      try {
+    setLoadError(null);
-        const fetched = await getBlogPost(postId);
+
-        setTitle(fetched.title);
+    try {
-        setInitialContent(fetched.content);
+      const fetched = await getBlogPost(postId);
-        setCoverImage(fetched.coverImageUrl ?? null);
+      setTitle(fetched.title);
-        const fetchedCoverKey = fetched.coverImageKey ?? '';
+      setInitialContent(fetched.content);
-        setCoverImageKey(fetchedCoverKey);
+      setCoverImage(fetched.coverImageUrl ?? null);
-        setInitialCoverImageKey(fetchedCoverKey);
+
-      } catch (err) {
+      const fetchedCoverKey = fetched.coverImageKey ?? '';
-        const message = err instanceof Error ? err.message : 'Failed to load post.';
+      setOriginalCoverImageKey(fetchedCoverKey);
-        setLoadError(message);
+      setNewCoverImageKey(null);
-        console.error('Failed to load blog post for editing:', err);
+    } catch (err) {
-      } finally {
+      const message = err instanceof Error ? err.message : 'Failed to load post.';
-        setIsLoading(false);
+      setLoadError(message);
-      }
+      console.error('Failed to load blog post for editing:', err);
-    })();
+    } finally {
+      setIsLoading(false);
+    }
   }, [postId]);
 
+  useEffect(() => {
+    void loadPost();
+  }, [loadPost]);
+
   const handleCoverImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) {
@@ -80,7 +86,7 @@ function EditPost() {
         setUploadProgress(progress);
       });
 
-      setCoverImageKey(fileKey);
+  setNewCoverImageKey(fileKey);
       setCoverImage(url);
       setUploadProgress(100);
       success('Cover image uploaded successfully!', 2000);
@@ -114,7 +120,7 @@ function EditPost() {
     setIsSubmitting(true);
 
     try {
-      const coverKeyToSend = coverImageKey || initialCoverImageKey;
+      const coverKeyToSend = newCoverImageKey ?? originalCoverImageKey;
 
       const payload: Parameters<typeof updateBlogPost>[0] = {
         postId,