Merge pull request VanshKing30#332 from nishant0708/Search-Bar

Feat:Search bar VanshKing30#293

envexample

@@ -1 +1 @@
-REACT_APP_BASE_URL="localhost:8000/api/v1" 8000 can be replaced by the server you are running backend on
+REACT_APP_BASE_URL=localhost:8000/api/v1 8000 can be replaced by the server you are running backend on

src/components/CanteenList.jsx

@@ -1,19 +1,18 @@
-
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import CanteenCard from './CanteenCard';
 
-
-
-const CanteenList = ({canteenData}) => {
+const CanteenList = ({ canteenData }) => {
+  if (!canteenData || !canteenData.data) {
+    return <p>No canteen data available.</p>;
+  }
 
   return (
     <div className="flex flex-wrap justify-center mt-20">
-      {canteenData?.data.map(canteen => (
-        <CanteenCard key={canteen.id} canteen={canteen}  />
+      {canteenData.data.map((canteen) => (
+        <CanteenCard key={canteen._id} canteen={canteen} />
       ))}
     </div>
   );
-
 };
 
 export default CanteenList;

src/pages/Home.jsx

@@ -1,107 +1,94 @@
-
-
 import React, { useState, useEffect } from "react";
+import { AiOutlineSearch } from "react-icons/ai";  // Importing the search icon
 import axios from "axios";
 import { Link } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import Navbar from "../components/Navbar";
 import CanteenList from "../components/CanteenList";
 import Loader from "../components/Loader/Loader";
 import Footer from "../components/Footer";
-
 import FloatBtn from "../components/FloatBtn/FloatBtn";
 import { useAuth } from "../authContext";
 import { useNavigate } from "react-router-dom";
 
 function Home() {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuth();
-  const [canteenData , setCanteenData] = useState();
+  const [canteenData, setCanteenData] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [filteredCanteenData, setFilteredCanteenData] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
 
-  useEffect(() => {
-     if(!isAuthenticated){
-       navigate('/')
-     }
-  }, [])
-
-  const getCanteenData = async () =>{
-    try{
+  const getCanteenData = async () => {
+    try {
       setLoading(true);
       const getCanteen = await fetch(
         `${process.env.REACT_APP_BASE_URL}/getcanteen`,
         {
-          method : "GET",
-          headers :{
-            "Content-Type" : "application/json",
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
           },
         }
       );
       const res = await getCanteen.json();
       setCanteenData(res);
-    }
-      catch(error){
-        console.error(error);
-    }
-    finally {
+      setFilteredCanteenData(res); // Initialize filtered data with all canteens
+    } catch (error) {
+      console.error(error);
+    } finally {
       setLoading(false);
     }
-
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     getCanteenData();
-  },[])
+  }, []);
 
+  useEffect(() => {
+    if (!canteenData?.data) return; // Ensure canteenData.data exists
+    // Filter canteenData based on searchTerm
+    if (searchTerm.trim() === "") {
+      setFilteredCanteenData(canteenData); // If search term is empty, show all canteens
+    } else {
+      const filteredData = canteenData.data.filter((canteen) =>
+        canteen.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setFilteredCanteenData({ data: filteredData });
+    }
+  }, [searchTerm, canteenData]);
 
+  const handleSearch = (event) => {
+    setSearchTerm(event.target.value);
+  };
 
   return (
     <>
-    {
-      loading ? (
-        <Loader/>
-      ):(
-        <div className=" min-h-screen dark:bg-teal-700">
-        <Navbar />
-        <div className="text-center">
-          <CanteenList canteenData = {canteenData}/>
+      {loading ? (
+        <Loader />
+      ) : (
+        <div className="min-h-screen dark:bg-teal-700">
+          <Navbar />
+          <div className="mx-auto max-w-2xl p-4" style={{ paddingTop: "120px" }}>
+            <div className="relative">
+              <AiOutlineSearch className="absolute top-2 left-3 text-gray-400" size={24} />
+              <input
+                type="text"
+                placeholder="Search Canteen"
+                value={searchTerm}
+                onChange={handleSearch}
+                className="w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+          <div className="text-center">
+            <CanteenList canteenData={filteredCanteenData} />
+          </div>
+          <Footer />
         </div>
-        <Footer />
-      </div>
-      )
-    }
+      )}
     </>
-
-
   );
 }
 
 export default Home;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

src/pages/Login.jsx

@@ -48,37 +48,37 @@ function Login() {
 
   async function submitHandler(event) {
     event.preventDefault();
-
+  
     const apiUrl =
       formData.accountType === "User"
         ? `${process.env.REACT_APP_BASE_URL}/studentLogin`
         : `${process.env.REACT_APP_BASE_URL}/canteenLogin`;
-
+  
     try {
       const response = await axios.post(apiUrl, formData);
       toast.success("User Logged in");
-
+      
       if (rememberMe) {
         localStorage.setItem("rememberedEmail", formData.email);
       } else {
         localStorage.removeItem("rememberedEmail");
       }
-
+  
       if (formData.accountType === "User") {
         navigate("/home");
+        localStorage.setItem("token", response.data.token);
       } else {
-        navigate("/home");
+        localStorage.setItem("canteenId", response.data.cantId);
+        localStorage.setItem("token", response.data.token);
 
-        localStorage.setItem("canteenId",response.data.cantId);
-        localStorage.setItem("token",response.data.token);
         navigate(`/section/${response.data.cantId}`);
 
       }
     } catch (error) {
+      console.error(error);
       toast.error("Failed to login");
     }
   }
-
   return (
     <>
       {loading ? (