fix: fix clear filters functionality

lebanon-relief-project · Dec 4, 2024 · 1fff8b0 · 1fff8b0
1 parent 24f153e
commit 1fff8b0
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 237 deletions.
diff --git a/web-app/package-lock.json b/web-app/package-lock.json
diff --git a/web-app/package.json b/web-app/package.json
@@ -12,6 +12,7 @@
     "antd": "^4.6.6",
     "axios": "^0.21.2",
     "jest-styled-components": "^7.1.1",
+    "lodash": "^4.17.21",
     "msw": "^0.24.1",
     "platform": "^1.3.6",
     "react": "^16.13.1",

diff --git a/web-app/src/pages/directory/components/MobileFilters.js b/web-app/src/pages/directory/components/MobileFilters.js
diff --git a/web-app/src/pages/directory/components/Sidebar.js b/web-app/src/pages/directory/components/Sidebar.js
@@ -11,17 +11,28 @@ import { useEffect } from "react";
 
 import { useMediaQuery } from "react-responsive";
 import { ReactComponent as CloseButton } from "../../../assets/images/CloseButtonBlue.svg";
+import cloneDeep from "lodash/cloneDeep";
 
 const Sidebar = ({ onFilterChange, locations, resultsCount }) => {
-  const [collapsibles, setCollapsibles] = useState(collapsiblesInitial);
+  const [collapsibles, setCollapsibles] = useState(
+    cloneDeep(collapsiblesInitial)
+  );
   const [isOpened, setIsOpened] = useState(false);
 
   const isTabletOrMobile = useMediaQuery({ maxWidth: 768 });
 
   useEffect(() => {
+    console.log("collapsibles", collapsibles);
     if (onFilterChange) onFilterChange(collapsibles);
   }, [collapsibles]);
 
+  const resetFilters = (evt) => {
+    console.log("resetting filters");
+    evt.preventDefault();
+    console.log(collapsiblesInitial);
+    setCollapsibles(cloneDeep(collapsiblesInitial));
+  };
+
   // Add this effect to handle body scroll
   useEffect(() => {
     if (!isTabletOrMobile) return;
@@ -184,6 +195,7 @@ const Sidebar = ({ onFilterChange, locations, resultsCount }) => {
                 fontSize: 16,
                 color: "#002766",
               }}
+              onClick={resetFilters}
             >
               Clear filters
             </div>
@@ -357,6 +369,7 @@ const StyledSideBar = styled.div`
     left: ${(props) => (props.isOpened ? "0" : "-200%")};
     transition: left 0.75s ease-in-out;
     overflow: scroll;
+    width: 100%;
   }
 `;
 

diff --git a/web-app/src/pages/directory/components/__snapshots__/Sidebar.spec.js.snap b/web-app/src/pages/directory/components/__snapshots__/Sidebar.spec.js.snap
@@ -987,6 +987,7 @@ exports[`the Sidebar component should match the snapshot 1`] = `
     -webkit-transition: left 0.75s ease-in-out;
     transition: left 0.75s ease-in-out;
     overflow: scroll;
+    width: 100%;
   }
 }