Merge pull request #524 from tishubohra/main

subscript_of_bookmark

frontend/src/Component/Navbar/NavbarCenter.js

@@ -1,26 +1,29 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import "../../style/Navbar.css";
 import NavbarItem from "./NavbarItem";
 
-function NavbarCenter(){
+function NavbarCenter() {
+  const totalBookmarks = useSelector((state) => state.SourceReducer.totalBookmarks) || 0;
+
   return (
-    <span className="navbar-center">
-      <ul className="mb-2 navbar-content">
+    <nav className="navbar-center">
+      <ul className="navbar-content mb-2">
         <li className="nav-item">
           <NavbarItem description="Home" to="/" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="BookMark" to="/bookmark" />
+          <NavbarItem description={`Bookmark (${totalBookmarks})`} to="/bookmark" />
         </li>
         <li className="nav-item">
-          <NavbarItem description="Open Source" to="/open-source"/>
+          <NavbarItem description="Open Source" to="/open-source" />
         </li>
         <li className="nav-item">
           <NavbarItem description="About Us" to="/about" />
         </li>
       </ul>
-    </span>
+    </nav>
   );
-};
+}
 
 export default NavbarCenter;

frontend/src/Component/Navbar/NavbarItem.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-function NavbarItem({description,to}) {
+function NavbarItem({ description, to }) {
   return (
-      <Link to={to} className="Link nav-link active" aria-current="page">
-        {description}
-      </Link>
+    <Link to={to} className="Link nav-link active" aria-current="page">
+      {description}
+    </Link>
   );
 }
 

frontend/src/Slice/DataSlice.js

@@ -1,29 +1,39 @@
 import { createSlice } from "@reduxjs/toolkit";
 
+// Helper function to get initial bookmarks from local storage
+const getInitialBookmarks = () => JSON.parse(localStorage.getItem('bookmarks')) || [];
+
 const DataSlice = createSlice({
   name: 'data',
   initialState: {
-    sourceData: JSON.parse(localStorage.getItem('bookmarks')) || []
+    sourceData: getInitialBookmarks(),
+    totalBookmarks: getInitialBookmarks().length,
   },
   reducers: {
     setSource: (state, action) => {
       state.sourceData.push({
         image: action.payload.image,
         name: action.payload.name,
         desc: action.payload.desc,
-        link: action.payload.link
+        link: action.payload.link,
       });
+      state.totalBookmarks = state.sourceData.length;
+      localStorage.setItem('bookmarks', JSON.stringify(state.sourceData));
     },
     deleteSource: (state, action) => {
       // Find the index of the bookmark to delete by matching the name
-      const indexToDelete = state.sourceData.findIndex(bookmark => bookmark.name === action.payload.name);
+      const indexToDelete = state.sourceData.findIndex(
+        (bookmark) => bookmark.name === action.payload.name
+      );
 
       if (indexToDelete !== -1) {
         // Remove the bookmark from the array by index
         state.sourceData.splice(indexToDelete, 1);
+        state.totalBookmarks = state.sourceData.length;
+        localStorage.setItem('bookmarks', JSON.stringify(state.sourceData));
       }
-    }
-  }
+    },
+  },
 });
 
 export default DataSlice.reducer;

frontend/src/index.js

@@ -35,4 +35,4 @@ root.render(
       </Provider>
     </BrowserRouter>
   </React.StrictMode>
-);
+);