UIIN-1977: Reset search fields for each facet when Reset all button i…

…s clicked (#1654)

* UIIN-1977: Reset search fields for each facet when Reset all button is clicked

package.json

@@ -866,7 +866,8 @@
     "react-final-form-listeners": "^1.0.2",
     "react-hot-loader": "^4.3.12",
     "react-router-prop-types": "^1.0.4",
-    "redux-form": "^8.3.7"
+    "redux-form": "^8.3.7",
+    "zustand": "^3.7.2"
   },
   "peerDependencies": {
     "@folio/stripes": "^7.0.0",

src/common/hooks/useFacets.js

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import _ from 'lodash';
 
+import { useFacetSettings } from '../../stores/facetsStore';
+
 const useFacets = (
   segmentAccordions,
   segmentOptions,
@@ -21,7 +23,7 @@ const useFacets = (
   const [accordions, setAccordions] = useState(segmentAccordions);
   const [accordionsData, setAccordionsData] = useState({});
   const [facetsOptions, setFacetsOptions] = useState(segmentOptions);
-  const [facetSettings, setFacetSettings] = useState({});
+  const [facetSettings, setFacetSettings] = useFacetSettings();
   const [facetNameToOpen, setFacetNameToOpen] = useState('');
   const [showLoadingForAllFacets, setShowLoadingForAllFacets] = useState(false);
 
@@ -43,14 +45,7 @@ const useFacets = (
       name,
       value,
     } = filter;
-
-    setFacetSettings(prevFacetSettings => ({
-      ...prevFacetSettings,
-      [name]: {
-        ...prevFacetSettings[name],
-        value,
-      },
-    }));
+    setFacetSettings(name, { value });
   }, []);
 
   const processFilterChange = (selectedFilters, facetName) => {
@@ -86,13 +81,7 @@ const useFacets = (
   const processOnMoreClicking = useCallback((onMoreClickedFacet) => {
     onFetchFacets({ onMoreClickedFacet });
 
-    setFacetSettings(prevFacetSettings => ({
-      ...prevFacetSettings,
-      [onMoreClickedFacet]: {
-        ...prevFacetSettings[onMoreClickedFacet],
-        isOnMoreClicked: true,
-      },
-    }));
+    setFacetSettings(onMoreClickedFacet, { isOnMoreClicked: true });
   }, [onFetchFacets]);
 
   const processAllFacets = useCallback(() => {

src/components/CheckboxFacet/CheckboxFacetList.js

@@ -10,6 +10,8 @@ import {
   Icon,
 } from '@folio/stripes-components';
 
+import { useSearchValue } from '../../stores/facetsStore';
+
 import css from './CheckboxFacetList.css';
 
 function CheckboxFacetList({
@@ -27,6 +29,7 @@ function CheckboxFacetList({
   const handleTextFieldFocus = () => {
     onFetch({ focusedFacet: fieldName });
   };
+  const searchValue = useSearchValue(fieldName);
 
   return (
     <div className={css.facetSearchContainer}>
@@ -37,6 +40,7 @@ function CheckboxFacetList({
             type="search"
             onChange={(e) => onSearch(e.target.value)}
             onFocus={handleTextFieldFocus}
+            value={searchValue}
           />
         </div>
       )}

src/components/InstancesList/InstancesList.js

@@ -70,6 +70,7 @@ import {
   getItem,
   setItem,
 } from '../../storage';
+import facetsStore from '../../stores/facetsStore';
 
 import css from './instances.css';
 import {
@@ -284,6 +285,7 @@ class InstancesList extends React.Component {
         optionSelected: ''
       });
     }
+    facetsStore.getState().resetFacetSettings();
     document.getElementById('input-inventory-search').focus();
   }
 
@@ -673,6 +675,8 @@ class InstancesList extends React.Component {
       selectedRows: {},
       optionSelected: ''
     });
+
+    facetsStore.getState().resetFacetSettings();
   }
 
   handleSelectedRecordsModalSave = selectedRecords => {

src/stores/facetsStore.js

@@ -0,0 +1,32 @@
+import create from 'zustand';
+
+// Facets store contains a global state related
+// to facets.
+// Currently it only holds facetSettings which
+// represents a state (searchValue and isOnMoreClicked)
+// for each facet.
+const facetsStore = create((set) => ({
+  facetSettings: {},
+  setFacetSettings: (name, value) => {
+    set(state => {
+      state.facetSettings = {
+        ...state.facetSettings,
+        [name]: {
+          ...state.facetSettings[name],
+          ...value,
+        },
+      };
+    });
+  },
+  resetFacetSettings: () => set({ facetSettings: {} }),
+}));
+
+// hooks
+export const useFacetSettings = () => facetsStore(store => [
+  store.facetSettings,
+  store.setFacetSettings,
+]);
+export const useResetFacetSettings = () => facetsStore(store => store.resetFacetSettings);
+export const useSearchValue = name => facetsStore(store => store.facetSettings?.[name]?.value);
+
+export default facetsStore;

src/stores/facetsStore.test.js

@@ -0,0 +1,36 @@
+import facetsStore from './facetsStore';
+
+const getFacetSettings = () => facetsStore.getState().facetSettings;
+
+describe('facetsStore', () => {
+  beforeEach(() => {
+    const { resetFacetSettings } = facetsStore.getState();
+    resetFacetSettings();
+  });
+
+  describe('setFacetSettings', () => {
+    test('setting value', () => {
+      const { setFacetSettings } = facetsStore.getState();
+      setFacetSettings('test', { value: 2 });
+      expect(getFacetSettings()).toEqual({ test: { value: 2 } });
+    });
+
+    test('setting value with pre existing values', () => {
+      const { setFacetSettings } = facetsStore.getState();
+      setFacetSettings('test1', { value: 1 });
+      setFacetSettings('test2', { value: 2 });
+
+      expect(getFacetSettings()).toEqual({ test1: { value: 1 }, test2: { value: 2 } });
+    });
+  });
+
+  describe('resetFacetSettings', () => {
+    test('resetting values', () => {
+      const { setFacetSettings, resetFacetSettings } = facetsStore.getState();
+      setFacetSettings('test1', { value: 1 });
+      resetFacetSettings();
+
+      expect(getFacetSettings()).toEqual({});
+    });
+  });
+});