From 69230edcbb2bd0e5c887adeec554bb0b52e6f562 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Sun, 6 Apr 2025 03:08:49 +0100
Subject: [PATCH] [frontend]: Add reset filters button

---
 frontend/src/components/Sidebar.jsx | 121 ++++++++++++++++++++--------
 1 file changed, 86 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 7531f72..50df1dd 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -171,6 +171,20 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
         fetchData(enabledSources, numberInputValue);  // Use enabledSources for data fetching
     };
 
+    const resetFilters = () => {
+        const savedSources = Cookies.get("selectedSources");
+        const savedNumberInputValue = Cookies.get("numberInputValue");
+
+        if (savedSources) {
+            setSelectedSources(JSON.parse(savedSources));
+        } else {
+            setSelectedSources(customDefaultChecked);
+        }
+
+        setNumberInputValue(savedNumberInputValue || "");
+    };
+
+
     return (
         <div style={{
             position: "absolute", top: "6vh", right: "1vh",
@@ -206,43 +220,80 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
                         <label htmlFor={"showFavouritesOnly"}>Show Favourites Only</label>
                     </div>
 
-                        <div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "4px"}}>
-                            <input
-                                type="checkbox"
-                                id="toggleClustering"
-                                checked={clusteringEnabled}
-                                onChange={() => setClusteringEnabled(!clusteringEnabled)}
-                            />
-                            <label htmlFor="toggleClustering">Cluster overlapping icons</label>
-                        </div>
-                        {userLocationAvailable && (
-                            <div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "8px"}}>
-                                <label htmlFor="numberInput" style={{maxWidth: "40%"}}>Within KM:</label>
-                                <input
-                                    type="number"
-                                    id="numberInput"
-                                    value={numberInputValue}
-                                    onChange={(e) => setNumberInputValue(e.target.value)}
-                                    style={{maxWidth: "40%"}}
-                                />
-                            </div>
-                        )}
-                        <button onClick={handleSubmit} style={{marginTop: "10px", color: "white"}}>Submit</button>
+                    <div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "4px"}}>
+                        <input
+                            type="checkbox"
+                            id="toggleClustering"
+                            checked={clusteringEnabled}
+                            onChange={() => setClusteringEnabled(!clusteringEnabled)}
+                        />
+                        <label htmlFor="toggleClustering">Cluster overlapping icons</label>
                     </div>
+                    {userLocationAvailable && (
+                        <div style={{marginTop: "10px", display: "flex", alignItems: "center", gap: "8px"}}>
+                            <label htmlFor="numberInput" style={{maxWidth: "40%"}}>Within KM:</label>
+                            <input
+                                type="number"
+                                id="numberInput"
+                                value={numberInputValue}
+                                onChange={(e) => setNumberInputValue(e.target.value)}
+                                style={{maxWidth: "40%"}}
+                            />
+                        </div>
                     )}
+                    <div style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        gap: "10px",
+                        marginTop: "10px",
+                        width: "100%"
+                    }}>
+                        <button
+                            onClick={handleSubmit}
+                            style={{
+                                flex: 1,
+                                color: "white",
+                                backgroundColor: "#4CAF50",
+                                padding: "6px 12px",
+                                borderRadius: "5px",
+                                border: "none",
+                                cursor: "pointer"
+                            }}
+                        >
+                            Submit
+                        </button>
+                        <button
+                            onClick={resetFilters}
+                            style={{
+                                flex: 1,
+                                color: "white",
+                                backgroundColor: "#f44336",
+                                padding: "6px 12px",
+                                borderRadius: "5px",
+                                border: "none",
+                                cursor: "pointer"
+                            }}
+                        >
+                            Reset
+                        </button>
+                    </div>
+
                 </div>
-            );
-            };
+            )}
+        </div>
+    );
+};
 
-            Sidebar.propTypes = {
-            selectedSources: PropTypes.array.isRequired,
-            setSelectedSources: PropTypes.func.isRequired,
-            clusteringEnabled: PropTypes.bool.isRequired,
-            setClusteringEnabled: PropTypes.func.isRequired,
-            fetchData: PropTypes.func.isRequired,
-            userLocationAvailable: PropTypes.bool.isRequired,
-            showFavouritesOnly: PropTypes.bool.isRequired,
-            setShowFavouritesOnly: PropTypes.func.isRequired,
-        };
+Sidebar.propTypes = {
+    selectedSources: PropTypes.array.isRequired,
+    setSelectedSources: PropTypes.func.isRequired,
+    clusteringEnabled: PropTypes.bool.isRequired,
+    setClusteringEnabled: PropTypes.func.isRequired,
+    fetchData: PropTypes.func.isRequired,
+    userLocationAvailable: PropTypes.bool.isRequired,
+    showFavouritesOnly: PropTypes.bool.isRequired,
+    setShowFavouritesOnly: PropTypes.func.isRequired,
+};
 
-            export default Sidebar
+export default Sidebar