UISAUTCOMP-130 Provide a prop to <AcqDateRangeFilter> to subscribe to search form resets. (#172)

* UISAUTCOMP-130 Provide a prop to `<AcqDateRangeFilter>` to subscribe to search form resets.

* UISAUTCOMP-130 fix eslint error

Author: BogdanDenis

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for stripes-authoriy-components
 
+## [5.0.1] (IN PROGRESS)
+
+- [UISAUTCOMP-130](https://issues.folio.org/browse/UISAUTCOMP-130) Provide a prop to `<AcqDateRangeFilter>` to subscribe to search form resets.
+
 ## [5.0.0] (https://github.com/folio-org/stripes-authority-components/tree/v5.0.0) (2024-10-30)
 
 - [UISAUTCOMP-117](https://issues.folio.org/browse/UISAUTCOMP-117) Provide deprecation notice to `useUserTenantPermissions.js`.

lib/FilterNavigation/FilterNavigation.js

@@ -1,4 +1,7 @@
-import { useContext } from 'react';
+import {
+  useCallback,
+  useContext,
+} from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -13,8 +16,14 @@ const FilterNavigation = () => {
   const {
     navigationSegmentValue,
     setNavigationSegmentValue,
+    unsubscribeFromReset,
   } = useContext(AuthoritiesSearchContext);
 
+  const handleSegmentClick = useCallback(name => {
+    setNavigationSegmentValue(name);
+    unsubscribeFromReset();
+  }, [unsubscribeFromReset, setNavigationSegmentValue]);
+
   return (
     <ButtonGroup
       fullWidth
@@ -29,7 +38,7 @@ const FilterNavigation = () => {
             role="tab"
             id={`segment-navigation-${name}`}
             data-testid={`segment-navigation-${name}`}
-            onClick={() => setNavigationSegmentValue(name)}
+            onClick={() => handleSegmentClick(name)}
           >
             <FormattedMessage id={`stripes-authority-components.label.${name}`} />
           </Button>

lib/FilterNavigation/FilterNavigation.test.js

@@ -12,11 +12,13 @@ import Harness from '../../test/jest/helpers/harness';
 const mockSetNavigationSegmentValue = jest.fn();
 const mockSetSearchDropdownValue = jest.fn();
 const mockSetSearchIndex = jest.fn();
+const mockUnsubscribeFromReset = jest.fn();
 
 const authoritiesCtxValue = {
   setNavigationSegmentValue: mockSetNavigationSegmentValue,
   setSearchDropdownValue: mockSetSearchDropdownValue,
   setSearchIndex: mockSetSearchIndex,
+  unsubscribeFromReset: mockUnsubscribeFromReset,
 };
 
 const renderFilterNavigation = () => render(

lib/SearchFilters/SearchFilters.js

@@ -42,6 +42,7 @@ const SearchFilters = ({
     filters,
     setFilters,
     navigationSegmentValue,
+    subscribeOnReset,
   } = useContext(AuthoritiesSearchContext);
 
   const [filterAccordions, { handleSectionToggle }] = useSectionToggle({
@@ -138,6 +139,7 @@ const SearchFilters = ({
           disabled={isLoading}
           closedByDefault
           dateFormat={DATE_FORMAT}
+          subscribeOnReset={subscribeOnReset}
         />
       }
       {isVisible(FILTERS.UPDATED_DATE) &&
@@ -150,6 +152,7 @@ const SearchFilters = ({
           disabled={isSearching}
           closedByDefault
           dateFormat={DATE_FORMAT}
+          subscribeOnReset={subscribeOnReset}
         />
       }
     </>

lib/context/AuthoritiesSearchContext.js

@@ -48,6 +48,23 @@ const AuthoritiesSearchContextProvider = ({
     [navigationSegments.search]: null,
     [navigationSegments.browse]: null,
   });
+  const subscribers = useRef([]);
+
+  const subscribeOnReset = useCallback(cb => {
+    const isSubscribed = subscribers.current.some(callback => callback === cb);
+
+    if (!isSubscribed) {
+      subscribers.current.push(cb);
+    }
+  }, []);
+
+  const unsubscribeFromReset = useCallback(() => {
+    subscribers.current = [];
+  }, []);
+
+  const publishOnReset = useCallback(() => {
+    subscribers.current.forEach(cb => cb());
+  }, []);
 
   const searchParams = readParamsFromUrl
     ? queryString.parse(location.search)
@@ -186,6 +203,7 @@ const AuthoritiesSearchContextProvider = ({
     setIsGoingToBaseURL(true);
     setAdvancedSearchDefaultSearch(null);
     paramsBySegment.current[navigationSegmentValue] = null;
+    publishOnReset();
   };
 
   const contextValue = {
@@ -218,6 +236,8 @@ const AuthoritiesSearchContextProvider = ({
     setIsGoingToBaseURL,
     advancedSearchDefaultSearch,
     setAdvancedSearchDefaultSearch,
+    subscribeOnReset,
+    unsubscribeFromReset,
   };
 
   return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-authority-components",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Component library for Stripes Authority modules",
   "repository": "https://github.com/folio-org/stripes-authority-components",
   "main": "index.js",