farheen_blog_app 0.0.2 → 0.0.4

package/package.json

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

package/src/context/UserContext.jsx

@@ -0,0 +1,85 @@
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useState
+} from "react";
+
+const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+    const [token, setToken] = useState(null);
+
+    useEffect(() => {
+
+        const storedUser =
+            localStorage.getItem(
+                "user"
+            );
+
+        const storedToken =
+            localStorage.getItem(
+                "token"
+            );
+
+        if (
+            storedUser &&
+            storedToken
+        ) {
+
+            setUser(JSON.parse(storedUser));
+            setToken(storedToken);
+        }
+
+    }, []);
+
+    const login = (userData, jwtToken) => {
+        setUser(userData);
+        setToken(jwtToken);
+
+        localStorage.setItem(
+            "user",
+            JSON.stringify(
+                userData
+            )
+        );
+
+        localStorage.setItem(
+            "token",
+            jwtToken
+        );
+    };
+
+    const logout = () => {
+
+        setUser(null);
+
+        setToken(null);
+
+        localStorage.removeItem(
+            "user"
+        );
+
+        localStorage.removeItem(
+            "token"
+        );
+    };
+
+    return (
+        <UserContext.Provider
+            value={{
+                user,
+                token,
+                login,
+                logout
+            }}
+        >
+            {children}
+        </UserContext.Provider>
+    );
+};
+
+export const useUser = () => {
+    return useContext(UserContext);
+};

package/src/hooks/useDebounce.js

@@ -0,0 +1,35 @@
+import {
+  useState,
+  useEffect
+} from "react";
+
+const useDebounce = (
+  value,
+  delay
+) => {
+
+  const [
+    debouncedValue,
+    setDebouncedValue
+  ] = useState(value);
+
+  useEffect(() => {
+
+    const timer =
+      setTimeout(() => {
+
+        setDebouncedValue(
+          value
+        );
+
+      }, delay);
+
+    return () =>
+      clearTimeout(timer);
+
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;

package/src/middleware/ProtectedRoute.jsx

@@ -1,13 +1,17 @@
 import {
-    Navigate
-} from "react-router-dom";
+ Navigate,
+ Outlet
+}
+from "react-router-dom";
 
-export const ProtectedRoutes = ({ children }) => {
-    const token = localStorage.getItem("token");
+export function ProtectedRoute(){
 
-    if (!token) {
-        return <Navigate to="/login" />
-    }
+ const token =
+ localStorage.getItem(
+   "token"
+ );
 
-    return children;
+ return token
+  ? <Outlet />
+  : <Navigate to="/login"/>
 }

package/src/pages/CreatePost.jsx

@@ -1,79 +1,125 @@
 import { useState } from "react";
-
 import { createPost } from "../services/postService";
 
 const CreatePost = () => {
-  const [title, setTitle] = useState("");
-
-  const [content, setContent] =
-    useState("");
-
-  const [image, setImage] =
-    useState(null);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    const formData = new FormData();
-
-    formData.append("title", title);
-
-    formData.append("content", content);
-
-    if (image) {
-      formData.append("image", image);
-    }
-
-    try {
-      await createPost(formData);
-
-      alert("Post Created");
-
-      setTitle("");
-      setContent("");
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  return (
-    <div className="max-w-xl mx-auto mt-10">
-      <form
-        onSubmit={handleSubmit}
-        className="flex flex-col gap-4"
-      >
-        <input
-          type="text"
-          placeholder="Title"
-          className="border p-3 rounded"
-          value={title}
-          onChange={(e) =>
-            setTitle(e.target.value)
-          }
-        />
-
-        <textarea
-          placeholder="Content"
-          className="border p-3 rounded h-40"
-          value={content}
-          onChange={(e) =>
-            setContent(e.target.value)
-          }
-        />
-
-        <input
-          type="file"
-          onChange={(e) =>
-            setImage(e.target.files[0])
-          }
-        />
-
-        <button className="bg-black text-white p-3 rounded">
-          Create Post
-        </button>
-      </form>
-    </div>
-  );
+    const [formData, setFormData] = useState({
+        title: "",
+        content: "",
+        image: null
+    });
+
+    const [loading, setLoading] =
+        useState(false);
+
+    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(
+                "title",
+                formData.title
+            );
+
+            data.append(
+                "content",
+                formData.content
+            );
+
+            if (formData.image) {
+                data.append(
+                    "image",
+                    formData.image
+                );
+            }
+
+            await createPost(data);
+
+            alert("Post Created");
+
+            setFormData({
+                title: "",
+                content: "",
+                image: null
+            });
+
+        } 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">
+
+            <form
+                onSubmit={handleSubmit}
+                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"
+                    className="border p-3 rounded h-40"
+                    value={formData.content}
+                    onChange={handleChange}
+                    required
+                />
+
+                <input
+                    type="file"
+                    name="image"
+                    accept="image/*"
+                    onChange={handleChange}
+                />
+
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="bg-black text-white p-3 rounded"
+                >
+                    {
+                        loading
+                            ? "Creating..."
+                            : "Create Post"
+                    }
+                </button>
+
+            </form>
+
+        </div>
+    );
 };
 
 export default CreatePost;

package/src/pages/admin/ManageBlogs.jsx

@@ -1,33 +1,43 @@
 import { useEffect, useState } from "react";
 import api from "../../services/api";
+import useDebounce from "../../hooks/useDebounce";
 
 const ManageBlogs = () => {
 
-  const [blogs,setBlogs] = useState([]);
+  // for pagination and debounce search 
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [search, setSearch] = useState("");
+
+  const debouncedSearch = useDebounce(search, 500);
+
+  const [blogs, setBlogs] = useState([]);
 
   const getBlogs = async () => {
-    try{
+    try {
 
-      const res = await api.get("/admin/blogs");
+      const res = await api.get(`/admin/blogs/posts?page=${page}&search=${debouncedSearch}`);
 
       setBlogs(res.data);
+      setTotalPage(res.data.totalPges);
 
-    }catch(error){
+    } catch (error) {
       console.log(error);
     }
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     getBlogs();
-  },[]);
+  }, [page, debouncedSearch]);
 
   return (
     <div>
+      <input type="text" value={search} placeholder="search" onChange={(e) => setSearch(e.target.value)} />
 
       <h1>Manage Blogs</h1>
 
       {
-        blogs.map((blog)=>(
+        blogs.map((blog) => (
           <div key={blog._id}>
 
             <h3>{blog.title}</h3>
@@ -40,6 +50,43 @@ const ManageBlogs = () => {
         ))
       }
 
+      {/* pagination */}
+      <div>
+        <button
+          disabled={
+            page === 1
+          }
+          onClick={() =>
+            setPage(
+              page - 1
+            )
+          }
+        >
+          Prev
+        </button>
+
+        <span>
+          {" "}
+          {page} / {
+            totalPages
+          }{" "}
+        </span>
+
+        <button
+          disabled={
+            page ===
+            totalPages
+          }
+          onClick={() =>
+            setPage(
+              page + 1
+            )
+          }
+        >
+          Next
+        </button>
+      </div>
+
     </div>
   );
 };

package/src/routes/AppRoutes.jsx

@@ -13,8 +13,9 @@ import ManageBlogs from "../pages/admin/ManageBlogs";
 import AdminDashboard from "../pages/admin/AdminDashboard";
 import AdminLayout from "../layout/AdminLayout";
 import Register from "../pages/Register";
+import { ProtectedRoute } from "../middleware/ProtectedRoute";
 
-const AppRoutes = () => {
+function AppRoutes() {
     return (
         <BrowserRouter>
             {/* <Navbar /> */}
@@ -25,7 +26,7 @@ const AppRoutes = () => {
                     element={<Home />}
                 />
 
-                 <Route
+                <Route
                     path="/register"
                     element={<Register />}
                 />
@@ -40,22 +41,28 @@ const AppRoutes = () => {
                     element={<CreatePost />}
                 />
 
-                <Route path="/admin" element={<AdminLayout />}>
-                    <Route index element={<AdminDashboard />} />
-                    <Route
-                        path="users"
-                        element={<ManageUsers />}
-                    />
-                    <Route
-                        path="blogs"
-                        element={<ManageBlogs />}
-                    />
-                    {/* <Route
+                <Route
+                    element={<ProtectedRoute />}
+                >
+
+                    <Route path="/admin" element={<AdminLayout />}>
+                        <Route index element={<AdminDashboard />} />
+                        <Route
+                            path="users"
+                            element={<ManageUsers />}
+                        />
+                        <Route
+                            path="blogs"
+                            element={<ManageBlogs />}
+                        />
+                        {/* <Route
                         path="settings"
                         element={<Settings />}
                     /> */}
+                    </Route>
+
                 </Route>
-            
+
             </Routes>
         </BrowserRouter>
     );