From 4bc28b4bd95bc37d904690c827c58d8eb2c358ca Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Sun, 30 Jun 2024 12:32:23 +0530
Subject: [PATCH 1/2] Added BEM Naming convention

---
 src/App.css                 | 18 +++++++++---------
 src/components/Feedback.jsx |  8 ++++----
 src/index.css               |  2 +-
 src/pages/MenuPage.jsx      |  4 ++--
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/App.css b/src/App.css
index 95be599..9da17f6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -40,18 +40,18 @@ li:hover span {
   }
 }
 
-.nav-item{
+.Nav__item{
   font-size: 52px !important;
 <<<<<<< Updated upstream
 =======
 }
 
-.star-rating {
+.StarRating  {
   display: flex;
   flex-direction: row;
 }
 
-.star {
+.StarRating__star {
   font-size: 2rem;
   color: #d3d3d3;
   background: none;
@@ -60,30 +60,30 @@ li:hover span {
   transition: color 0.2s;
 }
 
-.star.on {
+.StarRating__star--on {
   color: #ffc107;
 }
 
-.star.off {
+.StarRating__star--off {
   color: #d3d3d3;
 }
-.reviews-container{
+.Reviews__container{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   
 }
-.review-card{
+.Reviews__card {
   width: calc(90vw/3);
   border: 1px solid green;
   background-color: white;
   background-color: aquamarine;
 }
-.stdfeedback{
+.Feedback__standard{
   background-color: white;
   padding: 2% 3%;
 }
-.stdname{
+.Feedback__name{
   margin: 2% 3%;
 }
 
diff --git a/src/components/Feedback.jsx b/src/components/Feedback.jsx
index 0d3121c..6a6571b 100644
--- a/src/components/Feedback.jsx
+++ b/src/components/Feedback.jsx
@@ -30,11 +30,11 @@ const Reviews = () => {
   };
 
   return (
-    <div className="reviews-container">
+    <div className="Reviews__container">
       {reviews.map(review => (
-        <div key={review._id} className="review-card">
-          <p className='stdname'>{review.studentName}</p>
-          <div className="stdfeedback">
+        <div key={review._id} className="Reviews__card ">
+          <p className='Feedback__name'>{review.studentName}</p>
+          <div className="Feedback__standard">
             <h3>Rating: {renderStars(review.rating)}</h3>
             <p>{review.comment}</p>
             <p><strong>Canteen:</strong> {review.canteenName}</p>
diff --git a/src/index.css b/src/index.css
index 587bb9d..bcf3e36 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,7 +23,7 @@ code {
   display: none;
 }
 
-.nav-item{
+.Nav__item{
    font-size: 12px !important;
    font-weight: bolder !important;
 }
diff --git a/src/pages/MenuPage.jsx b/src/pages/MenuPage.jsx
index 57fc33b..9042538 100644
--- a/src/pages/MenuPage.jsx
+++ b/src/pages/MenuPage.jsx
@@ -11,12 +11,12 @@ const StarRating = ({ rating, onRatingChange }) => {
   const [hoverRating, setHoverRating] = useState(0);
 
   return (
-    <div className="star-rating">
+    <div className="StarRating ">
       {[1, 2, 3, 4, 5].map((star) => (
         <button
           type="button"
           key={star}
-          className={`star ${star <= (hoverRating || rating) ? "on" : "off"}`}
+          className={`StarRating__star ${star <= (hoverRating || rating) ? "StarRating__star--on" : "StarRating__star--off"}`}
           onClick={() => onRatingChange(star)}
           onMouseEnter={() => setHoverRating(star)}
           onMouseLeave={() => setHoverRating(0)}

From a05e43d4222c9c3f2e363888da2d26a71a77a803 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Sun, 30 Jun 2024 22:45:06 +0530
Subject: [PATCH 2/2] fixed logout

---
 src/App.css               |   3 -
 src/components/Navbar.jsx |  88 ++++++------------
 src/pages/MenuPage.jsx    | 190 ++++++--------------------------------
 3 files changed, 58 insertions(+), 223 deletions(-)

diff --git a/src/App.css b/src/App.css
index 95be599..a445221 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,8 +42,6 @@ li:hover span {
 
 .nav-item{
   font-size: 52px !important;
-<<<<<<< Updated upstream
-=======
 }
 
 .star-rating {
@@ -90,5 +88,4 @@ li:hover span {
 .stars {
   color: yellow;
   font-size: 24px; /* Increase the font size to make the stars bigger */
->>>>>>> Stashed changes
 }
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index e1c35b8..f5a81ee 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,5 @@
-import React, { useState, useContext } from "react";
-import { Link, useNavigate } from "react-router-dom";
-
+import React, { useState, useContext, useEffect } from "react";
+import { Link } from "react-router-dom";
 import logo from "../assets/logo2.png";
 import { motion, AnimatePresence, useScroll } from "framer-motion";
 import { IoClose } from "react-icons/io5";
@@ -10,10 +9,9 @@ import { jwtDecode } from "jwt-decode";
 import { useAuth } from "../authContext";
 
 const Navbar = () => {
-  const navigate = useNavigate();
-  const canteenId = localStorage.getItem("canteenId");
+  
   const { logout} = useAuth();
-
+  // const [canteenId, setCanteenId] = useState(null);
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [isOpen, setIsOpen] = useState(false);
   const { scrollYProgress } = useScroll();
@@ -32,17 +30,22 @@ const Navbar = () => {
         }
     }
   }, []);
+  const removetoken = ()=>{
+      const usertoken=localStorage.getItem("usertoken");
+      const token=localStorage.getItem("token");
+      if(usertoken) {
+        localStorage.removeItem("usertoken");
+      }
+      if(token) {
+        localStorage.removeItem("token")
+        localStorage.removeItem("canteenId")
+      }
+  }
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
 
-  const handleLogout = () => {
-    localStorage.removeItem('usertoken');
-    navigate('/')
-  }
-
-
   return (
     <>
     <nav className="text-white p-3 shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
@@ -70,21 +73,19 @@ const Navbar = () => {
             </div>
           </div>
 
-            <div className="hidden md:flex items-center gap-5">
-              <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
-                {theme === 'dark' ? '🌞' : '🌙'}
-              </button>
-              <div>
-                <Link to="/">
-                  <button
-                    onClick={handleLogout}
-                    className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
-                  >
-                    Log out
-                  </button>
-                </Link>
-              </div>
-
+          <div className="hidden md:flex items-center gap-5">
+            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
+              {theme === 'dark' ? '🌞' : '🌙'}
+            </button>
+            <div>
+              <Link to="/">
+                <button
+                  onClick={removetoken}
+                  className={`py-1 px-2  w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
+                >
+                  Log out
+                </button>
+              </Link>
             </div>
           </div>
 
@@ -140,39 +141,6 @@ const Navbar = () => {
     </nav>
   </>
 
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0, y: -50 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -50 }}
-              className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
-            >
-              <div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
-                <MobileNavItem to="/home">Home</MobileNavItem>
-                <MobileNavItem to="/about">About us</MobileNavItem>
-                <MobileNavItem to="/news">News</MobileNavItem>
-                <MobileNavItem to="/contact">Contact</MobileNavItem>
-                <MobileNavItem to="/rateus">RateUs</MobileNavItem>
-                {/* Conditionally render "My Canteen" button */}
-                {canteenId && (
-                  <MobileNavItem to={`/section/${canteenId}`}>My Canteen</MobileNavItem>
-                )}
-                <MobileNavItem to="/">
-                  <button
-                  onClick={handleLogout}
-                    className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
-                  >
-                    Log out
-                  </button>
-                </MobileNavItem>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </nav>
-    </>
-
   );
 };
 
diff --git a/src/pages/MenuPage.jsx b/src/pages/MenuPage.jsx
index 57fc33b..352f09b 100644
--- a/src/pages/MenuPage.jsx
+++ b/src/pages/MenuPage.jsx
@@ -5,37 +5,16 @@ import { toast } from "react-hot-toast";
 import Navbar from "../components/Navbar";
 import Loader from "../components/Loader/Loader";
 import Footer from "../components/Footer";
+import FoodCard from "../components/FoodCard";
 import { ThemeContext } from '../themeContext';
 
-const StarRating = ({ rating, onRatingChange }) => {
-  const [hoverRating, setHoverRating] = useState(0);
-
-  return (
-    <div className="star-rating">
-      {[1, 2, 3, 4, 5].map((star) => (
-        <button
-          type="button"
-          key={star}
-          className={`star ${star <= (hoverRating || rating) ? "on" : "off"}`}
-          onClick={() => onRatingChange(star)}
-          onMouseEnter={() => setHoverRating(star)}
-          onMouseLeave={() => setHoverRating(0)}
-        >
-          &#9733;
-        </button>
-      ))}
-    </div>
-  );
-};
-
 function MenuPage() {
   const { _id } = useParams();
-  const [breakfast, setBreakfast] = useState();
-  const [lunch, setLunch] = useState();
-  const [dinner, setDinner] = useState();
-  const [selectedDish, setSelectedDish] = useState(null);
+  const [breakfast, setBreakfast] = useState([]);
+  const [lunch, setLunch] = useState([]);
+  const [dinner, setDinner] = useState([]);
+  const [selectedCategory, setSelectedCategory] = useState('breakfast');
   const [feedback, setFeedback] = useState("");
-  const [rating, setRating] = useState(0);
   const [loading, setLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState([]);
@@ -54,7 +33,7 @@ function MenuPage() {
         }
       );
       const res = await getBreakfast.json();
-      setBreakfast(res);
+      setBreakfast(res.data);
     } catch (error) {
       console.error(error);
     } finally {
@@ -75,7 +54,7 @@ function MenuPage() {
         }
       );
       const res = await getLunch.json();
-      setLunch(res);
+      setLunch(res.data);
     } catch (error) {
       console.error(error);
     } finally {
@@ -96,7 +75,7 @@ function MenuPage() {
         }
       );
       const res = await getDinner.json();
-      setDinner(res);
+      setDinner(res.data);
     } catch (error) {
       console.error(error);
     } finally {
@@ -152,9 +131,9 @@ function MenuPage() {
     }
   };
 
-  const handleFeedbackSubmit = async () => {
-    if (feedback.trim() === '' && rating === 0) {
-      toast.error("Please provide your feedback and rating before submitting.");
+  function handleFeedbackSubmit() {
+    if (feedback.trim() === '') {
+      toast.error("Please provide your feedback before submitting.");
     } else {
       setFeedback('');
       toast.success('Feedback Submitted!');
@@ -178,29 +157,10 @@ function MenuPage() {
     }
     if (items.length === 0) {
       return <p className="absolute w-full text-xl text-red-700 text-center dark:text-red-400">No {selectedCategory.charAt(0).toUpperCase() + selectedCategory.slice(1)} Available Now</p>;
-      try {
-        const response = await axios.post(
-          `${process.env.REACT_APP_BASE_URL}/feedback`,
-          {
-            canteenId: _id,
-            feedback: feedback,
-            rating: rating,
-            studentId: localStorage.getItem('token')
-          },
-          {
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-        setFeedback('');
-        setRating(0);
-        toast.success('Feedback Submitted!');
-      } catch (error) {
-        console.error("Error submitting feedback: ", error);
-        toast.error("Failed to submit feedback. Please try again.");
-      }
     }
+    return items.map((dish) => (
+      <FoodCard key={dish._id} dish={dish} onClick={() => handleDishClick(dish.dishId)} />
+    ));
   };
 
   const renderSearchResults = () => {
@@ -213,7 +173,7 @@ function MenuPage() {
   };
 
   return (
-    <div className="text-purple-800 min-h-screen pt-5">
+    <div className="text-purple-800 min-h-screen pt-5 bg-transparent dark:bg-slate-200">
       <Navbar />
       <div className="container px-8 mx-auto p-4 mt-20 min-h-screen bg-transparent dark:bg-slate-200">
         <div className="flex justify-center space-x-4 mb-8">
@@ -252,112 +212,22 @@ function MenuPage() {
             )}
           </>
         )}
-      <div className="container mx-auto p-4">
-        <h1 className="text-4xl font-bold mb-8 text-white">Today's Menu</h1>
-        {
-          loading ? (
-            <Loader />
-          ) : (
-            <>
-              <div className="flex flex-col gap-4 p-5 md:flex-row justify-center">
-                {breakfast && (
-                  <div className="w-2/3 rounded-lg shadow-md border-2 border-red-300 mt-5">
-                    <div className="text-center bg-red-300 text-black py-3 font-xl relative">
-                      <img
-                        src="https://cdn-icons-png.flaticon.com/128/5025/5025429.png"
-                        alt="Breakfast Icon"
-                        className="absolute top-0 left-4 h-16 w-16 -mt-8 -ml-8"
-                      />
-                      Breakfast
-                    </div>
-                    <div className="p-4">
-                      <ul>
-                        {breakfast.data.map((dish) => (
-                          <li
-                            key={dish._id}
-                            onClick={() => handleDishClick(dish.dishId)}
-                            className={`cursor-pointer hover:bg-gradient-to-r from-green-300 to-green-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${theme === 'dark' ? 'text-white' : 'text-red-600'} hover:text-black mt-2 `}
-                          >
-                            • {dish.dish}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-                {lunch && (
-                  <div className="w-2/3 rounded-lg shadow-md border-green-300 border-2 mt-5">
-                    <div className="text-center bg-green-300 text-black py-3 font-xl relative">
-                      <img
-                        src="https://cdn-icons-png.flaticon.com/128/2082/2082045.png"
-                        alt="Lunch Icon"
-                        className="absolute top-0 left-4 h-16 w-16 -mt-8 -ml-8"
-                      />
-                      Lunch
-                    </div>
-                    <div>
-                      <ul>
-                        {lunch.data.map((dish) => (
-                          <li
-                            key={dish._id}
-                            onClick={() => handleDishClick(dish.dishId)}
-                            className={`hover:bg-gradient-to-r from-green-300 to-green-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${theme === 'dark' ? 'text-white' : 'text-green-600'} hover:text-black mt-2 `}
-                          >
-                            • {dish.dish}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-                {dinner && (
-                  <div className="w-2/3 rounded-lg shadow-md border-yellow-300 border-2 mt-5">
-                    <div className="text-center bg-yellow-300 text-black py-3 font-xl relative">
-                      <img
-                        src="https://cdn-icons-png.flaticon.com/128/3321/3321601.png"
-                        alt="Dinner Icon"
-                        className="absolute top-0 left-4 h-16 w-16 -mt-8 -ml-8"
-                      />
-                      Dinner
-                    </div>
-                    <div>
-                      <ul>
-                        {dinner.data.map((dish) => (
-                          <li
-                            key={dish._id}
-                            onClick={() => handleDishClick(dish.dishId)}
-                            className={`hover:bg-gradient-to-r from-yellow-300 to-yellow-500 transition-transform duration-300 ease-in-out transform hover:-translate-y-1 px-5 py-2 ${theme === 'dark' ? 'text-white' : 'text-yellow-600'} hover:text-black mt-2 `}
-                          >
-                            • {dish.dish}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-              </div>
-              <div className="mt-8 text-purple-800">
-                <h2 className="text-2xl font-bold mb-4 text-white dark:text-slate-900">Meal Feedback</h2>
-                <textarea
-                  className="w-full h-32 p-4 border border-purple-300 rounded mb-4"
-                  placeholder="Enter your feedback here..."
-                  value={feedback}
-                  onChange={(e) => setFeedback(e.target.value)}
-                ></textarea>
-                <div className="mb-4">
-                  <StarRating rating={rating} onRatingChange={setRating} />
-                </div>
-                <button
-                  onClick={handleFeedbackSubmit}
-                  className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
-                >
-                  Submit Feedback
-                </button>
-              </div>
-            </>
-          )
-        }
       </div>
+      <div className="mt-8 text-purple-800 px-8 mb-4">
+          <h2 className="text-2xl font-bold mb-4 text-white text-center dark:text-black">Meal Feedback</h2>
+          <textarea
+            className="w-full h-32 p-4 border border-purple-300 rounded mb-4"
+            placeholder="Enter your feedback here..."
+            value={feedback}
+            onChange={(e) => setFeedback(e.target.value)}
+          ></textarea>
+          <button
+            onClick={handleFeedbackSubmit}
+            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Submit Feedback
+          </button>
+        </div>
       <Footer />
     </div>
   );