Merge pull request #374 from Saksham2k3s/feature/improve-canteen-sect…

…ion-page-351

Solved issue 351

src/pages/AddFoodItem.jsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import axios from "axios";
 import { toast } from "react-hot-toast";
-
+import { ThemeContext } from "../themeContext";
 function AddFoodItem() {
+  const { theme } = useContext(ThemeContext);
   const [formData, setFormData] = useState({
     dish: "",
     dishId: "",
@@ -101,12 +102,13 @@ function AddFoodItem() {
   };
 
   return (
-    <div className="flex justify-center items-center my-12">
+    <div className={`flex justify-center items-center h-[80vh] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white' }`}>
+
       <form
         onSubmit={handleSubmit}
-        className="bg-white p-6 rounded shadow-lg w-full max-w-sm border-2"
+        className={`p-6 rounded shadow-lg w-full max-w-sm border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'} `}
       >
-        <h1 className="text-xl font-bold mb-4">Add Food Item</h1>
+        <h1 className="text-xl font-bold mb-4 text-black ">Add Food Item</h1>
         <div className="mb-4">
           <label className="block text-gray-700">Dish Name</label>
           <input
@@ -175,7 +177,7 @@ function AddFoodItem() {
 
         <button
           type="submit"
-          className="w-full bg-blue-500 text-white p-2 rounded mt-4"
+          className="w-full bg-green-500 text-white p-2 rounded-full mt-4"
           disabled={loading}
         >
           {loading ? "Loading..." : "Add Dish"}

src/pages/Login.jsx

@@ -56,10 +56,10 @@ 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`;
+
+       const apiUrl = formData.accountType === "User" 
+      ? 'http://localhost:4000/api/v1/studentLogin' : 'http://localhost:4000/api/v1/canteenLogin'
+
 
 
 

src/pages/SectionPage.jsx

@@ -1,25 +1,29 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import Modal from '../components/Modal';
-import Navbar from '../components/Navbar';
-import Loader from '../components/Loader/Loader';
-import Footer from '../components/Footer';
-import AddFoodItem from './AddFoodItem';
-import EditProfile from './EditProfile';
-import Foodlist from './Foodlist';
-
+import Modal from "../components/Modal";
+import Navbar from "../components/Navbar";
+import Loader from "../components/Loader/Loader";
+import Footer from "../components/Footer";
+import AddFoodItem from "./AddFoodItem";
+import EditProfile from "./EditProfile";
+import Foodlist from "./Foodlist";
+import { ThemeContext } from "../themeContext";
+import { FaRegEdit } from "react-icons/fa";
+import { CiBoxList } from "react-icons/ci";
+import { IoMdAdd } from "react-icons/io";
 const SectionPage = () => {
   const { _id } = useParams();
   const navigate = useNavigate();
+  const { theme } = useContext(ThemeContext);
   const [showModal, setShowModal] = useState(false);
-  const [selectedSection, setSelectedSection] = useState('');
+  const [selectedSection, setSelectedSection] = useState("");
   const [formData, setFormData] = useState(null);
   const [selectedBreakfastRecipes, setSelectedBreakfastRecipes] = useState([]);
   const [selectedLunchRecipes, setSelectedLunchRecipes] = useState([]);
   const [selectedDinnerRecipes, setSelectedDinnerRecipes] = useState([]);
   const [loading, setLoading] = useState(false);
   const [canteenData, setCanteenData] = useState();
-  const [view, setView] = useState('add');
+  const [view, setView] = useState("add");
 
   const getCanteenData = async () => {
     try {
@@ -34,7 +38,7 @@ const SectionPage = () => {
         }
       );
       const res = await getCanteen.json();
-      setCanteenData(res.data.find(canteen => canteen._id === _id));
+      setCanteenData(res.data.find((canteen) => canteen._id === _id));
     } catch (error) {
       console.error(error);
     } finally {
@@ -52,46 +56,65 @@ const SectionPage = () => {
   };
 
   const handleFormSubmit = (data) => {
-    if (selectedSection === 'Breakfast') {
+    if (selectedSection === "Breakfast") {
       setSelectedBreakfastRecipes([...selectedBreakfastRecipes, data]);
-    } else if (selectedSection === 'Lunch') {
+    } else if (selectedSection === "Lunch") {
       setSelectedLunchRecipes([...selectedLunchRecipes, data]);
-    } else if (selectedSection === 'Dinner') {
+    } else if (selectedSection === "Dinner") {
       setSelectedDinnerRecipes([...selectedDinnerRecipes, data]);
     }
     setFormData(data);
     setShowModal(false);
   };
 
   return (
-    <div className="text-center text-gray-900 min-h-screen pt-[8rem]">
+    <div
+      className={`text-center ${
+        theme === "dark" ? "text-white bg-[#131b33]" : "text-gray-900 bg-white"
+      } min-h-screen pt-[8rem]`}
+    >
       <Navbar />
-      <div className='relative'>
+      <div className="relative bg-white">
+
         {loading ? (
           <Loader />
         ) : (
           <>
             <button
-              className="absolute end-0 right-16 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              className="absolute mt-2 end-0 right-16 bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-full flex gap-2 "
               onClick={() => navigate(`/edit-profile/${_id}`)}
             >
-              Edit Profile
+              Edit Profile <FaRegEdit />
             </button>
-            <div className="flex justify-center mt-4">
+            <div
+              className={`flex justify-center mt-4 ${
+                theme === "dark"
+                  ? "text-white bg-[#131b33]"
+                  : "text-gray-900 bg-white"
+              } `}
+            >
               <button
-                className={`mx-4 py-2 px-4 rounded ${view === 'add' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
-                onClick={() => setView('add')}
+                className={`mx-4 mt-2 py-3 px-4 rounded-full ${
+                  view === "add"
+                    ? "bg-green-500 text-white"
+                    : "bg-green-500 text-white"
+                } flex gap-2 `}
+                onClick={() => setView("add")}
               >
-                Add Product
+                Add Product <IoMdAdd />
               </button>
               <button
-                className={`mx-4 py-2 px-4 rounded ${view === 'list' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
-                onClick={() => setView('list')}
+                className={`mx-4 mt-2 py-3 px-4 rounded-full border-green-400 border-2 ${
+                  view === "list"
+                    ? " bg-transparent text-green-500"
+                    : "bg-transparent text-green-500"
+                } flex gap-2 `}
+                onClick={() => setView("list")}
               >
-                Product List
+                Product List <CiBoxList />
               </button>
             </div>
-            {view === 'add' ? <AddFoodItem /> : <Foodlist />}
+            {view === "add" ? <AddFoodItem /> : <Foodlist />}
           </>
         )}
       </div>

src/pages/Signup.jsx

@@ -61,10 +61,15 @@ function Signup() {
     console.log("ENV FILE", process.env.REACT_APP_BASE_URL);
 
     if (lowerValidated && upperValidated && numberValidated && specialValidated && lengthValidated) {
+      // const apiUrl = formData.accountType === "User" 
+      //   ? `${process.env.REACT_APP_BASE_URL}/studentSignup` 
+      //   : `${process.env.REACT_APP_BASE_URL}/canteenSignup`;
       const apiUrl = formData.accountType === "User" 
-        ? `${process.env.REACT_APP_BASE_URL}/studentSignup` 
-        : `${process.env.REACT_APP_BASE_URL}/canteenSignup`;
+
+      ? 'http://localhost:4000/api/v1/studentSignup' : 'http://localhost:4000/api/v1/canteenSignup'
+
 
+
       try {
         setLoading(true);