Work on Search Functionality

SurabhiMoond · SurabhiMoond · Jun 26, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 28, 2024
commit 233a05d50eaa896cb5dfa01aa0006bfe22aeadac
diff --git a/API/db.json b/API/db.json
diff --git a/mamaEarth/package-lock.json b/mamaEarth/package-lock.json
diff --git a/mamaEarth/package.json b/mamaEarth/package.json
@@ -15,8 +15,10 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
     "framer-motion": "^4.1.17",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router": "^6.24.0",

diff --git a/mamaEarth/src/App.css b/mamaEarth/src/App.css
@@ -98,26 +98,30 @@ border-right: 1px solid rgb(235, 235, 235);
   border:1px solid #00aeef;
 }
 /*---------DashBoard----------------*/
-
-.dashboard {
+.dashboard-container {
   display: flex;
-  height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  margin: 20px auto;
 }
 
-.sidebar {
-  width: 250px;
-  background-color: #f0f0f0;
-  padding: 20px;
+.product-table {
+  margin-top: 20px;
+}
+
+.category-stats {
+  display: flex;
 }
 
-.main-content {
-  flex-grow: 1;
+.stats-table,
+.stats-chart {
+  flex: 1;
   padding: 20px;
 }
 
-.user-management, .product-management, .order-management, .reports-analytics {
-  max-width: 800px;
-  margin: 0 auto;
+.stats-chart canvas {
+  max-height: 300px; /* Adjust as needed */
 }
 
 @media (max-width: 600px) {

diff --git a/mamaEarth/src/App.jsx b/mamaEarth/src/App.jsx
@@ -3,6 +3,7 @@ import "./App.css";
 import { CgProfile } from "react-icons/cg";
 import { SearchBar } from "./component/SearchBar";
 import { AllRoutes } from "./allRoutes/AllRoutes";
+import { SearchProvider } from "./context/searchContext";
 function App() {
   return (
     <>
@@ -13,8 +14,10 @@ function App() {
           <CgProfile />
         </Link>
       </div>
-      <SearchBar />
-      <AllRoutes />
+      <SearchProvider>
+        <SearchBar />
+        <AllRoutes />
+      </SearchProvider>
     </>
   );
 }

diff --git a/mamaEarth/src/allJsonUrl/jsonUrls.js b/mamaEarth/src/allJsonUrl/jsonUrls.js
@@ -1,4 +1,4 @@
 export const jsonUrls = {
   products: "http://localhost:3000/products",
-  roles:"http://localhost:3000/products"
+  roles:"http://localhost:3000/roles"
 };
diff --git a/mamaEarth/src/allRoutes/AllRoutes.jsx b/mamaEarth/src/allRoutes/AllRoutes.jsx
@@ -10,17 +10,21 @@ import { NewLaunch } from "../pages/NewLaunch";
 import { StoreLocator } from "../pages/StoreLocator";
 import { Login } from "../pages/Login";
 import { Signup } from "../pages/SignUp";
+import { Dashboard } from "../dashboard/dashboard";
+import { FaceNewL } from "../pages/FaceNewL";
 
 export const AllRoutes = () => {
   const allRouts = [
     { to: "/", element: <Home /> },
     { to: "/face", element: <Face /> },
+    { to: "/face-new-launch", element: <FaceNewL/>},
     { to: "/hair", element: <Hair /> },
     { to: "/makeup", element: <Makeup /> },
     { to: "/body", element: <Body /> },
     { to: "/combo", element: <Combo /> },
     { to: "/newlaunch", element: <NewLaunch /> },
     { to: "/login", element: <Login /> },
+    { to: "/dash", element: <Dashboard /> },
     { to: "/sign", element: <Signup /> },
     {
       to: "/storelocator",

diff --git a/mamaEarth/src/component/NavIteam.jsx b/mamaEarth/src/component/NavIteam.jsx
@@ -1,10 +1,12 @@
 import { useState } from "react";
-import { NavLink} from "react-router-dom";
+import { Link, NavLink} from "react-router-dom";
+import { useFetchData } from "../customHook/useFatchData";
+import { jsonUrls } from "../allJsonUrl/jsonUrls";
 
 
 export const NavIteam = () => {
   const [selectedOption, setSelectedOption] = useState(null);
-
+  
   const links = [
     { to: "/", label: "HOME"},
     { to: "/face", label: "FACE"},
@@ -50,7 +52,7 @@ export const NavIteam = () => {
                         >
                           Explore
                         </p>
-                        <p>New Launches</p>
+                        <Link to={'/face-new-launch'}><p>New Launches</p></Link>
                         <p>Best Sellers</p>
                         <p>Gift Packs</p>
                       </div>
@@ -184,8 +186,6 @@ export const NavIteam = () => {
           ))}
         </div>
       </div>
-
-
     </>
   );
 };
diff --git a/mamaEarth/src/component/SearchBar.jsx b/mamaEarth/src/component/SearchBar.jsx
@@ -6,10 +6,17 @@ import { LiaSearchSolid } from "react-icons/lia";
 import { NavIteam } from "./NavIteam";
 import { Login } from "../pages/Login";
 import { Link } from "react-router-dom";
+import { SearchContext } from "../context/searchContext";
 export const SearchBar = () => {
+  const { searchTerm, setSearchTerm,handleSearch } = useContext(SearchContext);
+
   const handleSearchChange = (e) => {
     setSearchTerm(e.target.value);
   };
+
+  const handleSearchSubmit = () => {
+    handleSearch(searchTerm, products); 
+  };
   return (
     <div className="header">
       <div className="searchBar-main-div">
@@ -42,6 +49,7 @@ export const SearchBar = () => {
             <input
               style={{ width: "500px", fontSize: "19px" }}
               type="text"
+              value={searchTerm}
               id="searchBar-input"
               placeholder="Search.................."
               onChange={handleSearchChange}
@@ -50,6 +58,7 @@ export const SearchBar = () => {
           <button
             id="searchBtn"
             className="allBtn"
+            onClick={handleSearchSubmit}
             style={{
               width: "140px",
               padding: "8px",

diff --git a/mamaEarth/src/context/searchContext.jsx b/mamaEarth/src/context/searchContext.jsx
@@ -0,0 +1,24 @@
+import { createContext, useState } from "react";
+
+export const SearchContext = createContext();
+
+export const SearchProvider = ({ children }) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+
+  const handleSearch = (searchValue, allProducts) => {
+    setSearchTerm(searchValue);
+    const filteredResults = allProducts.filter((product) =>
+      product.name.toLowerCase().includes(searchValue.toLowerCase())
+    );
+    setSearchResults(filteredResults);
+  };
+
+  return (
+    <SearchContext.Provider
+      value={{ searchTerm, setSearchTerm, handleSearch, searchResults }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};
diff --git a/mamaEarth/src/pages/Body.jsx b/mamaEarth/src/pages/Body.jsx
@@ -3,12 +3,10 @@ import { useFetchData } from "../customHook/useFatchData";
 import { jsonUrls } from "../allJsonUrl/jsonUrls";
 
 export const Body = () => {
-  const {
-    data: products,
-    loading,
-    error,
-  } = useFetchData(jsonUrls.products);
-
+  const { data: products, loading, error } = useFetchData(jsonUrls.products);
+  const bodyProducts = products.filter(
+    (product) => product.category === "Body"
+  );
   if (loading) {
     return (
       <Flex justifyContent="center" alignItems="center" height="100vh">
@@ -36,7 +34,7 @@ export const Body = () => {
   return (
     <div>
       <Grid templateColumns="repeat(4, 1fr)" gap="30px" p="30px">
-        {products.map((product, index) => (
+        {bodyProducts.map((product, index) => (
           <Box key={index} className="product-card">
             <img
               src={product.image}

diff --git a/mamaEarth/src/pages/Combo.jsx b/mamaEarth/src/pages/Combo.jsx
@@ -1,9 +1,46 @@
-import React from 'react'
+import { useFetchData } from "../customHook/useFatchData";
+import { jsonUrls } from "../allJsonUrl/jsonUrls";
+import { Box, Flex, Grid } from "@chakra-ui/react";
 
 export const Combo = () => {
+  const { data, loading, error } = useFetchData(jsonUrls.products);
+  const comboProducts = data.filter((product) => product.category === "Combo");
+  if (loading) {
+    return (
+      <Flex justifyContent="center" alignItems="center" height="100vh">
+        <p>Loading...</p>
+      </Flex>
+    );
+  }
+
+  if (error) {
+    return (
+      <Flex justifyContent="center" alignItems="center" height="100vh">
+        <p>Error: {error.message}</p>
+      </Flex>
+    );
+  }
+  if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <Flex justifyContent="center" alignItems="center" height="100vh">
+        <p>No products found.</p>
+      </Flex>
+    );
+  }
   return (
     <div>
-
+      <Grid templateColumns="repeat(4, 1fr)" gap="30px" p="30px">
+        {comboProducts.map((product, index) => (
+          <Box key={index} className="product-card">
+            <img
+              src={product.image}
+              alt={product.name}
+              style={{ width: "100%", height: "300px" }}
+            />
+            <h1>{product.name}</h1>
+          </Box>
+        ))}
+      </Grid>
     </div>
-  )
-}
+  );
+};
diff --git a/mamaEarth/src/pages/Face.jsx b/mamaEarth/src/pages/Face.jsx
@@ -1,10 +1,49 @@
 import React from 'react'
+import { useFetchData } from '../customHook/useFatchData'
+import { jsonUrls } from '../allJsonUrl/jsonUrls'
+import { Box, Flex, Grid } from '@chakra-ui/react';
 
 export const Face = () => {
+  const {data,loading,error}=useFetchData(jsonUrls.products);
+  const faceProduct=data.filter((product)=>product.category==="Face");
+    if (loading) {
+    return (
+      <Flex justifyContent="center" alignItems="center" height="100vh">
+        <p>Loading...</p>
+      </Flex>
+    );
+  }
+
+  if (error) {
+    return (
+      <Flex justifyContent="center" alignItems="center" height="100vh">
+        <p>Error: {error.message}</p>
+      </Flex>
+    );
+  }
+    if (!Array.isArray(data) || data.length === 0) {
+    return (
+      <Flex justifyContent="center" alignItems="center" height="100vh">
+        <p>No products found.</p>
+      </Flex>
+    );
+  }
+
   return (
     <div>
-
+      <Grid templateColumns="repeat(4, 1fr)" gap="30px" p="30px">
+        {faceProduct.map((product, index) => (
+          <Box key={index} className="product-card">
+            <img
+              src={product.image}
+              alt={product.name}
+              style={{ width: "100%", height: "300px" }}
+            />
+            <h1>{product.name}</h1>
+          </Box>
+        ))}
+      </Grid>
     </div>
-  )
+  );
 }