diff --git a/envexample b/envexample index f8d1c7c..e30449b 100644 --- a/envexample +++ b/envexample @@ -1 +1 @@ -REACT_APP_BASE_URL="localhost:8000/api/v1" 8000 can be replaced by the server you are running backend on \ No newline at end of file +REACT_APP_BASE_URL=localhost:8000/api/v1 8000 can be replaced by the server you are running backend on \ No newline at end of file diff --git a/src/components/CanteenList.jsx b/src/components/CanteenList.jsx index 5db5757..0a35e8d 100644 --- a/src/components/CanteenList.jsx +++ b/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

No canteen data available.

; + } return (
- {canteenData?.data.map(canteen => ( - + {canteenData.data.map((canteen) => ( + ))}
); - }; export default CanteenList; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 56bf9f8..95f0de0 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,6 +1,5 @@ - - 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"; @@ -8,7 +7,6 @@ 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"; @@ -16,92 +14,81 @@ 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 ? ( - - ):( -
- -
- + {loading ? ( + + ) : ( +
+ +
+
+ + +
+
+
+ +
+
-
- ) - } + )} - - ); } export default Home; - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 8a0cc25..51e086b 100644 --- a/src/pages/Login.jsx +++ b/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 ? (