From 41c4e29c5c3bef2874158f7b8f21d78093be2850 Mon Sep 17 00:00:00 2001 From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com> Date: Wed, 12 Jun 2024 04:29:44 +0530 Subject: [PATCH] Added FooD List Menu --- server/controllers/canteenController.js | 14 +- src/App.css | 3 + src/pages/AddFoodItem.jsx | 2 +- src/pages/Foodlist.jsx | 225 ++++++++++++++++++++++++ src/pages/Login.jsx | 5 +- src/pages/SectionPage.jsx | 46 +++-- 6 files changed, 270 insertions(+), 25 deletions(-) create mode 100644 src/pages/Foodlist.jsx diff --git a/server/controllers/canteenController.js b/server/controllers/canteenController.js index f3d5b1b..fc4e569 100644 --- a/server/controllers/canteenController.js +++ b/server/controllers/canteenController.js @@ -28,7 +28,7 @@ const getBreakfast = async(req , res , next) =>{ try{ const id = req.params.id; - console.log(id); + const breakfastData = await Breakfast.find({ canteen: id }).select("dish").select("dishId").exec(); @@ -118,9 +118,9 @@ const addBreakfastDish = asyncHandler(async (req, res, next) => { // Controller function to remove a breakfast dish const removeBreakfastDish = asyncHandler(async (req, res, next) => { const canteenId = req.params.id; - const { dish } = req.body; + const dish = req.body._id; - await Breakfast.deleteOne({ canteen: canteenId, dish }).exec(); + await Breakfast.deleteOne({ _id:dish }).exec(); res.json({ message: 'Dish removed successfully' }); }); @@ -147,9 +147,9 @@ const addLunchDish = asyncHandler(async (req, res, next) => { // Controller function to remove a lunch dish const removeLunchDish = asyncHandler(async (req, res, next) => { const canteenId = req.params.id; - const { dish } = req.body; + const dish = req.body._id; - await Lunch.deleteOne({ canteen: canteenId, dish }).exec(); + await Lunch.deleteOne({ _id:dish }).exec(); res.json({ message: 'Dish removed successfully' }); }); @@ -175,9 +175,9 @@ const addDinnerDish = asyncHandler(async (req, res, next) => { // Controller function to remove a dinner dish const removeDinnerDish = asyncHandler(async (req, res, next) => { const canteenId = req.params.id; - const { dish } = req.body; + const dish = req.body._id; - await Dinner.deleteOne({ canteen: canteenId, dish }).exec(); + await Dinner.deleteOne({ _id:dish }).exec(); res.json({ message: 'Dish removed successfully' }); }); diff --git a/src/App.css b/src/App.css index 74b5e05..d123d60 100644 --- a/src/App.css +++ b/src/App.css @@ -12,6 +12,9 @@ animation: App-logo-spin infinite 20s linear; } } +li:hover span { + opacity: 1; +} .App-header { background-color: #282c34; diff --git a/src/pages/AddFoodItem.jsx b/src/pages/AddFoodItem.jsx index 2bc0e77..7e25280 100644 --- a/src/pages/AddFoodItem.jsx +++ b/src/pages/AddFoodItem.jsx @@ -83,7 +83,7 @@ function AddFoodItem() { }; return ( -
+
{ + const { _id } = useParams(); + const [breakfast, setBreakfast] = useState(); + const [lunch, setLunch] = useState(); + const [dinner, setDinner] = useState(); + const [loading, setLoading] = useState(false); + const { theme } = useContext(ThemeContext); + + const getFoodData = async (mealType, setMeal) => { + try { + setLoading(true); + const response = await fetch( + `http://localhost:8000/api/v1/${_id}/${mealType}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); + const res = await response.json(); + setMeal(res); + } catch (error) { + console.error(error); + } finally { + setLoading(false); + } + }; + + const handleDelete = async (_id, mealType) => { + try { + const token = localStorage.getItem("token"); // Retrieve token from local storage + if (!token) { + toast.error("Token is missing. Please log in."); + return; + } + + await axios.delete( + `http://localhost:8000/api/v1/${_id}/${mealType}/remove`, + { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, // Include the token in the Authorization header + }, + data: { + _id, + }, + } + ); + toast.success("Food item deleted successfully!"); + // Re-fetch the data to update the list + getFoodData("breakfast", setBreakfast); + getFoodData("lunch", setLunch); + getFoodData("dinner", setDinner); + } catch (error) { + console.error("Error deleting food item: ", error); + toast.error("Failed to delete food item."); + } + }; + + useEffect(() => { + getFoodData("breakfast", setBreakfast); + getFoodData("lunch", setLunch); + getFoodData("dinner", setDinner); + }, [_id]); + + const handleDishClick = async (_id) => { + try { + const response = await axios.get( + `${process.env.REACT_APP_SPOONACULAR_API_URL}/recipes/${_id}/information?apiKey=${process.env.REACT_APP_API_KEY}` + ); + const recipeUrl = response.data.spoonacularSourceUrl; + window.open(recipeUrl, "_blank"); + } catch (error) { + console.error("Error fetching recipe information: ", error); + } + }; + + return ( +
+ +
+

Food List

+ {loading ? ( + + ) : ( +
+ {breakfast && ( +
+
+ Breakfast Icon + Breakfast +
+
+
    + {breakfast.data.map((dish) => ( +
  • handleDishClick(dish._id)} + className={`cursor-pointer relative text-start 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} + { + e.stopPropagation(); + handleDelete(dish._id, "breakfast"); + }} + > + Delete Icon + +
    • + ))} +
+
+
+ )} + {lunch && ( +
+
+ Lunch Icon + Lunch +
+
+
    + {lunch.data.map((dish) => ( +
  • handleDishClick(dish._id)} + className={`cursor-pointer relative text-start 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} + { + e.stopPropagation(); + handleDelete(dish._id, "lunch"); + }} + > + Delete Icon + +
    • + ))} +
+
+
+ )} + {dinner && ( +
+
+ Dinner Icon + Dinner +
+
+
    + {dinner.data.map((dish) => ( +
  • handleDishClick(dish._id)} + className={`cursor-pointer relative text-start 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} + { + e.stopPropagation(); + handleDelete(dish._id, "dinner"); + }} + > + Delete Icon + +
    • + ))} +
+
+
+ )} +
+ )} +
+
+
+ ); +}; + +export default Foodlist; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 108217e..e22e3f0 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -39,14 +39,15 @@ function Login() { try { const response = await axios.post(apiUrl, formData); const { token, cantId } = response.data; - localStorage.setItem("token", token); - localStorage.setItem("canteenId", cantId); + if (formData.accountType === "User") { toast.success("User logged in successfully!"); navigate("/home"); } else { toast.success("User Logged in"); + localStorage.setItem("token", token); + localStorage.setItem("canteenId", cantId); navigate(`/section/${cantId}`); } } catch (error) { diff --git a/src/pages/SectionPage.jsx b/src/pages/SectionPage.jsx index 1f57497..a9ed459 100644 --- a/src/pages/SectionPage.jsx +++ b/src/pages/SectionPage.jsx @@ -6,6 +6,7 @@ import Loader from '../components/Loader/Loader'; import Footer from '../components/Footer'; import AddFoodItem from './AddFoodItem'; import EditProfile from './EditProfile'; +import Foodlist from './Foodlist'; const SectionPage = () => { const { _id } = useParams(); @@ -18,6 +19,7 @@ const SectionPage = () => { const [selectedDinnerRecipes, setSelectedDinnerRecipes] = useState([]); const [loading, setLoading] = useState(false); const [canteenData, setCanteenData] = useState(); + const [view, setView] = useState('add'); const getCanteenData = async () => { try { @@ -62,22 +64,36 @@ const SectionPage = () => { }; return ( -
+
-
- {loading ? ( - - ) : ( - <> - - - - )} +
+ {loading ? ( + + ) : ( + <> + +
+ + +
+ {view === 'add' ? : } + + )}