add support to cache filter options

cypress/e2e/assets_spec/asset_homepage.cy.ts

@@ -27,6 +27,7 @@ describe("Asset Tab", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/assets");
   });
 
@@ -90,7 +91,7 @@ describe("Asset Tab", () => {
     assetPage.selectImportOption();
     assetPage.selectImportFacility("Dummy Facility 1");
     assetPage.importAssetFile();
-    assetPage.selectImportLocation("Camera Locations");
+    assetPage.selectImportLocation("Camera Loc");
     assetPage.clickImportAsset();
   });
 

cypress/e2e/assets_spec/assets_creation.cy.ts

@@ -19,6 +19,7 @@ describe("Asset", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/assets");
   });
 

cypress/e2e/assets_spec/assets_manage.cy.ts

@@ -29,6 +29,7 @@ describe("Asset", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/assets");
   });
 

cypress/e2e/death_report_spec/death_report.cy.ts

@@ -11,6 +11,7 @@ describe("Death Report", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/");
     cy.intercept("**/api/v1/patient/**").as("getPatients");
     cy.get("#facility-patients").contains("Patients").click({ force: true });

cypress/e2e/external_results_spec/external_result.cy.ts

@@ -16,6 +16,7 @@ describe("Edit Profile Testing", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/external_results");
   });
 

cypress/e2e/external_results_spec/filter.cy.ts

@@ -8,6 +8,7 @@ describe("External Results Filters", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/external_results");
     cy.contains("Filters").click();
   });

cypress/e2e/facility_spec/facility.cy.ts

@@ -16,6 +16,7 @@ describe("Facility Creation", () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/facility");
   });
 

cypress/e2e/facility_spec/inventory.cy.ts

@@ -13,6 +13,7 @@ describe("Inventory Management Section", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/");
     cy.viewport(1280, 720);
   });

cypress/e2e/facility_spec/locations.cy.ts

@@ -9,6 +9,7 @@ describe("Location Management Section", () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/");
     cy.intercept("GET", "**/api/v1/facility/**").as("getFacilities");
     cy.get("[id='facility-details']").first().click();

cypress/e2e/patient_spec/patient_crud.cy.ts

@@ -27,6 +27,7 @@ describe("Patient Creation with consultation", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/patients");
   });
 

cypress/e2e/patient_spec/patient_manage.cy.ts

@@ -15,6 +15,7 @@ describe("Patient", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/patients");
   });
 

cypress/e2e/resource_spec/filter.cy.ts

@@ -8,12 +8,13 @@ describe("Resource filter", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/resource");
-    cy.contains("Filters").click();
   });
 
   it("filter by origin facility", () => {
     cy.intercept(/\/api\/v1\/getallfacilities/).as("facilities_filter");
+    cy.contains("Filters").click();
     cy.get("[name='origin_facility']")
       .type("Dummy Facility 1")
       .wait("@facilities_filter");
@@ -23,6 +24,7 @@ describe("Resource filter", () => {
 
   it("filter by resource approval facility", () => {
     cy.intercept(/\/api\/v1\/getallfacilities/).as("facilities_filter");
+    cy.contains("Filters").click();
     cy.get("[name='approving_facility']")
       .type("Dummy Shifting Center")
       .wait("@facilities_filter");
@@ -32,6 +34,7 @@ describe("Resource filter", () => {
 
   it("filter by assigned facility", () => {
     cy.intercept(/\/api\/v1\/getallfacilities/).as("facilities_filter");
+    cy.contains("Filters").click();
     cy.get("[name='assigned_facility']").type("Dummy Shifting Center");
     cy.wait("@facilities_filter");
     cy.get("[role='option']").first().click();
@@ -45,26 +48,27 @@ describe("Resource filter", () => {
       "DESC Modified Date",
       "ASC Created Date",
     ].forEach((option) => {
+      cy.contains("Filters").click();
       cy.get("div [id='ordering'] > div > button").click();
       cy.get("li").contains(option).click();
       cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
       cy.contains("Apply").click().wait("@resource_filter");
-      cy.contains("Filters").click();
     });
   });
 
   it("filter by emergency case", () => {
     ["yes", "no"].forEach((option) => {
+      cy.contains("Filters").click();
       cy.get("div [id='emergency'] > div > button").click();
       cy.get("li").contains(option).click();
       cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
       cy.contains("Apply").click().wait("@resource_filter");
-      cy.contains("Filters").click();
     });
   });
 
   it("filter by created date", () => {
     cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
+    cy.contains("Filters").click();
     cy.get("input[name='created_date_start']").click();
     cy.get("#date-1").click();
     cy.get("#date-1").click();
@@ -74,6 +78,7 @@ describe("Resource filter", () => {
 
   it("filter by modified date", () => {
     cy.intercept(/\/api\/v1\/resource/).as("resource_filter");
+    cy.contains("Filters").click();
     cy.get("input[name='modified_date_start']").click();
     cy.get("#date-1").click();
     cy.get("#date-1").click();
@@ -82,8 +87,7 @@ describe("Resource filter", () => {
   });
 
   afterEach(() => {
-    cy.contains("Filters").click({ force: true });
-    cy.contains("Clear").click();
+    cy.clearAllFilters();
     cy.saveLocalStorage();
   });
 });

cypress/e2e/resource_spec/resources.cy.ts

@@ -17,6 +17,7 @@ describe("Resource Page", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/resource");
   });
 

cypress/e2e/sample_test_spec/filter.cy.ts

@@ -8,6 +8,7 @@ describe("Sample Filter", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/sample");
     cy.contains("Advanced Filters").click();
   });

cypress/e2e/sample_test_spec/sample_test.cy.ts

@@ -8,6 +8,7 @@ describe("Sample List", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/sample");
   });
 

cypress/e2e/shifting_spec/filter.cy.ts

@@ -11,6 +11,7 @@ describe("Shifting section filter", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/shifting");
     shiftingPage.advancedFilterButton().click();
   });

cypress/e2e/shifting_spec/shifting.cy.ts

@@ -8,6 +8,7 @@ describe("Shifting Page", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/shifting");
   });
 

cypress/e2e/users_spec/user_creation.cy.ts

@@ -63,6 +63,7 @@ describe("User Creation", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/users");
   });
 

cypress/e2e/users_spec/user_homepage.cy.ts

@@ -19,6 +19,7 @@ describe("User Homepage", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/users");
   });
 

cypress/e2e/users_spec/user_manage.cy.ts

@@ -27,6 +27,9 @@ describe("Manage User", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    console.log(localStorage);
+    cy.clearLocalStorage(/filters--.+/);
+    console.log(localStorage);
     cy.awaitUrl("/users");
   });
 

cypress/pageobject/Asset/AssetCreation.ts

@@ -239,7 +239,7 @@ export class AssetPage {
   }
 
   selectjsonexportbutton() {
-    cy.intercept("GET", "**/api/v1/asset/?json=true**").as("getJsonexport");
+    cy.intercept("GET", "**/api/v1/asset/?**json=true**").as("getJsonexport");
     cy.get("#export-json-option").click();
     cy.wait("@getJsonexport").then(({ request, response }) => {
       expect(response.statusCode).to.eq(200);
@@ -248,7 +248,7 @@ export class AssetPage {
   }
 
   selectcsvexportbutton() {
-    cy.intercept("GET", "**/api/v1/asset/?csv=true**").as("getCsvexport");
+    cy.intercept("GET", "**/api/v1/asset/?**csv=true**").as("getCsvexport");
     cy.get("#export-csv-option").click();
     cy.wait("@getCsvexport").then(({ request, response }) => {
       expect(response.statusCode).to.eq(200);

cypress/pageobject/Asset/AssetFilters.ts

@@ -40,7 +40,20 @@ export class AssetFilters {
     cy.intercept("GET", "**/api/v1/asset/**").as("clearAssets");
     cy.get("#clear-filter").click();
     cy.wait("@clearAssets").its("response.statusCode").should("eq", 200);
-    cy.url().should("match", /\/assets$/);
+    cy.location("pathname").should("match", /\/assets$/);
+    cy.url().then((url) => {
+      const queryParams = new URL(url).searchParams;
+      let allEmpty = true;
+      const blacklistedKeys = ["page", "limit", "offset"];
+
+      queryParams.forEach((value, key) => {
+        if (value !== "" && !blacklistedKeys.includes(key)) {
+          allEmpty = false;
+        }
+      });
+
+      expect(allEmpty).to.be.true;
+    });
   }
   clickadvancefilter() {
     cy.intercept("GET", "**/api/v1/getallfacilities/**").as("advancefilter");

cypress/support/commands.ts

@@ -109,3 +109,7 @@ Cypress.Commands.add("getAttached", (selector) => {
     })
     .then(() => cy.wrap($el));
 });
+
+Cypress.Commands.add("clearAllFilters", () => {
+  return cy.get("#clear-all-filters").click();
+});

cypress/support/index.ts

@@ -12,6 +12,8 @@ declare global {
         url: string,
         disableLoginVerification?: boolean
       ): Chainable<Subject>;
+      getAttached(selector: string): Chainable<Subject>;
+      clearAllFilters(): Chainable<Subject>;
     }
   }
 }

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "../node_modules",
     "target": "es5",
-    "lib": ["es5", "dom"],
+    "lib": ["es5", "dom", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020"],
     "types": ["cypress"],
     "typeRoots": ["./support"],
     "resolveJsonModule": true

src/Common/hooks/useFilters.tsx

@@ -1,5 +1,5 @@
 import { useQueryParams } from "raviger";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import GenericFilterBadge from "../../CAREUI/display/FilterBadge";
 import PaginationComponent from "../../Components/Common/Pagination";
@@ -37,6 +37,25 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
   const removeFilters = (keys: string[]) =>
     updateQuery(keys.reduce((acc, key) => ({ ...acc, [key]: "" }), qParams));
 
+  useEffect(() => {
+    const localFilters = JSON.parse(
+      localStorage.getItem("filters--" + window.location.pathname) || "{}"
+    );
+    const blacklistLocalFilters = ["page", "limit", "offset"];
+    const newFilters = { ...localFilters, ...qParams };
+    const filteredNewFilters = blacklistLocalFilters.reduce(
+      (acc, key) => ({ ...acc, [key]: undefined }),
+      newFilters
+    );
+
+    localStorage.setItem(
+      "filters--" + window.location.pathname,
+      JSON.stringify(filteredNewFilters)
+    );
+
+    updateQuery(newFilters);
+  }, [qParams]);
+
   const FilterBadge = ({ name, value, paramKey }: FilterBadgeProps) => {
     if (Array.isArray(paramKey))
       return (
@@ -131,11 +150,36 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
   }) => {
     const compiledBadges = badges(badgeUtils);
     const { t } = useTranslation();
+
+    const activeFilters = compiledBadges.reduce((acc, badge) => {
+      const { paramKey } = badge;
+
+      if (Array.isArray(paramKey)) {
+        const active = paramKey.filter((key) => qParams[key]);
+        if (active) acc.concat(active);
+      } else {
+        if (qParams[paramKey]) acc.push(paramKey);
+      }
+
+      return acc;
+    }, [] as string[]);
+
     return (
       <div className="col-span-3 my-2 flex w-full flex-wrap items-center gap-2">
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />
         ))}
+        {activeFilters.length >= 1 && (
+          <button
+            id="clear-all-filters"
+            className="rounded-full border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 hover:text-gray-800"
+            onClick={() => {
+              removeFilters(activeFilters);
+            }}
+          >
+            {t("clear_all_filters")}
+          </button>
+        )}
         {children}
       </div>
     );
@@ -201,6 +245,7 @@ export default function useFilters({ limit = 14 }: { limit?: number }) {
       show: showFilters,
       setShow: setShowFilters,
       filter: qParams,
+      removeFilters,
       onChange: (filter: FilterState) => {
         updateQuery(filter);
         setShowFilters(false);