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,30 +20,33 @@ 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 [initialCoverImageKey, setInitialCoverImageKey] = useState<string>('');
+  const [originalCoverImageKey, setOriginalCoverImageKey] = 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);
+    setLoadError(null);
+
     try {
       const fetched = await getBlogPost(postId);
       setTitle(fetched.title);
       setInitialContent(fetched.content);
       setCoverImage(fetched.coverImageUrl ?? null);
+
       const fetchedCoverKey = fetched.coverImageKey ?? '';
-        setCoverImageKey(fetchedCoverKey);
-        setInitialCoverImageKey(fetchedCoverKey);
+      setOriginalCoverImageKey(fetchedCoverKey);
+      setNewCoverImageKey(null);
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Failed to load post.';
       setLoadError(message);
@@ -51,9 +54,12 @@ function EditPost() {
     } 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,