farheen_blog_app 0.0.3 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "farheen_blog_app",
   "private": false,
-  "version": "0.0.3",
+  "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/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>
     );