From d26df25dd50ab70c87fe2e7fdac3eeaa8f7a4194 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Fri, 14 Mar 2025 20:26:11 +0000
Subject: [PATCH] [frontend]: Add 'Favourite' button to TrainStationPopup

---
 frontend/src/App.jsx                          |  7 ++++++-
 frontend/src/components/TrainStationPopup.jsx | 21 ++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 11b4d3b..e7af31e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -275,7 +275,12 @@ function App() {
                         case "IrishRailStation":
                             objectTitle = item.trainStationDesc + " Train Station";
                             popupContent = (
-                                <TrainStationPopup item={item} objectTitle={objectTitle} />
+                                <TrainStationPopup
+                                    item={item}
+                                    objectTitle={objectTitle}
+                                    toggleFavourite={toggleFavourite}
+                                    favourites={favourites}
+                                />
                             );
 
                             markerText = item.trainStationCode + " " + item.trainStationDesc;
diff --git a/frontend/src/components/TrainStationPopup.jsx b/frontend/src/components/TrainStationPopup.jsx
index 67e11dc..2225ab8 100644
--- a/frontend/src/components/TrainStationPopup.jsx
+++ b/frontend/src/components/TrainStationPopup.jsx
@@ -1,7 +1,14 @@
 import React, { useState, useRef } from "react";
 import { useMap } from "react-leaflet";
 
-const TrainStationPopup = ({ item, objectTitle }) => {
+const TrainStationPopup = ({ item, objectTitle, toggleFavourite, favourites }) => {
+    const [isFavourite, setIsFavourite] = useState(favourites.IrishRailStation?.includes(item.trainStationCode));
+
+    const handleToggleFavourite = () => {
+        toggleFavourite("IrishRailStation", item.trainStationCode);
+        setIsFavourite((prev) => !prev);
+    };
+
     const [trainInfo, setTrainInfo] = useState("");
     const map = useMap(); // Access the Leaflet map instance
 
@@ -62,7 +69,15 @@ const TrainStationPopup = ({ item, objectTitle }) => {
 
     return (
         <div>
-            <h3>{objectTitle}</h3>
+            <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+                <h3>{objectTitle}</h3>
+                <button
+                    onClick={handleToggleFavourite}
+                    style={{background: "white", border: "none", fontSize: "20px", cursor: "pointer"}}
+                >
+                    {isFavourite ? "⭐" : "☆"}
+                </button>
+            </div>
             <ul>
                 <li><b>Train Station Name:</b> {item.trainStationDesc}</li>
                 <li><b>Train Station ID:</b> {item.trainStationID}</li>
@@ -83,7 +98,7 @@ const TrainStationPopup = ({ item, objectTitle }) => {
                 Load incoming trains
             </button>
             <div
-                dangerouslySetInnerHTML={{ __html: trainInfo }}
+                dangerouslySetInnerHTML={{__html: trainInfo}}
                 style={{
                     marginTop: "10px",
                     maxHeight: "200px",   // limit popup height