[frontend]: Add 'Favourite' button to LuasPopup

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useRef } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Cookies from "js-cookie";
 
 import Navbar from "./components/Navbar";
 import Statistics from "./components/Statistics.jsx";
@@ -22,7 +23,45 @@ const dataSources = [
     { id: "buses", name: "Buses", api: "transient", objectType: "Bus" },
 ];
 
+const defaultFavourites = {
+    IrishRailTrain: [],
+    Bus: [],
+    LuasStop: [],
+    BusStop: [],
+    IrishRailStation: []
+};
+
 function App() {
+    const [favourites, setFavourites] = useState(defaultFavourites);
+
+    useEffect(() => {
+        try {
+            const savedFavourites = Cookies.get("favourites");
+            if (savedFavourites) {
+                const parsedFavourites = JSON.parse(savedFavourites);
+                setFavourites({ ...defaultFavourites, ...parsedFavourites });
+            }
+        } catch (error) {
+            console.error("Error loading favourites from cookies:", error);
+            setFavourites(defaultFavourites);
+        }
+    }, []);
+
+    const toggleFavourite = (type, id) => {
+        setFavourites((prev) => {
+            const updatedFavourites = {
+                ...defaultFavourites,
+                ...prev,
+                [type]: prev[type]?.includes(id)
+                    ? prev[type].filter((fav) => fav !== id)
+                    : [...(prev[type] || []), id]
+            };
+
+            Cookies.set("favourites", JSON.stringify(updatedFavourites), { expires: 365 });
+            return updatedFavourites;
+        });
+    };
+
     const [selectedSources, setSelectedSources] = useState([]);
     const [markers, setMarkers] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -302,7 +341,13 @@ function App() {
                                     luasLine = "N/A";
                             }
                             popupContent = (
-                                <LuasPopup item={item} objectTitle={objectTitle} luasLine={luasLine} />
+                                <LuasPopup
+                                    item={item}
+                                    objectTitle={objectTitle}
+                                    luasLine={luasLine}
+                                    toggleFavourite={toggleFavourite}
+                                    favourites={favourites}
+                                />
                             );
 
                             markerText = item.luasStopIrishName + " " + item.luasStopName + " " + luasLine;
@@ -413,7 +458,11 @@ function App() {
                                 userLocationAvailable={userLocationAvailable}
                             />
                             <div style={{ flex: 1 }}>
-                                <MapComponent markers={filteredMarkers} clusteringEnabled={clusteringEnabled} userLocationAvailable={userLocationAvailable} />
+                                <MapComponent
+                                    markers={filteredMarkers}
+                                    clusteringEnabled={clusteringEnabled}
+                                    userLocationAvailable={userLocationAvailable}
+                                    />
                             </div>
                         </div>
                     }

frontend/src/components/LuasPopup.jsx

@@ -1,7 +1,14 @@
 import React, { useState } from "react";
 import { useMap } from "react-leaflet";
 
-const LuasPopup = ({ item, objectTitle, luasLine }) => {
+const LuasPopup = ({ item, objectTitle, luasLine, toggleFavourite, favourites }) => {
+    const [isFavourite, setIsFavourite] = useState(favourites.LuasStop?.includes(item.luasStopID));
+
+    const handleToggleFavourite = () => {
+        toggleFavourite("LuasStop", item.luasStopID);
+        setIsFavourite((prev) => !prev);
+    };
+
     const [luasInfo, setLuasInfo] = useState("");
     const map = useMap(); // Access the Leaflet map instance
 
@@ -53,7 +60,15 @@ const LuasPopup = ({ item, objectTitle, luasLine }) => {
 
     return (
         <div>
+            <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>Luas Stop Name:</b> {item.luasStopName} / {item.luasStopIrishName}</li>
                 <li><b>Line:</b> {luasLine}</li>
@@ -77,7 +92,7 @@ const LuasPopup = ({ item, objectTitle, luasLine }) => {
                 Load incoming trams
             </button>
             <div
-                dangerouslySetInnerHTML={{ __html: luasInfo }}
+                dangerouslySetInnerHTML={{__html: luasInfo}}
                 style={{
                     marginTop: "10px",
                     maxHeight: "200px",   // Limit popup height