[frontend]: Refactor into separate components

frontend/src/App.jsx

@@ -1,47 +1,14 @@
 import React, { useState } from "react";
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import Sidebar from "./components/Sidebar";
-import "leaflet/dist/leaflet.css";
+import MapComponent from "./components/MapComponent";
-import MarkerClusterGroup from "react-leaflet-markercluster";
+import LoadingOverlay from "./components/LoadingOverlay";
-import L, { Icon } from "leaflet";
-
-import "leaflet.markercluster/dist/MarkerCluster.css";
-import "leaflet.markercluster/dist/MarkerCluster.Default.css";
-
-// Icons
-import trainStationIconURL from "../src/assets/icons/train-station.png";
-import trainIconURL from "../src/assets/icons/train.png";
-
-// Fix marker icon issue with Leaflet
-delete L.Icon.Default.prototype._getIconUrl;
-L.Icon.Default.mergeOptions({
-    iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
-    iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
-    shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
-});
-
-const icons = new Map();
-icons.set(
-    "IrishRailStation",
-    new Icon({
-        iconUrl: trainStationIconURL,
-        iconSize: [24, 24],
-    })
-);
-
-icons.set(
-    "IrishRailTrain",
-    new Icon({
-        iconUrl: trainIconURL,
-        iconSize: [24, 24],
-    })
-);
 
 const TRANSIENT_DATA_API = "https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data";
 const PERMANENT_DATA_API = "https://a6y312dpuj.execute-api.us-east-1.amazonaws.com/permanent_data";
 
 const dataSources = [
-    { id: "IrishRailTrains", name: "Irish Rail Trains", url: TRANSIENT_DATA_API + "?objectType=IrishRailTrain" },
+    { id: "IrishRailTrains", name: "Irish Rail Trains", url: `${TRANSIENT_DATA_API}?objectType=IrishRailTrain` },
-    { id: "IrishRailStations", name: "Irish Rail Stations", url: PERMANENT_DATA_API + "?objectType=IrishRailStation" },
+    { id: "IrishRailStations", name: "Irish Rail Stations", url: `${PERMANENT_DATA_API}?objectType=IrishRailStation` },
 ];
 
 function App() {
@@ -50,95 +17,37 @@ function App() {
     const [loading, setLoading] = useState(false);
     const [clusteringEnabled, setClusteringEnabled] = useState(true);
 
-    const handleCheckboxChange = (id) => {
-        setSelectedSources((prev) =>
-            prev.includes(id) ? prev.filter((source) => source !== id) : [...prev, id]
-        );
-    };
-
     const fetchData = async () => {
         setLoading(true);
-        const newMarkers = [];
+        try {
-        for (const source of dataSources) {
+            const newMarkers = (await Promise.all(
-            if (selectedSources.includes(source.id)) {
+                dataSources
-                try {
+                    .filter(({ id }) => selectedSources.includes(id))
-                    const response = await fetch(source.url);
+                    .map(({ url }) => fetch(url).then((res) => res.json()))
-                    const data = await response.json();
+            )).flat().map(({ latitude, longitude, objectType }) => ({
-                    data.forEach((item) => {
+                coords: [latitude, longitude],
-                        newMarkers.push({
+                popup: objectType,
-                            coords: [item.latitude, item.longitude],
+                icon: objectType,
-                            popup: item.objectType,
+            }));
-                            icon: item.objectType,
+            setMarkers(newMarkers);
-                        });
+        } catch (error) {
-                    });
+            console.error("Error fetching data:", error);
-                } catch (error) {
-                    console.error(`Error fetching data from ${source.name}:`, error);
-                }
-            }
         }
-        setMarkers(newMarkers);
         setLoading(false);
     };
 
     return (
         <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative" }}>
-            {loading && (
+            {loading && <LoadingOverlay />}
-                <div style={{
+            <Sidebar
-                    position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
+                selectedSources={selectedSources}
-                    background: "rgba(0, 0, 0, 0.5)", display: "flex",
+                setSelectedSources={setSelectedSources}
-                    alignItems: "center", justifyContent: "center",
+                clusteringEnabled={clusteringEnabled}
-                    color: "white", fontSize: "20px", fontWeight: "bold",
+                setClusteringEnabled={setClusteringEnabled}
-                    zIndex: 1000
+                fetchData={fetchData}
-                }}>
+            />
-                    Loading data...
-                </div>
-            )}
-            <div style={{ width: "250px", padding: "10px", background: "#000000", color: "white" }}>
-                <h3>Select Data Sources</h3>
-                {dataSources.map((source) => (
-                    <div key={source.id}>
-                        <input
-                            type="checkbox"
-                            id={source.id}
-                            checked={selectedSources.includes(source.id)}
-                            onChange={() => handleCheckboxChange(source.id)}
-                        />
-                        <label htmlFor={source.id}>{source.name}</label>
-                    </div>
-                ))}
-                <div style={{ marginTop: "10px" }}>
-                    <input
-                        type="checkbox"
-                        id="toggleClustering"
-                        checked={clusteringEnabled}
-                        onChange={() => setClusteringEnabled(!clusteringEnabled)}
-                    />
-                    <label htmlFor="toggleClustering">Cluster overlapping icons</label>
-                </div>
-                <button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
-            </div>
             <div style={{ flex: 1 }}>
-                <MapContainer center={[53.4494762, -7.5029786]} zoom={7} minZoom={4} style={{ height: "100%", width: "100%" }}>
+                <MapComponent markers={markers} clusteringEnabled={clusteringEnabled} />
-                    <TileLayer
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                    />
-                    {clusteringEnabled ? (
-                        <MarkerClusterGroup>
-                            {markers.map((marker, index) => (
-                                <Marker key={index} position={marker.coords} icon={icons.get(marker.icon)}>
-                                    <Popup>{marker.popup}</Popup>
-                                </Marker>
-                            ))}
-                        </MarkerClusterGroup>
-                    ) : (
-                        markers.map((marker, index) => (
-                            <Marker key={index} position={marker.coords} icon={icons.get(marker.icon)}>
-                                <Popup>{marker.popup}</Popup>
-                            </Marker>
-                        ))
-                    )}
-                </MapContainer>
             </div>
         </div>
     );

frontend/src/components/LoadingOverlay.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const LoadingOverlay = () => (
+    <div style={{
+        position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
+        background: "rgba(0, 0, 0, 0.5)", display: "flex",
+        alignItems: "center", justifyContent: "center",
+        color: "white", fontSize: "20px", fontWeight: "bold",
+        zIndex: 1000
+    }}>
+        Loading data...
+    </div>
+);
+
+export default LoadingOverlay;

frontend/src/components/MapComponent.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import MarkerClusterGroup from "react-leaflet-markercluster";
+import L, { Icon } from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+import trainStationIconURL from "../assets/icons/train-station.png";
+import trainIconURL from "../assets/icons/train.png";
+
+// Fix Leaflet marker icon issue
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
+    iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
+    shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+});
+
+const icons = new Map([
+    ["IrishRailStation", new Icon({ iconUrl: trainStationIconURL, iconSize: [24, 24] })],
+    ["IrishRailTrain", new Icon({ iconUrl: trainIconURL, iconSize: [24, 24] })],
+]);
+
+const MapComponent = ({ markers, clusteringEnabled }) => {
+    return (
+        <MapContainer center={[53.4494762, -7.5029786]} zoom={7} minZoom={4} style={{ height: "100%", width: "100%" }}>
+            <TileLayer
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            />
+            {clusteringEnabled ? (
+                <MarkerClusterGroup>
+                    {markers.map(({ coords, popup, icon }, index) => (
+                        <Marker key={index} position={coords} icon={icons.get(icon)}>
+                            <Popup>{popup}</Popup>
+                        </Marker>
+                    ))}
+                </MarkerClusterGroup>
+            ) : (
+                markers.map(({ coords, popup, icon }, index) => (
+                    <Marker key={index} position={coords} icon={icons.get(icon)}>
+                        <Popup>{popup}</Popup>
+                    </Marker>
+                ))
+            )}
+        </MapContainer>
+    );
+};
+
+export default MapComponent;

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const dataSources = [
+        { id: "IrishRailTrains", name: "Irish Rail Trains" },
+        { id: "IrishRailStations", name: "Irish Rail Stations" },
+    ];
+
+    return (
+        <div style={{
+            position: "absolute", top: "10px", right: "10px",
+            width: "250px", minWidth: "50px",
+            padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
+            borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",
+            height: isOpen ? "auto" : "40px", display: "flex", flexDirection: "column",
+            alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center"
+        }}>
+            <button onClick={() => setIsOpen(!isOpen)} style={{
+                background: "none", border: "none", color: "black",
+                fontSize: "16px", cursor: "pointer", display: "flex",
+                alignItems: "center", width: "100%", justifyContent: "center",
+                padding: "8px 10px", fontWeight: "bold"
+            }}>
+                {isOpen ? "▼ Filters" : "▶ Filters"}
+            </button>
+            {isOpen && (
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", width: "100%" }}>
+                    <h3>Select Data Sources</h3>
+                    {dataSources.map(({ id, name }) => (
+                        <div key={id} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                            <input
+                                type="checkbox"
+                                id={id}
+                                checked={selectedSources.includes(id)}
+                                onChange={() =>
+                                    setSelectedSources((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id])
+                                }
+                            />
+                            <label htmlFor={id}>{name}</label>
+                        </div>
+                    ))}
+                    <div style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
+                        <input
+                            type="checkbox"
+                            id="toggleClustering"
+                            checked={clusteringEnabled}
+                            onChange={() => setClusteringEnabled(!clusteringEnabled)}
+                        />
+                        <label htmlFor="toggleClustering">Cluster overlapping icons</label>
+                    </div>
+                    <button onClick={fetchData} style={{ marginTop: "10px" }}>Submit</button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Sidebar;