Details implemented wishlist page implemented

malekch-15 · Nov 20, 2024 · 7d1d96d · 7d1d96d
1 parent e5c614b
commit 7d1d96d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import Details from "./components/Details.tsx";
 export default function App() {
     const navigate = useNavigate();
 
+
     const [restaurants, setRestaurants] = useState<Restaurant[]>([])
 
     const getAllRestaurants = () => {
@@ -38,6 +39,9 @@ export default function App() {
     const handleViewDetails = (id: string) => {
         navigate(`/details/${id}`);
     };
+    // const handleWishlist = () => {
+    //     navigate(`/wishlist`);
+    // };
 
     const handleToggleWishlist = (id: string) => {
         const restaurant = restaurants.find(r => r.id === id);
@@ -74,10 +78,12 @@ export default function App() {
                                                onDeleteRestaurant={handleDeleteRestaurant}
                                                onToggleWishlist={handleToggleWishlist}
                                                handleViewDetails={handleViewDetails}
+                                               //handelWishlist={handleWishlist}
                />}
                                               />
                         <Route path="/wishlist" element={<Wishlist restaurants={restaurants.filter(r => r.status === "ON_WISHLIST")}
-                                                                   onToggleWishlist={handleToggleWishlist}/>}/>
+                                                                   onToggleWishlist={handleToggleWishlist}
+                        />}/>
                     <Route path="/details/:id" element={<Details />} />
                 </Routes>
 

diff --git a/frontend/src/components/Details.tsx b/frontend/src/components/Details.tsx
@@ -21,7 +21,7 @@ export default function Details() {
 
     useEffect(() => {
         fetchRestaurantDetails();
-    },[id]);
+    },[]);
 
     return (
         <>

diff --git a/frontend/src/components/Home/Home.tsx b/frontend/src/components/Home/Home.tsx
@@ -2,6 +2,7 @@ import {Restaurant} from "../model/Restaurant";
 import RestaurantCard from "../RestaurantCard.tsx";
 import {useState} from "react";
 import SearchBar from "./SearchBar.tsx";
+import {Link} from "react-router-dom";
 
 
 
@@ -10,6 +11,7 @@ type HomeProps = {
     onDeleteRestaurant?: (id: string) => void;
     onToggleWishlist: (id: string) => void;
     handleViewDetails: (id: string) => void;
+    handelWishlist?:()=>void;
 }
 
 export default function Home(props: Readonly<HomeProps>) {
@@ -26,11 +28,13 @@ export default function Home(props: Readonly<HomeProps>) {
             r.category.toLowerCase().includes(searchQuery)
     );
 
+
     return (
         <div>
             <h2>Home2</h2>
             <h2>Restaurantfinder</h2>
-
+          {/*<button onClick={props.handelWishlist}>Wishlist</button>*/}
+            <Link to={"/wishlist"}>wishlist</Link>
             <SearchBar onSearch={handleSearch}/>
             {filteredRestaurants.map((r) => (
                 <RestaurantCard
@@ -39,6 +43,9 @@ export default function Home(props: Readonly<HomeProps>) {
                     onDeleteRestaurant={props.onDeleteRestaurant}
                     onToggleWishlist={props.onToggleWishlist}
                     onDetails={props.handleViewDetails}
+                    showEditButton={true}
+                    showDetailsButton={true}
+                    showDeleteButton={true}
 
                 />
             ))}

diff --git a/frontend/src/components/RestaurantCard.tsx b/frontend/src/components/RestaurantCard.tsx
@@ -6,6 +6,9 @@ type RestaurantCardProps = {
     onDeleteRestaurant?: (id: string) => void
     onToggleWishlist: (id: string) => void
     onDetails?:(id:string)=>void
+    showDetailsButton?: boolean; // Add optional props for controlling buttons
+    showEditButton?: boolean;
+    showDeleteButton?: boolean;
 }
 
 function RestaurantCard(props: Readonly<RestaurantCardProps>) {
@@ -15,11 +18,12 @@ function RestaurantCard(props: Readonly<RestaurantCardProps>) {
             <h3>{props.restaurant.name}</h3>
             <h4>{props.restaurant.city}</h4>
             <h4>{props.restaurant.category}</h4>
+            {props.showDetailsButton && (
             <button id="button-details"  onClick={() =>  props.onDetails?.(props.restaurant.id)}
-                    disabled={!props. onDetails}>Details</button>
-            <button>Edit</button>
-            <button id="button-delete"  onClick={() =>  props.onDeleteRestaurant?.(props.restaurant.id)}
-                    disabled={!props. onDeleteRestaurant}>Delete</button>
+                    disabled={!props. onDetails}>Details</button>)}
+            {props.showEditButton &&( <button>Edit</button>)}
+            {props.showDeleteButton &&( <button id="button-delete"  onClick={() =>  props.onDeleteRestaurant?.(props.restaurant.id)}
+                    disabled={!props. onDeleteRestaurant}>Delete</button>)}
             <button id="" onClick={() => props.onToggleWishlist(props.restaurant.id)}
                     className={props.restaurant.status === "ON_WISHLIST" ? "red" : "black"}
                     >♥</button>

diff --git a/frontend/src/components/Wishlist.tsx b/frontend/src/components/Wishlist.tsx
@@ -5,6 +5,7 @@ type WishlistProps = {
     restaurants: Restaurant [];
     onToggleWishlist: (id:string)=>void;
 
+
 }
 
 export default function Wishlist(props: Readonly<WishlistProps>){
@@ -13,7 +14,9 @@ export default function Wishlist(props: Readonly<WishlistProps>){
             <h2>Wishlist</h2>
 
             <h2>Restaurantfinder</h2>
-            {props.restaurants.map((r) => <RestaurantCard key={r.id} restaurant={r} onToggleWishlist={props.onToggleWishlist}/>)}
+            {props.restaurants.map((r) => <RestaurantCard key={r.id}
+                                                          restaurant={r} onToggleWishlist={props.onToggleWishlist}
+                                                          showDeleteButton={false} showDetailsButton={false} showEditButton={false}/>)}
 
         </div>
     )