farheen_blog_app 2.0.2 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "farheen_blog_app",
   "private": false,
-  "version": "2.0.2",
+  "version": "3.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.css

@@ -9,4 +9,13 @@
 .animate-fade-in-up {
   opacity: 0;
   animation: fadeInUp 0.5s ease forwards;
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

package/src/App.jsx

@@ -1,11 +1,14 @@
 import './App.css'
 import AppRoutes from './routes/AppRoutes'
 import { UserProvider } from './context/UserContext'
+import { ToastProvider } from './context/ToastContext'
 
 function App() {
   return (
     <UserProvider>
-      <AppRoutes />
+      <ToastProvider>
+        <AppRoutes />
+      </ToastProvider>
     </UserProvider>
   )
 }

package/src/components/CommentTable.jsx

@@ -1,8 +1,147 @@
-const CommentTable = ({ comments }) => {
+import { useState } from "react";
+import { useUser } from "../context/UserContext";
+import { Trash2, Reply, CornerDownRight, X, MessageSquare } from "lucide-react";
+
+const CommentNode = ({ comment, onAddReply, onDeleteComment, depth = 0 }) => {
+    const { user } = useUser();
+    const [isReplying, setIsReplying] = useState(false);
+    const [replyText, setReplyText] = useState("");
+
+    const handleReplySubmit = (e) => {
+        e.preventDefault();
+        if (!replyText.trim()) return;
+        onAddReply(comment._id, replyText);
+        setReplyText("");
+        setIsReplying(false);
+    };
+
+    const authorName = comment.author?.name || "Anonymous";
+    const avatarLetter = authorName.charAt(0).toUpperCase();
+    const isAuthor = user && comment.author && (comment.author._id === user.id || comment.author === user.id);
+    const isAdmin = user && (user.isAdmin || user.role === "Admin" || user.role === "admin");
+    const canDelete = isAuthor || isAdmin;
+
+    const displayAvatar = comment.author?.profilePicture
+        ? `http://localhost:3000${comment.author.profilePicture}`
+        : null;
+
+    return (
+        <div className="flex flex-col">
+            {/* Comment Body */}
+            <div className="flex gap-4 group">
+                <div className="flex-shrink-0 relative">
+                    {displayAvatar ? (
+                        <img
+                            src={displayAvatar}
+                            alt={authorName}
+                            className="w-10 h-10 rounded-full object-cover border border-indigo-100 shadow-sm"
+                            onError={(e) => {
+                                e.target.onerror = null;
+                                e.target.style.display = "none";
+                            }}
+                        />
+                    ) : (
+                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 border border-indigo-100 flex items-center justify-center text-white font-bold text-base shadow-sm">
+                            {avatarLetter}
+                        </div>
+                    )}
+                </div>
+                
+                <div className="flex-1 bg-gray-50 hover:bg-gray-100/70 rounded-2xl rounded-tl-none p-4 shadow-sm border border-gray-100 transition-all duration-200">
+                    <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-2">
+                            <h4 className="font-semibold text-gray-900 text-sm">{authorName}</h4>
+                            {comment.author?.role === "Admin" && (
+                                <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-50 text-rose-600 border border-rose-100 uppercase">Admin</span>
+                            )}
+                        </div>
+                        <span className="text-xs text-gray-500 font-medium bg-white px-2 py-0.5 rounded-full border border-gray-100 shadow-[0_1px_2px_rgba(0,0,0,0.02)]">
+                            {comment.createdAt ? new Date(comment.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Just now'}
+                        </span>
+                    </div>
+                    
+                    <p className="text-gray-700 leading-relaxed text-sm whitespace-pre-wrap">
+                        {comment.content}
+                    </p>
+
+                    <div className="flex items-center gap-4 mt-3 pt-2 border-t border-gray-200/50">
+                        {user && (
+                            <button 
+                                onClick={() => setIsReplying(!isReplying)}
+                                className="inline-flex items-center text-xs font-semibold text-indigo-600 hover:text-indigo-800 transition-colors gap-1 cursor-pointer"
+                            >
+                                <Reply className="w-3 h-3" />
+                                Reply
+                            </button>
+                        )}
+                        {canDelete && (
+                            <button 
+                                onClick={() => onDeleteComment(comment._id)}
+                                className="inline-flex items-center text-xs font-semibold text-rose-600 hover:text-rose-800 transition-colors gap-1 ml-auto md:opacity-0 group-hover:opacity-100 cursor-pointer"
+                            >
+                                <Trash2 className="w-3 h-3" />
+                                Delete
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Inline Reply Form */}
+            {isReplying && (
+                <div className="flex gap-4 mt-3 ml-6 pl-4 border-l-2 border-dashed border-indigo-200">
+                    <div className="w-6 h-6 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-500 text-xs font-bold border border-indigo-100">
+                        <CornerDownRight className="w-3 h-3" />
+                    </div>
+                    <form onSubmit={handleReplySubmit} className="flex-1 flex gap-2">
+                        <input
+                            type="text"
+                            value={replyText}
+                            onChange={(e) => setReplyText(e.target.value)}
+                            placeholder={`Reply to ${authorName}...`}
+                            className="flex-1 bg-white border border-gray-300 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
+                            autoFocus
+                        />
+                        <button
+                            type="submit"
+                            className="bg-indigo-600 text-white rounded-xl px-4 py-2 text-xs font-semibold hover:bg-indigo-700 active:bg-indigo-800 transition-colors cursor-pointer"
+                        >
+                            Reply
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setIsReplying(false)}
+                            className="bg-gray-100 text-gray-500 rounded-xl px-3 py-2 text-xs font-semibold hover:bg-gray-200 transition-colors cursor-pointer"
+                        >
+                            <X className="w-3.5 h-3.5" />
+                        </button>
+                    </form>
+                </div>
+            )}
+
+            {/* Render Nested Replies */}
+            {comment.replies && comment.replies.length > 0 && (
+                <div className="ml-6 md:ml-10 border-l border-indigo-100 pl-4 md:pl-6 mt-3 space-y-4">
+                    {comment.replies.map((reply) => (
+                        <CommentNode
+                            key={reply._id}
+                            comment={reply}
+                            onAddReply={onAddReply}
+                            onDeleteComment={onDeleteComment}
+                            depth={depth + 1}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const CommentTable = ({ comments, onAddReply, onDeleteComment }) => {
     if (!comments || comments.length === 0) {
         return (
             <div className="text-center py-12 px-4 rounded-2xl border border-dashed border-gray-300 bg-gray-50">
-                <div className="text-4xl mb-3 opacity-30">💬</div>
+                <MessageSquare className="w-12 h-12 mx-auto text-gray-300 mb-3" />
                 <h3 className="text-lg font-medium text-gray-900">No comments yet</h3>
                 <p className="text-gray-500 mt-1">Be the first to share your thoughts!</p>
             </div>
@@ -11,25 +150,13 @@ const CommentTable = ({ comments }) => {
 
     return (
         <div className="space-y-6">
-            {comments.map((comment, index) => (
-                <div key={comment._id || index} className="flex gap-4 animate-fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
-                    <div className="flex-shrink-0">
-                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-100 to-indigo-100 border border-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-lg shadow-sm">
-                            {(comment.user?.name || "A").charAt(0).toUpperCase()}
-                        </div>
-                    </div>
-                    <div className="flex-1 bg-gray-50 rounded-2xl rounded-tl-none p-5 shadow-sm border border-gray-100">
-                        <div className="flex items-center justify-between mb-2">
-                            <h4 className="font-semibold text-gray-900">{comment.user?.name || "Anonymous"}</h4>
-                            <span className="text-xs font-medium text-gray-500 bg-white px-2 py-1 rounded-full shadow-sm border border-gray-100">
-                                {comment.createdAt ? new Date(comment.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Just now'}
-                            </span>
-                        </div>
-                        <p className="text-gray-700 leading-relaxed text-sm">
-                            {comment.text}
-                        </p>
-                    </div>
-                </div>
+            {comments.map((comment) => (
+                <CommentNode
+                    key={comment._id}
+                    comment={comment}
+                    onAddReply={onAddReply}
+                    onDeleteComment={onDeleteComment}
+                />
             ))}
         </div>
     );

package/src/components/EditBlogModal.jsx

@@ -0,0 +1,246 @@
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { updatePost } from "../services/postService";
+import { useToast } from "../context/ToastContext";
+import FormField from "./FormField";
+import { X, Image as ImageIcon, Save, Loader2, AlertCircle } from "lucide-react";
+
+const EditBlogModal = ({ blog, isOpen, onClose, onSuccess }) => {
+    const { showToast } = useToast();
+    const [loading, setLoading] = useState(false);
+    const [existingImages, setExistingImages] = useState([]);
+    const [newPreviewUrls, setNewPreviewUrls] = useState([]);
+
+    const {
+        register,
+        handleSubmit,
+        watch,
+        reset,
+        formState: { errors }
+    } = useForm();
+
+    const newImageFiles = watch("images");
+
+    // Populate form fields when blog changes
+    useEffect(() => {
+        if (blog && isOpen) {
+            reset({
+                title: blog.title || "",
+                description: blog.description || "",
+                content: blog.content || "",
+                images: null
+            });
+            setExistingImages(blog.images || []);
+            setNewPreviewUrls([]);
+        }
+    }, [blog, isOpen, reset]);
+
+    // Handle previewing newly selected files
+    useEffect(() => {
+        if (newImageFiles && newImageFiles.length > 0) {
+            const urls = Array.from(newImageFiles).map(file => URL.createObjectURL(file));
+            setNewPreviewUrls(urls);
+            return () => {
+                urls.forEach(url => URL.revokeObjectURL(url));
+            };
+        } else {
+            setNewPreviewUrls([]);
+        }
+    }, [newImageFiles]);
+
+    if (!isOpen || !blog) return null;
+
+    const onSubmit = async (data) => {
+        try {
+            setLoading(true);
+
+            const formData = new FormData();
+            formData.append("title", data.title);
+            formData.append("description", data.description);
+            formData.append("content", data.content);
+
+            if (data.images && data.images.length > 0) {
+                Array.from(data.images).forEach((file) => {
+                    formData.append("images", file);
+                });
+            }
+
+            const id = blog._id || blog.id;
+            await updatePost(id, formData);
+            showToast("Blog post updated successfully!", "success");
+            onSuccess();
+            onClose();
+        } catch (error) {
+            console.error("Update blog error:", error);
+            showToast(
+                error.response?.data?.message ||
+                error.response?.message ||
+                "Failed to update post",
+                "error"
+            );
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
+            <div className="bg-white rounded-3xl shadow-2xl border border-slate-100 max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col animate-fade-in-up">
+
+                {/* Header */}
+                <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between">
+                    <div>
+                        <h2 className="text-xl font-bold text-slate-800">Edit Blog Post</h2>
+                        <p className="text-xs text-slate-500 mt-0.5">Modify the title, description, content, or cover images</p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="text-slate-400 hover:text-slate-600 hover:bg-slate-50 p-2 rounded-xl transition-all cursor-pointer"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Form Body */}
+                <form onSubmit={handleSubmit(onSubmit)} className="flex-1 overflow-y-auto p-6 space-y-6">
+                    <FormField
+                        label="Post Title"
+                        placeholder="Catchy blog title"
+                        error={errors.title}
+                        {...register("title", {
+                            required: "Title is required",
+                            minLength: {
+                                value: 5,
+                                message: "Title must be at least 5 characters"
+                            }
+                        })}
+                    />
+
+                    <FormField
+                        label="Post Description"
+                        placeholder="Brief summary"
+                        error={errors.description}
+                        {...register("description", {
+                            maxLength: {
+                                value: 200,
+                                message: "Description cannot exceed 200 characters"
+                            }
+                        })}
+                    />
+
+                    <FormField
+                        label="Post Content"
+                        type="textarea"
+                        placeholder="Post content..."
+                        error={errors.content}
+                        className="h-44"
+                        {...register("content", {
+                            required: "Post content is required",
+                            minLength: {
+                                value: 20,
+                                message: "Post content must be at least 20 characters"
+                            }
+                        })}
+                    />
+
+                    {/* Existing Images */}
+                    {existingImages.length > 0 && (
+                        <div>
+                            <label className="block text-sm font-semibold text-slate-700 mb-2">
+                                Current Cover Images
+                            </label>
+                            <div className="grid grid-cols-3 sm:grid-cols-4 gap-3 bg-slate-50 p-3 rounded-2xl border border-slate-100">
+                                {existingImages.map((img, idx) => (
+                                    <div key={idx} className="relative aspect-video rounded-xl overflow-hidden border border-slate-200 shadow-sm">
+                                        <img src={`http://localhost:3000${img}`} alt="Current" className="w-full h-full object-cover" />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* New Upload Input */}
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-700 mb-2">
+                            Upload New Cover Images (Optional)
+                        </label>
+
+                        {newPreviewUrls.length > 0 && (
+                            <div className="bg-amber-50 border border-amber-200/60 rounded-xl p-3.5 flex items-start gap-2.5 text-amber-800 text-xs font-medium mb-3">
+                                <AlertCircle className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" />
+                                <span>Note: Uploading new images will replace all current cover images for this blog post.</span>
+                            </div>
+                        )}
+
+                        <div className="flex items-center justify-center w-full">
+                            <label className="flex flex-col items-center justify-center w-full min-h-32 border-2 border-slate-200 border-dashed rounded-xl cursor-pointer bg-slate-50 hover:bg-slate-100 transition-colors group overflow-hidden relative">
+                                {newPreviewUrls.length > 0 ? (
+                                    <div className="w-full p-4 flex flex-col gap-3">
+                                        <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
+                                            {newPreviewUrls.map((url, idx) => (
+                                                <div key={idx} className="relative aspect-video rounded-xl overflow-hidden shadow-sm border border-slate-200">
+                                                    <img src={url} alt={`Preview ${idx + 1}`} className="w-full h-full object-cover" />
+                                                </div>
+                                            ))}
+                                        </div>
+                                        <div className="text-center">
+                                            <span className="text-[11px] font-semibold text-indigo-700 bg-indigo-50 border border-indigo-100 rounded-lg px-2.5 py-1 inline-block">
+                                                Change New Images ({newPreviewUrls.length} selected)
+                                            </span>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className="flex flex-col items-center justify-center py-4">
+                                        <ImageIcon className="w-6 h-6 text-slate-400 mb-1 group-hover:scale-110 transition-transform" />
+                                        <p className="text-xs text-slate-500 font-medium">
+                                            Click to replace cover images
+                                        </p>
+                                    </div>
+                                )}
+                                <input
+                                    type="file"
+                                    className="hidden"
+                                    accept="image/*"
+                                    multiple
+                                    {...register("images")}
+                                />
+                            </label>
+                        </div>
+                    </div>
+                </form>
+
+                {/* Footer Actions */}
+                <div className="px-6 py-4 border-t border-slate-100 bg-slate-50/50 flex justify-end gap-3">
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="px-4 py-2 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-100 active:bg-slate-200 transition-colors cursor-pointer"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        onClick={handleSubmit(onSubmit)}
+                        disabled={loading}
+                        className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-semibold flex items-center gap-1.5 shadow-md shadow-indigo-100 disabled:opacity-50 cursor-pointer"
+                    >
+                        {loading ? (
+                            <>
+                                <Loader2 className="w-4 h-4 animate-spin" />
+                                Saving...
+                            </>
+                        ) : (
+                            <>
+                                <Save className="w-4 h-4" />
+                                Save Changes
+                            </>
+                        )}
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
+export default EditBlogModal;

package/src/components/FormField.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+const FormField = React.forwardRef(({ 
+    label, 
+    name, 
+    type = "text", 
+    placeholder, 
+    error, 
+    className = "", 
+    ...props 
+}, ref) => {
+    return (
+        <div className={`flex flex-col gap-1.5 w-full ${className}`}>
+            {label && (
+                <label className="block text-sm font-semibold text-slate-700 ml-1">
+                    {label}
+                </label>
+            )}
+            
+            {type === "textarea" ? (
+                <textarea
+                    id={name}
+                    name={name}
+                    placeholder={placeholder}
+                    ref={ref}
+                    className={`w-full px-4 py-3 bg-gray-50/50 border rounded-xl focus:outline-none focus:ring-2 focus:bg-white transition-all shadow-sm text-sm resize-y leading-relaxed ${
+                        error 
+                            ? "border-rose-300 focus:ring-rose-500/20 focus:border-rose-500 bg-rose-50/30" 
+                            : "border-gray-200 focus:ring-indigo-500/50 focus:border-indigo-500"
+                    }`}
+                    {...props}
+                />
+            ) : (
+                <input
+                    id={name}
+                    name={name}
+                    type={type}
+                    placeholder={placeholder}
+                    ref={ref}
+                    className={`w-full px-4 py-3 bg-gray-50/50 border rounded-xl focus:outline-none focus:ring-2 focus:bg-white transition-all shadow-sm text-sm ${
+                        error 
+                            ? "border-rose-300 focus:ring-rose-500/20 focus:border-rose-500 bg-rose-50/30" 
+                            : "border-gray-200 focus:ring-indigo-500/50 focus:border-indigo-500"
+                    }`}
+                    {...props}
+                />
+            )}
+            
+            {error && (
+                <span className="text-xs font-medium text-rose-600 ml-1 mt-0.5 animate-fade-in-up">
+                    {error.message}
+                </span>
+            )}
+        </div>
+    );
+});
+
+FormField.displayName = "FormField";
+
+export default FormField;

package/src/components/Navbar.jsx

@@ -1,37 +1,54 @@
-import { Link } from "react-router-dom";
-import { Search, Bell } from "lucide-react";
-
-const Navbar = () => {
-    return (
-        <header className="bg-white h-20 border-b border-slate-200 flex justify-between items-center px-8 shadow-[0_2px_10px_rgba(0,0,0,0.02)] z-10 sticky top-0 flex-shrink-0">
-            <h1 className="text-xl font-semibold text-slate-800">
-                {/* Optional page title could go here */}
-            </h1>
-
-            <div className="flex items-center gap-6">
-                <div className="relative hidden md:block">
-                    <input
-                        type="text"
-                        placeholder="Search anything..."
-                        className="bg-slate-50 border border-slate-200 text-sm rounded-full pl-11 pr-4 py-2.5 w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all"
-                    />
-                    <Search className="absolute left-4 top-2.5 text-slate-400" size={18} />
-                </div>
-                <button className="relative text-slate-500 hover:text-indigo-600 transition-colors p-2 rounded-full hover:bg-indigo-50">
-                    <Bell size={20} />
-                    <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
-                </button>
-
-                <div className="flex items-center gap-3 pl-4 border-l border-slate-200 cursor-pointer group">
-                    <img
-                        src="https://ui-avatars.com/api/?name=Admin+User&background=6366f1&color=fff"
-                        alt="profile"
-                        className="w-10 h-10 rounded-full border-2 border-indigo-100 group-hover:border-indigo-300 transition-all shadow-sm"
-                    />
-                </div>
-            </div>
-        </header>
-    );
-};
-
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Search, Bell } from "lucide-react";
+import { useUser } from "../context/UserContext";
+import ProfileModal from "./ProfileModal";
+
+const Navbar = () => {
+  const { user } = useUser();
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+
+  const displayAvatar = user?.profilePicture
+    ? `http://localhost:3000${user.profilePicture}`
+    : `https://ui-avatars.com/api/?name=${encodeURIComponent(user?.name || "User")}&background=6366f1&color=fff`;
+
+  return (
+    <>
+      <header className="bg-white h-20 border-b border-slate-200 flex justify-between items-center px-8 shadow-[0_2px_10px_rgba(0,0,0,0.02)] z-10 sticky top-0 flex-shrink-0">
+        <h1 className="text-xl font-semibold text-slate-800">
+          {/* Optional page title could go here */}
+        </h1>
+
+        <div className="flex items-center gap-6">
+          <div className="relative hidden md:block">
+            <input
+              type="text"
+              placeholder="Search anything..."
+              className="bg-slate-50 border border-slate-200 text-sm rounded-full pl-11 pr-4 py-2.5 w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all"
+            />
+            <Search className="absolute left-4 top-2.5 text-slate-400" size={18} />
+          </div>
+          <button className="relative text-slate-500 hover:text-indigo-600 transition-colors p-2 rounded-full hover:bg-indigo-50">
+            <Bell size={20} />
+            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
+          </button>
+
+          <div
+            onClick={() => setIsProfileOpen(true)}
+            className="flex items-center gap-3 pl-4 border-l border-slate-200 cursor-pointer group"
+          >
+            <img
+              src={displayAvatar}
+              alt="profile"
+              className="w-10 h-10 rounded-full border-2 border-indigo-100 group-hover:border-indigo-300 transition-all shadow-sm object-cover"
+            />
+          </div>
+        </div>
+      </header>
+
+      <ProfileModal isOpen={isProfileOpen} onClose={() => setIsProfileOpen(false)} />
+    </>
+  );
+};
+
 export default Navbar;