farheen_blog_app 1.0.6 → 1.0.7

package/package.json

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

package/src/pages/CreatePost.jsx

@@ -3,7 +3,6 @@ import { createPost } from "../services/postService";
 
 const CreatePost = () => {
     const [formData, setFormData] = useState({
-        title: "",
         content: "",
         image: null
     });
@@ -29,11 +28,6 @@ const CreatePost = () => {
 
             const data = new FormData();
 
-            data.append(
-                "title",
-                formData.title
-            );
-
             data.append(
                 "content",
                 formData.content
@@ -51,7 +45,6 @@ const CreatePost = () => {
             alert("Post Created");
 
             setFormData({
-                title: "",
                 content: "",
                 image: null
             });
@@ -78,16 +71,6 @@ const CreatePost = () => {
                 className="flex flex-col gap-4"
             >
 
-                <input
-                    type="text"
-                    name="title"
-                    placeholder="Enter Title"
-                    className="border p-3 rounded"
-                    value={formData.title}
-                    onChange={handleChange}
-                    required
-                />
-
                 <textarea
                     name="content"
                     placeholder="Enter Content"

package/src/pages/admin/EditBlog.jsx

@@ -0,0 +1,100 @@
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import api from "../../services/api";
+
+const EditBlog = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState({
+        content: "",
+        image: null,
+    });
+    const [existingImage, setExistingImage] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        const fetchPost = async () => {
+            try {
+                const res = await api.get(`/posts/${id}`);
+                setFormData({
+                    content: res.data.content || "",
+                    image: null
+                });
+                setExistingImage(res.data.image_url ? `http://localhost:3000${res.data.image_url}` : null);
+            } catch (error) {
+                console.log(error);
+                alert("Failed to fetch post details");
+            }
+        };
+        fetchPost();
+    }, [id]);
+
+    const handleChange = (e) => {
+        const { name, value, files } = e.target;
+        setFormData({
+            ...formData,
+            [name]: files ? files[0] : value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            setLoading(true);
+            const data = new FormData();
+            data.append("content", formData.content);
+            if (formData.image) {
+                data.append("image", formData.image);
+            }
+
+            await api.put(`/posts/${id}`, data);
+            alert("Post Updated Successfully");
+            navigate("/admin/blogs");
+        } catch (error) {
+            console.log(error);
+            alert(error.response?.data?.message || "Something went wrong");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-xl mx-auto mt-10 p-6 bg-white rounded-lg shadow">
+            <h1 className="text-2xl font-bold mb-6 text-gray-800">Edit Blog</h1>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                {/* Title removed as it's not used in schema */}
+                <textarea
+                    name="content"
+                    placeholder="Enter Content"
+                    className="border border-gray-300 p-3 rounded h-40 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    value={formData.content}
+                    onChange={handleChange}
+                    required
+                />
+                {existingImage && !formData.image && (
+                    <div className="mb-2">
+                        <p className="text-sm text-gray-500 mb-1">Current Image:</p>
+                        <img src={existingImage} alt="Current" className="h-32 object-cover rounded" />
+                    </div>
+                )}
+                <input
+                    type="file"
+                    name="image"
+                    accept="image/*"
+                    onChange={handleChange}
+                    className="text-gray-600"
+                />
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded transition-colors disabled:opacity-50"
+                >
+                    {loading ? "Updating..." : "Update Post"}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default EditBlog;

package/src/pages/admin/ManageBlogs.jsx

@@ -1,28 +1,52 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import api from "../../services/api";
 import useDebounce from "../../hooks/useDebounce";
+import { getPosts } from "../../services/postService";
 
 const ManageBlogs = () => {
 
   // for pagination and debounce search 
   const [page, setPage] = useState(1);
-  const [totalPage, setTotalPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
   const [search, setSearch] = useState("");
 
   const debouncedSearch = useDebounce(search, 500);
 
   const [blogs, setBlogs] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const getBlogs = async () => {
     try {
-
-      const res = await api.get(`/admin/blogs/posts?page=${page}&search=${debouncedSearch}`);
-
-      setBlogs(res.data);
-      setTotalPage(res.data.totalPges);
+      setLoading(true);
+      // Fallback to postService getPosts if no pagination is needed, or keep api.get
+      const res = await api.get(`/admin/blogs/posts?page=${page}&search=${debouncedSearch}`).catch(async () => {
+         // If admin route doesn't exist, use the regular getPosts
+         return { data: await getPosts() };
+      });
+      
+      const fetchedBlogs = res.data?.posts || res.data || [];
+      
+      setBlogs(Array.isArray(fetchedBlogs) ? fetchedBlogs : []);
+      setTotalPages(res.data?.totalPages || 1);
 
     } catch (error) {
-      console.log(error);
+      console.log("Failed to fetch blogs", error);
+      setBlogs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (window.confirm("Are you sure you want to delete this blog?")) {
+      try {
+        await api.delete(`/posts/${id}`);
+        getBlogs();
+      } catch (error) {
+        console.log(error);
+        alert("Failed to delete blog");
+      }
     }
   };
 
@@ -31,60 +55,100 @@ const ManageBlogs = () => {
   }, [page, debouncedSearch]);
 
   return (
-    <div>
-      <input type="text" value={search} placeholder="search" onChange={(e) => setSearch(e.target.value)} />
-
-      <h1>Manage Blogs</h1>
-
-      {
-        blogs.map((blog) => (
-          <div key={blog._id}>
-
-            <h3>{blog.title}</h3>
-
-            <p>
-              {blog.createdBy?.name}
-            </p>
-
-          </div>
-        ))
-      }
-
-      {/* pagination */}
-      <div>
-        <button
-          disabled={
-            page === 1
-          }
-          onClick={() =>
-            setPage(
-              page - 1
-            )
-          }
-        >
-          Prev
-        </button>
+    <div className="p-6 max-w-6xl mx-auto">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold text-gray-800">Manage Blogs</h1>
+
+        <div className="relative">
+          <input
+            type="text"
+            value={search}
+            placeholder="Search blogs..."
+            onChange={(e) => setSearch(e.target.value)}
+            className="border border-gray-300 rounded-lg pl-4 pr-10 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"
+          />
+        </div>
+      </div>
 
-        <span>
-          {" "}
-          {page} / {
-            totalPages
-          }{" "}
-        </span>
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        {loading ? (
+          <div className="p-10 text-center text-gray-500">Loading blogs...</div>
+        ) : (
+          <table className="w-full text-left border-collapse">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="p-4 text-sm font-semibold text-gray-600">Image</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Content</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Author</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Date</th>
+                <th className="p-4 text-sm font-semibold text-gray-600">Status</th>
+                <th className="p-4 text-sm font-semibold text-gray-600 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {blogs.length === 0 ? (
+                <tr>
+                  <td colSpan="6" className="p-8 text-center text-gray-500">
+                    No blogs found.
+                  </td>
+                </tr>
+              ) : (
+                blogs.map((blog) => (
+                  <tr key={blog.id} className="hover:bg-gray-50 transition-colors">
+                  <td className="p-4">
+                    {blog.image_url ? (
+                      <img src={`http://localhost:3000${blog.image_url}`} alt="Blog post" className="h-12 w-12 object-cover rounded shadow-sm" />
+                    ) : (
+                      <div className="h-12 w-12 bg-gray-100 rounded flex items-center justify-center text-xs text-gray-400">N/A</div>
+                    )}
+                  </td>
+                  <td className="p-4">
+                    <p className="font-medium text-gray-800 line-clamp-2">{blog.content || 'No content'}</p>
+                  </td>
+                  <td className="p-4 text-gray-600">
+                    {blog.User?.name || 'Unknown'}
+                  </td>
+                  <td className="p-4 text-gray-500 text-sm">
+                    {blog.created_at ? new Date(blog.created_at).toLocaleDateString() : 'N/A'}
+                  </td>
+                  <td className="p-4">
+                    <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      Published
+                    </span>
+                  </td>
+                  <td className="p-4 text-right whitespace-nowrap">
+                    <Link to={`/admin/blogs/edit/${blog.id}`} className="text-blue-600 hover:text-blue-900 mr-4 font-medium text-sm">Edit</Link>
+                    <button onClick={() => handleDelete(blog.id)} className="text-red-600 hover:text-red-900 font-medium text-sm">Delete</button>
+                  </td>
+                </tr>
+              )))}
+            </tbody>
+          </table>
+        )}
+      </div>
 
-        <button
-          disabled={
-            page ===
-            totalPages
-          }
-          onClick={() =>
-            setPage(
-              page + 1
-            )
-          }
-        >
-          Next
-        </button>
+      {/* Pagination */}
+      <div className="flex items-center justify-between mt-6">
+        <p className="text-sm text-gray-600">
+          Showing page <span className="font-semibold">{page}</span> of <span className="font-semibold">{totalPages}</span>
+        </p>
+        <div className="flex gap-2">
+          <button
+            disabled={page === 1}
+            onClick={() => setPage(page - 1)}
+            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Previous
+          </button>
+
+          <button
+            disabled={page >= totalPages}
+            onClick={() => setPage(page + 1)}
+            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Next
+          </button>
+        </div>
       </div>
 
     </div>

package/src/routes/AppRoutes.jsx

@@ -16,6 +16,7 @@ import Register from "../pages/Register";
 import { ProtectedRoute } from "../middleware/ProtectedRoute";
 import SinglePost from "../pages/SinglePost";
 import CreateUser from "../pages/admin/CreateUser";
+import EditBlog from "../pages/admin/EditBlog";
 
 function AppRoutes() {
     return (
@@ -61,6 +62,10 @@ function AppRoutes() {
                             path="blogs"
                             element={<ManageBlogs />}
                         />
+                        <Route
+                            path="blogs/edit/:id"
+                            element={<EditBlog />}
+                        />
                         <Route
                             path="create"
                             element={<CreatePost />}