Skip to content

Commit

Permalink
fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@nishant0708
nishant0708 committed Jul 18, 2024
1 parent 56cd98b commit e52e56e
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 187 deletions.
6 changes: 3 additions & 3 deletions src/components/Modal-update.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState } from "react";

const Modalupdate = ({ dish, onUpdate, onCancel }) => {
const Modalupdate = ({ dish,description, onUpdate, onCancel }) => {
const [updatedDish, setUpdatedDish] = useState({
dish: dish.dish,
description: dish.description || "",
dish: dish,
description: description || "",
dishImage: null, // For the new image file
});

Expand Down
215 changes: 31 additions & 184 deletions src/pages/Foodlist.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ const Foodlist = () => {
try {
setLoading(true);
const response = await fetch(
`${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`, {
`${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Expand All @@ -39,10 +40,8 @@ const Foodlist = () => {
setLoading(false);
}
};
function handleClose(){
setEditModal(false)
console.log(editModal)
}


const handleDelete = async (dishId, mealType) => {
try {
const token = localStorage.getItem("token");
Expand Down Expand Up @@ -76,7 +75,7 @@ const Foodlist = () => {

const handleUpdateDish = async (updatedDish) => {
try {
const token = localStorage.getItem("token");
const token = localStorage.getItem("token"); // Retrieve token from local storage
if (!token) {
toast.error("Token is missing. Please log in.");
return;
Expand Down Expand Up @@ -105,7 +104,11 @@ const Foodlist = () => {

toast.success("Dish updated successfully!");
setEditModal(false);
fetchData(currentDish.mealType, getMealSetter(currentDish.mealType));

// Re-fetch the data to update the list
fetchData("breakfast", setBreakfast);
fetchData("lunch", setLunch);
fetchData("dinner", setDinner);
} catch (error) {
console.error("Error updating dish: ", error);
toast.error("Failed to update dish.");
Expand All @@ -121,6 +124,7 @@ const Foodlist = () => {
});
};


const getMealSetter = (mealType) => {
switch (mealType) {
case "breakfast":
Expand All @@ -130,14 +134,14 @@ const Foodlist = () => {
case "dinner":
return setDinner;
default:
return;
return () => {};
}
};

useEffect(() => {
fetchData("breakfast", setBreakfast);
fetchData("lunch", setLunch);
fetchData("dinner", setLunch);
fetchData("dinner", setDinner);
}, [_id]);

const handleDishClick = async (dishId) => {
Expand Down Expand Up @@ -168,207 +172,50 @@ const Foodlist = () => {
items = [];
}
if (items.length === 0) {
return (
<p className="text-xl text-red-700 text-center">
No{" "}
{selectedCategory.charAt(0).toUpperCase() + selectedCategory.slice(1)}{" "}
Available Now
</p>
);
return <p className="text-xl text-red-700 text-center">No {selectedCategory.charAt(0).toUpperCase() + selectedCategory.slice(1)} Available Now</p>;
}
return items.map((dish) => (
<FoodCard
key={dish._id}
dish={dish}
onClick={() => handleDishClick(dish.dishId)}
onEdit={() => handleEditClick(dish, selectedCategory)}
onDelete={() => handleDelete(dish._id, selectedCategory)}
<FoodCard
key={dish._id}
dish={dish}
onClick={() => handleDishClick(dish.dishId)}
onEdit={() => handleEditClick(dish, selectedCategory)}
onDelete={() => handleDelete(dish._id, selectedCategory)}
/>
));
};

return (
<div className={` text-purple-800 min-h-screen pt-5 ${theme=="dark"?"bg-[#131b33]":""}` }>
<div className="text-purple-800 min-h-screen pt-5 bg-transparent">
<Navbar />
<div className="container px-8 mx-auto p-4 mt-20 min-h-screen bg-transparent">
<div className="flex justify-center space-x-4 mb-8">
{["breakfast", "lunch", "dinner"].map((category) => (
<button
key={category}
className={`px-4 py-2 rounded-lg ${
selectedCategory === category ? "bg-green-300" : "bg-gray-300"
} focus:outline-none`}
onClick={() => setSelectedCategory(category)}>
className={`px-4 py-2 rounded-lg ${selectedCategory === category ? 'bg-green-300' : 'bg-gray-300'} focus:outline-none`}
onClick={() => setSelectedCategory(category)}
>
{category.charAt(0).toUpperCase() + category.slice(1)}
</button>
))}
</div>
{loading ? (
<Loader />
) : (
<div className="flex flex-col gap-4 p-5 md:flex-row justify-center">
{breakfast.length > 0 && (
<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.map((dish) => (
<li
key={dish._id}
onClick={() => 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}
<span
className="absolute right-12 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
onClick={(e) => {
e.stopPropagation();
handleEditClick(dish, "breakfast");
}}>
<img
src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png"
alt="Edit Icon"
className="h-6 w-6"
/>
</span>
<span
className="absolute right-5 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
onClick={(e) => {
e.stopPropagation();
handleDelete(dish._id, "breakfast");
}}>
<img
src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png"
alt="Delete Icon"
className="h-6 w-6"
/>
</span>
</li>
))}
</ul>
</div>
</div>
)}
{lunch.length > 0 && (
<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 className="p-4">
<ul>
{lunch.map((dish) => (
<li
key={dish._id}
onClick={() => 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}
<span
className="absolute right-12 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
onClick={(e) => {
e.stopPropagation();
handleEditClick(dish, "lunch");
}}>
<img
src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png"
alt="Edit Icon"
className="h-6 w-6"
/>
</span>
<span
className="absolute right-5 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
onClick={(e) => {
e.stopPropagation();
handleDelete(dish._id, "lunch");
}}>
<img
src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png"
alt="Delete Icon"
className="h-6 w-6"
/>
</span>
</li>
))}
</ul>
</div>
</div>
)}
{dinner.length > 0 && (
<div className="w-2/3 rounded-lg shadow-md border-blue-300 border-2 mt-5">
<div className="text-center bg-blue-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 className="p-4">
<ul>
{dinner.map((dish) => (
<li
key={dish._id}
onClick={() => 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-blue-600"
} hover:text-black mt-2`}>
• {dish.dish}
<span
className="absolute right-12 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
onClick={(e) => {
e.stopPropagation();
handleEditClick(dish, "dinner");
}}>
<img
src="https://cdn-icons-png.flaticon.com/512/2921/2921222.png"
alt="Edit Icon"
className="h-6 w-6"
/>
</span>
<span
className="absolute right-5 top-2 opacity-0 hover:opacity-100 transition-opacity duration-300"
onClick={(e) => {
e.stopPropagation();
handleDelete(dish._id, "dinner");
}}>
<img
src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png"
alt="Delete Icon"
className="h-6 w-6"
/>
</span>
</li>
))}
</ul>
</div>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{renderMenuItems()}
</div>
)}
</div>
<Footer />

{editModal && (
<Modalupdate
dish={currentDish}
onCancel={handleClose}
onUpdate={handleUpdateDish}
dish={currentDish.dish}
description={currentDish.description}
onUpdate={(updatedDish) => handleUpdateDish(updatedDish)}
onCancel={() => setEditModal(false)}
/>
)}

</div>
);
};
Expand Down

0 comments on commit e52e56e

Please sign in to comment.