feat: enhance EditPost component with improved styling and structured subcomponents for title, cover image, and content editing

src/pages/EditPost.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Layout from '../components/Layout';
 import BlogEditor, { type BlogEditorRef } from '../blog/BlogEditor';
@@ -7,6 +7,307 @@ import { Toast } from '../components/Toast';
 import { useToast } from '../hooks/useToast';
 import '../App.css';
 
+const styles = {
+  page: {
+    maxWidth: '900px',
+    margin: '0 auto',
+    padding: '120px 2rem 80px',
+  },
+  header: {
+    marginBottom: '3rem',
+  },
+  heading: {
+    fontSize: '2.5rem',
+    fontWeight: 'bold',
+    color: 'var(--text-primary)',
+    marginBottom: '1rem',
+  },
+  subHeading: {
+    fontSize: '1.1rem',
+    color: 'var(--text-secondary)',
+  },
+  fieldWrapper: {
+    marginBottom: '2rem',
+  },
+  label: {
+    display: 'block',
+    fontSize: '1rem',
+    fontWeight: 600,
+    color: 'var(--text-primary)',
+    marginBottom: '0.5rem',
+  },
+  textInput: {
+    width: '100%',
+    padding: '1rem',
+    fontSize: '1.2rem',
+    border: '2px solid var(--border-color)',
+    borderRadius: '8px',
+    background: 'var(--bg-card)',
+    color: 'var(--text-primary)',
+    outline: 'none',
+    transition: 'border-color 0.3s ease',
+  },
+  coverDropZone: {
+    border: '2px dashed var(--border-color)',
+    borderRadius: '8px',
+    padding: '2rem',
+    textAlign: 'center' as const,
+    background: 'var(--bg-card)',
+    cursor: 'pointer',
+  },
+  coverPreview: {
+    position: 'relative' as const,
+  },
+  coverImage: {
+    maxWidth: '100%',
+    maxHeight: '400px',
+    borderRadius: '8px',
+  },
+  uploadOverlay: {
+    position: 'absolute' as const,
+    bottom: '10px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    background: 'rgba(0, 0, 0, 0.8)',
+    padding: '10px 20px',
+    borderRadius: '8px',
+    color: 'white',
+    minWidth: '200px',
+  },
+  progressTrack: {
+    background: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: '4px',
+    overflow: 'hidden',
+    height: '6px',
+    marginBottom: '5px',
+  },
+  progressBar: {
+    background: 'var(--accent-color, #4CAF50)',
+    height: '100%',
+    transition: 'width 0.3s ease',
+  },
+  helperText: {
+    color: 'var(--text-secondary)',
+    fontSize: '1rem',
+  },
+  helperCaption: {
+    color: 'var(--text-secondary)',
+    fontSize: '0.9rem',
+    marginTop: '0.5rem',
+  },
+  errorBanner: {
+    marginTop: '1rem',
+    padding: '1rem',
+    background: 'rgba(244, 67, 54, 0.1)',
+    border: '1px solid rgba(244, 67, 54, 0.3)',
+    borderRadius: '8px',
+    color: '#F44336',
+  },
+  editorWrapper: {
+    border: '2px solid var(--border-color)',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    background: 'var(--bg-card)',
+  },
+  actions: {
+    display: 'flex',
+    gap: '1rem',
+    justifyContent: 'flex-end',
+  },
+  secondaryButton: {
+    padding: '1rem 2rem',
+    fontSize: '1rem',
+    fontWeight: 600,
+    border: '2px solid var(--border-color)',
+    borderRadius: '8px',
+    background: 'transparent',
+    color: 'var(--text-primary)',
+    cursor: 'pointer',
+  },
+  primaryButton: {
+    padding: '1rem 2rem',
+    fontSize: '1rem',
+    fontWeight: 600,
+    border: 'none',
+    borderRadius: '8px',
+    background: 'var(--accent-color)',
+    color: 'white',
+    cursor: 'pointer',
+    transition: 'transform 0.2s ease',
+  },
+  disabledButton: {
+    background: 'var(--bg-secondary)',
+    cursor: 'not-allowed',
+    opacity: 0.6,
+    boxShadow: 'none',
+    transform: 'none',
+  },
+  loading: {
+    color: 'var(--text-secondary)',
+  },
+  errorContainer: {
+    padding: '2rem',
+    borderRadius: '12px',
+    border: '1px solid rgba(244, 67, 54, 0.3)',
+    background: 'rgba(244, 67, 54, 0.1)',
+    color: '#F44336',
+  },
+};
+
+interface TitleFieldProps {
+  title: string;
+  onChange: (value: string) => void;
+}
+
+function TitleField({ title, onChange }: TitleFieldProps) {
+  return (
+    <div style={styles.fieldWrapper}>
+      <label style={styles.label}>Title *</label>
+      <input
+        type="text"
+        value={title}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="Enter your blog post title..."
+        style={styles.textInput}
+      />
+    </div>
+  );
+}
+
+interface CoverImageSectionProps {
+  coverImage: string | null;
+  uploadError: string;
+  isUploading: boolean;
+  uploadProgress: number;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  onFileSelected: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+function CoverImageSection({
+  coverImage,
+  uploadError,
+  isUploading,
+  uploadProgress,
+  fileInputRef,
+  onFileSelected,
+}: CoverImageSectionProps) {
+  return (
+    <div style={styles.fieldWrapper}>
+      <label style={styles.label}>Cover Image *</label>
+      <div
+        style={styles.coverDropZone}
+        role="button"
+        tabIndex={0}
+        onClick={() => fileInputRef.current?.click()}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            fileInputRef.current?.click();
+          }
+        }}
+      >
+        {coverImage ? (
+          <div style={styles.coverPreview}>
+            <img src={coverImage} alt="Cover" style={styles.coverImage} />
+            {isUploading && (
+              <div style={styles.uploadOverlay}>
+                <div style={styles.progressTrack}>
+                  <div
+                    style={{
+                      ...styles.progressBar,
+                      width: `${uploadProgress}%`,
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px' }}>Uploading... {Math.round(uploadProgress)}%</div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div>
+            <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>📷</div>
+            <p style={styles.helperText}>Click or press Enter to upload a cover image</p>
+            <p style={styles.helperCaption}>PNG, JPG, GIF up to 10MB</p>
+          </div>
+        )}
+      </div>
+      {uploadError && <div style={styles.errorBanner}>❌ {uploadError}</div>}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={onFileSelected}
+        style={{ display: 'none' }}
+      />
+    </div>
+  );
+}
+
+interface EditorSectionProps {
+  editorRef: React.RefObject<BlogEditorRef | null>;
+  initialContent?: string;
+}
+
+function EditorSection({ editorRef, initialContent }: EditorSectionProps) {
+  return (
+    <div style={styles.fieldWrapper}>
+      <label style={styles.label}>Content *</label>
+      <div style={styles.editorWrapper}>
+        <BlogEditor ref={editorRef} initialContent={initialContent} />
+      </div>
+    </div>
+  );
+}
+
+interface ActionButtonsProps {
+  onCancel: () => void;
+  onSubmit: () => void;
+  disabled: boolean;
+  submitLabel: string;
+}
+
+function ActionButtons({ onCancel, onSubmit, disabled, submitLabel }: ActionButtonsProps) {
+  return (
+    <div style={styles.actions}>
+      <button type="button" style={styles.secondaryButton} onClick={onCancel}>
+        Cancel
+      </button>
+      <button
+        type="button"
+        onClick={onSubmit}
+        disabled={disabled}
+        style={{
+          ...styles.primaryButton,
+          ...(disabled ? styles.disabledButton : {}),
+        }}
+      >
+        {submitLabel}
+      </button>
+    </div>
+  );
+}
+
+interface ErrorStateProps {
+  message: string;
+}
+
+function ErrorState({ message }: ErrorStateProps) {
+  return <div style={styles.errorContainer}>{message}</div>;
+}
+
+function LoadingState() {
+  return <div style={styles.loading}>Loading post...</div>;
+}
+
+function PageHeader() {
+  return (
+    <header style={styles.header}>
+      <h1 style={styles.heading}>Edit Post</h1>
+      <p style={styles.subHeading}>Update your article content and cover image</p>
+    </header>
+  );
+}
+
 function EditPost() {
   const { postId } = useParams<{ postId: string }>();
   const navigate = useNavigate();
@@ -14,19 +315,23 @@ function EditPost() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { toasts, removeToast, success, error } = useToast();
 
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadError, setLoadError] = useState<string | null>(null);
-
   const [title, setTitle] = useState('');
-  const [initialContent, setInitialContent] = useState<string | undefined>(undefined);
+  const [initialContent, setInitialContent] = useState<string | undefined>();
   const [coverImage, setCoverImage] = useState<string | null>(null);
-  const [originalCoverImageKey, setOriginalCoverImageKey] = useState<string>('');
+  const [originalCoverImageKey, setOriginalCoverImageKey] = useState('');
   const [newCoverImageKey, setNewCoverImageKey] = useState<string | null>(null);
 
-  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
-  const [isUploading, setIsUploading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
-  const [uploadError, setUploadError] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadError, setUploadError] = useState('');
+
+  const effectiveCoverImageKey = useMemo(
+    () => newCoverImageKey ?? originalCoverImageKey,
+    [newCoverImageKey, originalCoverImageKey],
+  );
 
   const loadPost = useCallback(async () => {
     if (!postId) {
@@ -43,9 +348,7 @@ function EditPost() {
       setTitle(fetched.title);
       setInitialContent(fetched.content);
       setCoverImage(fetched.coverImageUrl ?? null);
-
+      setOriginalCoverImageKey(fetched.coverImageKey ?? '');
-      const fetchedCoverKey = fetched.coverImageKey ?? '';
-      setOriginalCoverImageKey(fetchedCoverKey);
       setNewCoverImageKey(null);
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Failed to load post.';
@@ -60,7 +363,8 @@ function EditPost() {
     void loadPost();
   }, [loadPost]);
 
-  const handleCoverImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleCoverImageChange = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
       if (!file) {
         return;
@@ -72,8 +376,8 @@ function EditPost() {
       }
 
       const reader = new FileReader();
-    reader.onload = (e) => {
+      reader.onload = (readerEvent) => {
-      setCoverImage(e.target?.result as string);
+        setCoverImage(readerEvent.target?.result as string);
       };
       reader.readAsDataURL(file);
 
@@ -97,9 +401,11 @@ function EditPost() {
       } finally {
         setIsUploading(false);
       }
-  };
+    },
+    [error, success],
+  );
 
-  const handleSubmit = async () => {
+  const handleSubmit = useCallback(async () => {
     if (!postId) {
       error('Invalid post identifier.');
       return;
@@ -116,24 +422,20 @@ function EditPost() {
     }
 
     const content = editorRef.current.getEditorState();
-
     setIsSubmitting(true);
 
     try {
-      const coverKeyToSend = newCoverImageKey ?? originalCoverImageKey;
-
       const payload: Parameters<typeof updateBlogPost>[0] = {
         postId,
         title: title.trim(),
         content,
       };
 
-      if (coverKeyToSend) {
+      if (effectiveCoverImageKey) {
-        payload.coverImageKey = coverKeyToSend;
+        payload.coverImageKey = effectiveCoverImageKey;
       }
 
       await updateBlogPost(payload);
-
       success('Blog post updated successfully!', 2000);
 
       setTimeout(() => {
@@ -145,292 +447,37 @@ function EditPost() {
     } finally {
       setIsSubmitting(false);
     }
-  };
+  }, [effectiveCoverImageKey, error, navigate, postId, success, title]);
+
+  const handleCancel = useCallback(() => {
+    navigate(postId ? `/blog/${postId}` : '/blog');
+  }, [navigate, postId]);
 
   return (
     <Layout currentPage="blog">
       <Toast toasts={toasts} onRemove={removeToast} />
-      <div
+      <div style={styles.page}>
-        style={{
+        {isLoading && <LoadingState />}
-          maxWidth: '900px',
+        {!isLoading && loadError && <ErrorState message={loadError} />}
-          margin: '0 auto',
+        {!isLoading && !loadError && (
-          padding: '120px 2rem 80px',
-        }}
-      >
-        {isLoading ? (
-          <div style={{ color: 'var(--text-secondary)' }}>Loading post...</div>
-        ) : loadError ? (
-          <div
-            style={{
-              padding: '2rem',
-              borderRadius: '12px',
-              border: '1px solid rgba(244, 67, 54, 0.3)',
-              background: 'rgba(244, 67, 54, 0.1)',
-              color: '#F44336',
-            }}
-          >
-            {loadError}
-          </div>
-        ) : (
           <>
-            <div style={{ marginBottom: '3rem' }}>
+            <PageHeader />
-              <h1
+            <TitleField title={title} onChange={setTitle} />
-                style={{
+            <CoverImageSection
-                  fontSize: '2.5rem',
+              coverImage={coverImage}
-                  fontWeight: 'bold',
+              uploadError={uploadError}
-                  color: 'var(--text-primary)',
+              isUploading={isUploading}
-                  marginBottom: '1rem',
+              uploadProgress={uploadProgress}
-                }}
+              fileInputRef={fileInputRef}
-              >
+              onFileSelected={handleCoverImageChange}
-                Edit Post
-              </h1>
-              <p style={{ fontSize: '1.1rem', color: 'var(--text-secondary)' }}>
-                Update your article content and cover image
-              </p>
-            </div>
-
-            <div style={{ marginBottom: '2rem' }}>
-              <label
-                style={{
-                  display: 'block',
-                  fontSize: '1rem',
-                  fontWeight: 600,
-                  color: 'var(--text-primary)',
-                  marginBottom: '0.5rem',
-                }}
-              >
-                Title *
-              </label>
-              <input
-                type="text"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                placeholder="Enter your blog post title..."
-                style={{
-                  width: '100%',
-                  padding: '1rem',
-                  fontSize: '1.2rem',
-                  border: '2px solid var(--border-color)',
-                  borderRadius: '8px',
-                  background: 'var(--bg-card)',
-                  color: 'var(--text-primary)',
-                  outline: 'none',
-                  transition: 'border-color 0.3s ease',
-                }}
-                onFocus={(e) => {
-                  e.currentTarget.style.borderColor = 'var(--accent-color)';
-                }}
-                onBlur={(e) => {
-                  e.currentTarget.style.borderColor = 'var(--border-color)';
-                }}
             />
-            </div>
+            <EditorSection editorRef={editorRef} initialContent={initialContent} />
-
+            <ActionButtons
-            <div style={{ marginBottom: '2rem' }}>
+              onCancel={handleCancel}
-              <label
+              onSubmit={handleSubmit}
-                style={{
-                  display: 'block',
-                  fontSize: '1rem',
-                  fontWeight: 600,
-                  color: 'var(--text-primary)',
-                  marginBottom: '0.5rem',
-                }}
-              >
-                Cover Image *
-              </label>
-
-              <div
-                style={{
-                  border: '2px dashed var(--border-color)',
-                  borderRadius: '8px',
-                  padding: '2rem',
-                  textAlign: 'center',
-                  background: 'var(--bg-card)',
-                  cursor: 'pointer',
-                  transition: 'border-color 0.3s ease',
-                }}
-                onClick={() => fileInputRef.current?.click()}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.borderColor = 'var(--accent-color)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.borderColor = 'var(--border-color)';
-                }}
-              >
-                {coverImage ? (
-                  <div style={{ position: 'relative' }}>
-                    <img
-                      src={coverImage}
-                      alt="Cover"
-                      style={{
-                        maxWidth: '100%',
-                        maxHeight: '400px',
-                        borderRadius: '8px',
-                      }}
-                    />
-                    {isUploading && (
-                      <div
-                        style={{
-                          position: 'absolute',
-                          bottom: '10px',
-                          left: '50%',
-                          transform: 'translateX(-50%)',
-                          background: 'rgba(0, 0, 0, 0.8)',
-                          padding: '10px 20px',
-                          borderRadius: '8px',
-                          color: 'white',
-                          minWidth: '200px',
-                        }}
-                      >
-                        <div
-                          style={{
-                            background: 'rgba(255, 255, 255, 0.2)',
-                            borderRadius: '4px',
-                            overflow: 'hidden',
-                            height: '6px',
-                            marginBottom: '5px',
-                          }}
-                        >
-                          <div
-                            style={{
-                              background: 'var(--accent-color, #4CAF50)',
-                              height: '100%',
-                              width: `${uploadProgress}%`,
-                              transition: 'width 0.3s ease',
-                            }}
-                          />
-                        </div>
-                        <div style={{ fontSize: '14px' }}>
-                          Uploading... {Math.round(uploadProgress)}%
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <div>
-                    <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>📷</div>
-                    <p style={{ color: 'var(--text-secondary)', fontSize: '1rem' }}>
-                      Click to upload cover image
-                    </p>
-                    <p
-                      style={{
-                        color: 'var(--text-secondary)',
-                        fontSize: '0.9rem',
-                        marginTop: '0.5rem',
-                      }}
-                    >
-                      PNG, JPG, GIF up to 10MB
-                    </p>
-                  </div>
-                )}
-              </div>
-
-              {uploadError && (
-                <div
-                  style={{
-                    marginTop: '1rem',
-                    padding: '1rem',
-                    background: 'rgba(244, 67, 54, 0.1)',
-                    border: '1px solid rgba(244, 67, 54, 0.3)',
-                    borderRadius: '8px',
-                    color: '#F44336',
-                  }}
-                >
-                  ❌ {uploadError}
-                </div>
-              )}
-
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                onChange={handleCoverImageChange}
-                style={{ display: 'none' }}
-              />
-            </div>
-
-            <div style={{ marginBottom: '2rem' }}>
-              <label
-                style={{
-                  display: 'block',
-                  fontSize: '1rem',
-                  fontWeight: 600,
-                  color: 'var(--text-primary)',
-                  marginBottom: '0.5rem',
-                }}
-              >
-                Content *
-              </label>
-              <div
-                style={{
-                  border: '2px solid var(--border-color)',
-                  borderRadius: '8px',
-                  overflow: 'hidden',
-                  background: 'var(--bg-card)',
-                }}
-              >
-                <BlogEditor ref={editorRef} initialContent={initialContent} />
-              </div>
-            </div>
-
-            <div
-              style={{
-                display: 'flex',
-                gap: '1rem',
-                justifyContent: 'flex-end',
-              }}
-            >
-              <button
-                onClick={() => navigate(`/blog/${postId}`)}
-                style={{
-                  padding: '1rem 2rem',
-                  fontSize: '1rem',
-                  fontWeight: 600,
-                  border: '2px solid var(--border-color)',
-                  borderRadius: '8px',
-                  background: 'transparent',
-                  color: 'var(--text-primary)',
-                  cursor: 'pointer',
-                  transition: 'all 0.3s ease',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = 'var(--bg-secondary)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleSubmit}
               disabled={isSubmitting || isUploading}
-                style={{
+              submitLabel={isSubmitting ? 'Saving...' : 'Save Changes'}
-                  padding: '1rem 2rem',
+            />
-                  fontSize: '1rem',
-                  fontWeight: 600,
-                  border: 'none',
-                  borderRadius: '8px',
-                  background: isSubmitting || isUploading ? 'var(--bg-secondary)' : 'var(--accent-color)',
-                  color: 'white',
-                  cursor: isSubmitting || isUploading ? 'not-allowed' : 'pointer',
-                  transition: 'all 0.3s ease',
-                  opacity: isSubmitting || isUploading ? 0.6 : 1,
-                }}
-                onMouseEnter={(e) => {
-                  if (!isSubmitting && !isUploading) {
-                    e.currentTarget.style.transform = 'translateY(-2px)';
-                    e.currentTarget.style.boxShadow = '0 4px 12px var(--accent-shadow)';
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.transform = 'translateY(0)';
-                  e.currentTarget.style.boxShadow = 'none';
-                }}
-              >
-                {isSubmitting ? 'Saving...' : 'Save Changes'}
-              </button>
-            </div>
           </>
         )}
       </div>