farheen_blog_app 1.0.4 → 1.0.6

package/info.md

@@ -0,0 +1,13 @@
+# Project Information
+
+## Pages Created
+- **Create User Page**: Added `CreateUser.jsx` inside the admin folder to allow admins to create new users. Added its route at `/admin/users/create`.
+- **Single Post Page**: Added `SinglePost.jsx` page to view a specific post in detail along with its comments. Added its route at `/post/:id`.
+- **Comment Table**: Created `CommentTable.jsx` component to cleanly display the list of comments on the `SinglePost` page.
+
+## Components Updated
+- **User Table**: Modified `UserTable.jsx` to dynamically render user data passed via props.
+- **Manage Users**: Updated `ManageUsers.jsx` to utilize the improved `UserTable` instead of simply rendering user data in `div` elements.
+
+## Clean Up
+- Removed unused files from the admin section (`EditBlog.jsx` and `EditUser.jsx`) to clean up the codebase.

package/package.json

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

package/src/components/CommentTable.jsx

@@ -0,0 +1,28 @@
+const CommentTable = ({ comments }) => {
+    if (!comments || comments.length === 0) {
+        return <p>No comments yet.</p>;
+    }
+
+    return (
+        <table className="w-full text-left border-collapse border border-gray-200">
+            <thead className="bg-gray-100">
+                <tr>
+                    <th className="p-3 border-b">User</th>
+                    <th className="p-3 border-b">Comment</th>
+                    <th className="p-3 border-b">Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                {comments.map((comment) => (
+                    <tr key={comment._id} className="border-b hover:bg-gray-50">
+                        <td className="p-3">{comment.user?.name || "Anonymous"}</td>
+                        <td className="p-3">{comment.text}</td>
+                        <td className="p-3">{new Date(comment.createdAt).toLocaleDateString()}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};
+
+export default CommentTable;

package/src/components/admin/AdminSidebar.jsx

@@ -1,29 +1,63 @@
 import { NavLink } from "react-router-dom";
+import { hasAnyPermission } from "../../utils/checkPermission";
 
 const AdminSidebar = () => {
+
+  const menuItems = [
+    {
+      path: "/admin",
+      title: "Dashboard",
+    },
+    {
+      path: "/admin/users",
+      title: "Manage Users",
+      module: "USERS",
+      actions: ["READ", "UPDATE", "DELETE"]
+    },
+    {
+      path: "/admin/users/create",
+      title: "Create User",
+      module: "USERS",
+      actions: ["CREATE"]
+    },
+    {
+      path: "/admin/blogs",
+      title: "Manage Blogs",
+      module: "POSTS",
+      actions: ["READ", "UPDATE", "DELETE"]
+    },
+    {
+      path: "/admin/create",
+      title: "Create Post",
+      module: "POSTS",
+      actions: ["CREATE"]
+    },
+    {
+      path: "/admin/settings",
+      title: "Settings",
+    }
+  ];
+
   return (
     <aside className="sidebar">
       <h2 className="logo">Blogify</h2>
       <nav>
+        {menuItems.map((item, index) => {
+          let hasAccess = true;
 
-        <NavLink to="/admin">
-          Dashboard
-        </NavLink>
-
-        <NavLink to="/admin/users">
-          Users
-        </NavLink>
+          if (item.module && item.actions) {
+            hasAccess = hasAnyPermission(item.module, item.actions);
+          }
 
-        <NavLink to="/admin/blogs">
-          Blogs
-        </NavLink>
-
-        <NavLink to="/admin/settings">
-          Settings
-        </NavLink>
+          if (!hasAccess) return null;
 
+          return (
+            <NavLink key={index} to={item.path} end>
+              {item.title}
+            </NavLink>
+          );
+        })}
       </nav>
-
     </aside>
   );
 };

package/src/components/admin/UserTable.jsx

@@ -1,26 +1,28 @@
-const UserTable = () => {
+const UserTable = ({ users }) => {
     return (
-        <table className="user-table">
+        <table className="user-table w-full text-left border-collapse">
             <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Role</th>
-                    <th>Action</th>
+                <tr className="border-b">
+                    <th className="p-3">Name</th>
+                    <th className="p-3">Email</th>
+                    <th className="p-3">Role</th>
+                    <th className="p-3">Action</th>
                 </tr>
             </thead>
 
             <tbody>
-                <tr>
-                    <td>Farheen</td>
-                    <td>farheen@gmail.com</td>
-                    <td>User</td>
-                    <td>
-                        <button className="delete-btn">
-                            Delete
-                        </button>
-                    </td>
-                </tr>
+                {users?.map(user => (
+                    <tr key={user._id} className="border-b">
+                        <td className="p-3">{user.name}</td>
+                        <td className="p-3">{user.email}</td>
+                        <td className="p-3">{user.role}</td>
+                        <td className="p-3">
+                            <button className="delete-btn bg-red-500 text-white px-3 py-1 rounded">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                ))}
             </tbody>
         </table>
     )

package/src/middleware/ProtectedRoute.jsx

@@ -13,5 +13,5 @@ export function ProtectedRoute(){
 
  return token
   ? <Outlet />
-  : <Navigate to="/login"/>
+  : <Navigate to="/"/>
 }

package/src/pages/Register.jsx

@@ -38,7 +38,7 @@ const Register = () => {
             const response = await registerUser(payload);
 
             alert(response.data.message);
-            navigate("/login");
+            navigate("/");
 
         } catch (error) {
 

package/src/pages/SinglePost.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import api from "../services/api";
+import CommentTable from "../components/CommentTable";
+
+const SinglePost = () => {
+    const { id } = useParams();
+    const [post, setPost] = useState(null);
+    const [comments, setComments] = useState([]);
+
+    const fetchPostAndComments = async () => {
+        try {
+            const postRes = await api.get(`/posts/${id}`);
+            setPost(postRes.data);
+            const commentsRes = await api.get(`/posts/${id}/comments`);
+            setComments(commentsRes.data);
+        } catch (error) {
+            console.log("Error fetching post or comments", error);
+        }
+    };
+
+    useEffect(() => {
+        fetchPostAndComments();
+    }, [id]);
+
+    if (!post) return <div className="text-center p-10">Loading...</div>;
+
+    return (
+        <div className="max-w-4xl mx-auto p-4 mt-10">
+            <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
+            {post.image && <img src={post.image} alt={post.title} className="w-full h-96 object-cover mb-8 rounded shadow" />}
+            <div className="text-gray-800 text-lg mb-12 whitespace-pre-wrap">{post.content}</div>
+
+            <h2 className="text-2xl font-bold mb-4">Comments</h2>
+            <CommentTable comments={comments} />
+        </div>
+    );
+};
+
+export default SinglePost;

package/src/pages/admin/CreateUser.jsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import api from "../../services/api";
+
+const CreateUser = () => {
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+        password: "",
+        role: "user"
+    });
+    const [loading, setLoading] = useState(false);
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            setLoading(true);
+            await api.post("/admin/users", formData);
+            alert("User created successfully");
+            setFormData({ name: "", email: "", password: "", role: "user" });
+        } catch (error) {
+            console.log(error);
+            alert("Failed to create user");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-xl mx-auto mt-10">
+            <h1 className="text-2xl font-bold mb-4">Create User</h1>
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                <input type="text" name="name" placeholder="Name" value={formData.name} onChange={handleChange} required className="border p-3 rounded" />
+                <input type="email" name="email" placeholder="Email" value={formData.email} onChange={handleChange} required className="border p-3 rounded" />
+                <input type="password" name="password" placeholder="Password" value={formData.password} onChange={handleChange} required className="border p-3 rounded" />
+                <select name="role" value={formData.role} onChange={handleChange} className="border p-3 rounded">
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                </select>
+                <button type="submit" disabled={loading} className="bg-black text-white p-3 rounded">
+                    {loading ? "Creating..." : "Create User"}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default CreateUser;

package/src/pages/admin/ManageUsers.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import api from "../../services/api";
+import UserTable from "../../components/admin/UserTable";
 
 const ManageUsers = () => {
 
@@ -24,18 +25,9 @@ const ManageUsers = () => {
   return (
     <div>
 
-      <h1>Manage Users</h1>
+      <h1 className="text-2xl font-bold mb-4">Manage Users</h1>
 
-      {
-        users.map((user)=>(
-          <div key={user._id}>
-
-            <h3>{user.name}</h3>
-            <p>{user.email}</p>
-
-          </div>
-        ))
-      }
+      <UserTable users={users} />
 
     </div>
   );

package/src/routes/AppRoutes.jsx

@@ -14,6 +14,8 @@ import AdminDashboard from "../pages/admin/AdminDashboard";
 import AdminLayout from "../layout/AdminLayout";
 import Register from "../pages/Register";
 import { ProtectedRoute } from "../middleware/ProtectedRoute";
+import SinglePost from "../pages/SinglePost";
+import CreateUser from "../pages/admin/CreateUser";
 
 function AppRoutes() {
     return (
@@ -23,22 +25,22 @@ function AppRoutes() {
             <Routes>
                 <Route
                     path="/"
-                    element={<Home />}
+                    element={<Login />}
                 />
 
                 <Route
-                    path="/register"
-                    element={<Register />}
+                    path="/home"
+                    element={<Home />}
                 />
 
                 <Route
-                    path="/login"
-                    element={<Login />}
+                    path="/register"
+                    element={<Register />}
                 />
 
                 <Route
-                    path="/create"
-                    element={<CreatePost />}
+                    path="/post/:id"
+                    element={<SinglePost />}
                 />
 
                 <Route
@@ -51,10 +53,18 @@ function AppRoutes() {
                             path="users"
                             element={<ManageUsers />}
                         />
+                        <Route
+                            path="users/create"
+                            element={<CreateUser />}
+                        />
                         <Route
                             path="blogs"
                             element={<ManageBlogs />}
                         />
+                        <Route
+                            path="create"
+                            element={<CreatePost />}
+                        />
                         {/* <Route
                         path="settings"
                         element={<Settings />}

package/src/services/{authService → authService.js}

@@ -1,15 +1,15 @@
-import api from "./api";
-
-export const register = async (formData) => {
-  const response = await api.post("/platformUser/register");
-  return response.data;
-};
-
-export const login = async (data) => {
-  const response = await api.post(
-    "/platformUser/login",
-    data
-  );
-
-  return response.data;
-};
+import api from "./api";
+
+export const register = async (formData) => {
+  const response = await api.post("/auth/register", formData);
+  return response.data;
+};
+
+export const login = async (data) => {
+  const response = await api.post(
+    "/auth/login",
+    data
+  );
+
+  return response.data;
+};

package/src/utils/checkPermission.js

@@ -0,0 +1,28 @@
+export const checkPermission = (module, action) => {
+    const token = localStorage.getItem("token");
+    if (!token) return false;
+
+    try {
+        const payloadBase64 = token.split('.')[1];
+        // handle base64 strings not padded properly
+        const base64 = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
+        const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        }).join(''));
+
+        const decodedPayload = JSON.parse(jsonPayload);
+        const permissions = decodedPayload.permissions || [];
+
+        // Example: "USERS:READ"
+        const requiredPermission = `${module}:${action}`;
+        
+        return permissions.includes(requiredPermission);
+    } catch (e) {
+        console.error("Failed to parse token for permissions", e);
+        return false;
+    }
+};
+
+export const hasAnyPermission = (module, actions) => {
+    return actions.some(action => checkPermission(module, action));
+};