wishlist implemented

frontend/src/App.tsx

@@ -3,6 +3,9 @@ import axios from "axios";
 import {useEffect, useState} from "react";
 import {Restaurant} from "./components/model/Restaurant.ts";
 import Home from "./components/Home/Home.tsx"
+import {WishlistStatus} from "./components/model/WishlistStatus.ts";
+import {Route, Routes} from "react-router-dom";
+import Wishlist from "./components/Wishlist.tsx";
 
 
 export default function App() {
@@ -29,9 +32,43 @@ export default function App() {
             console.error(error)
         })}
 
+    const handleToggleWishlist = (id: string) => {
+        const restaurant = restaurants.find(r => r.id === id);
+        if (!restaurant) return;
+
+        const updatedStatus: WishlistStatus = restaurant.status === "ON_WISHLIST" ? "NOT_ON_WISHLIST" : "ON_WISHLIST";
+        const updatedRestaurant = { ...restaurant, status: updatedStatus };
+
+        // axios
+        //     .put(`/api/restaurant/${id}`, updatedRestaurant)
+        //     .then((response) => {
+        //         setRestaurants(restaurants.map(r => r.id === id ? response.data : r)
+        //         );
+        //     })
+        //     .catch((error) => {
+        //         console.error("Error updating restaurant", error);
+        //     });
+
+        axios
+            .put(`/api/restaurant/${id}`, updatedRestaurant)
+            .then((response) => {
+                setRestaurants(prevRestaurants =>
+                    prevRestaurants.map(r => r.id === id ? response.data : r)
+                );
+            })
+            .catch((error) => {
+                console.error("Error updating restaurant", error);
+            });
+    };
+
         return (
-            <>
-                <Home restaurants={restaurants} onDeleteRestaurant={handleDeleteRestaurant}/>
-            </>
+                <Routes>
+                <Route path="/" element={<Home restaurants={restaurants}
+                                               onDeleteRestaurant={handleDeleteRestaurant}
+                                               onToggleWishlist={handleToggleWishlist}/>}/>
+                        <Route path="/wishlist" element={<Wishlist restaurants={restaurants.filter(r => r.status === "ON_WISHLIST")}
+                                                                   onToggleWishlist={handleToggleWishlist}/>}/>
+                </Routes>
+
         );
     }

frontend/src/components/Home/Home.tsx

@@ -4,16 +4,19 @@ import RestaurantCard from "../RestaurantCard.tsx";
 
 type HomeProps = {
     restaurants: Restaurant [];
-    onDeleteRestaurant: (id:string)=>void;
+    onDeleteRestaurant?: (id: string) => void;
+    onToggleWishlist: (id: string) => void;
 }
 
-export default function Home(props: Readonly<HomeProps>){
-    return(
+export default function Home(props: Readonly<HomeProps>) {
+    return (
         <div>
             <h2>Home2</h2>
             <h2>Restaurantfinder</h2>
 
-            {props.restaurants.map((r)=><RestaurantCard key={r.id} restaurant={r} onDeleteRestaurant={props.onDeleteRestaurant}/>)}
+            {props.restaurants.map((r) => <RestaurantCard key={r.id} restaurant={r}
+                                                          onDeleteRestaurant={props.onDeleteRestaurant}
+                                                          onToggleWishlist={props.onToggleWishlist}/>)}
         </div>
     )
 }

frontend/src/components/RestaurantCard.tsx

@@ -1,24 +1,29 @@
-
 import {Restaurant} from "./model/Restaurant.ts";
 import "./styles/RestaurantCard.css"
 
 type RestaurantCardProps = {
     restaurant: Restaurant;
-    onDeleteRestaurant: (id:string)=>void
+    onDeleteRestaurant?: (id: string) => void
+    onToggleWishlist: (id: string) => void
 }
 
 function RestaurantCard(props: Readonly<RestaurantCardProps>) {
 
     return (
-         <div className="restaurantCard">
+        <div className="restaurantCard">
             <h3>{props.restaurant.name}</h3>
             <h4>{props.restaurant.city}</h4>
             <h4>{props.restaurant.category}</h4>
-            <button id="button-delete" onClick={() => props.onDeleteRestaurant(props.restaurant.id)}>Delete</button>
-
-         </div>
+            <button>Details</button>
+            <button>Edit</button>
+            <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>
+        </div>
 
     );
 }
 
-export default RestaurantCard;
+export default RestaurantCard;

frontend/src/components/Wishlist.tsx

@@ -0,0 +1,20 @@
+import {Restaurant} from "./model/Restaurant.ts";
+import RestaurantCard from "./RestaurantCard.tsx";
+
+type WishlistProps = {
+    restaurants: Restaurant [];
+    onToggleWishlist: (id:string)=>void;
+
+}
+
+export default function Wishlist(props: Readonly<WishlistProps>){
+    return(
+        <div>
+            <h2>Wishlist</h2>
+
+            <h2>Restaurantfinder</h2>
+            {props.restaurants.map((r) => <RestaurantCard key={r.id} restaurant={r} onToggleWishlist={props.onToggleWishlist}/>)}
+
+        </div>
+    )
+}

frontend/src/components/model/WishlistStatus.ts

@@ -1,5 +1,5 @@
 
-export type WishlistStatus = " ON_WISHLIST" | "NOT_ON_WISHLIST" | "REMOVED_FROM_WISHLIST"
+export type WishlistStatus = "ON_WISHLIST" | "NOT_ON_WISHLIST" | "REMOVED_FROM_WISHLIST"
 
 
 

frontend/src/components/styles/RestaurantCard.css

@@ -2,6 +2,21 @@
 
 }
 
+#button-edit{
+
+}
+#button-wishlist{
+
+}
+
+.red {
+    color: red;
+}
+
+.black{
+    color: black;
+}
+
 .restaurantCard {
     width: 300px;
     border-radius: 10px;
@@ -36,7 +51,6 @@
 .restaurantCard button {
     padding: 12px 20px;
     background-color: #3498db;
-    color: white;
     border: none;
     border-radius: 25px;
     cursor: pointer;

frontend/src/main.tsx

@@ -5,9 +5,9 @@ import App from './App.tsx'
 import {BrowserRouter} from "react-router-dom";
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-      <BrowserRouter>
-    <App />
-      </BrowserRouter>
-  </StrictMode>,
-)
+    <StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </StrictMode>,
+)