Merge pull request #5360 from fedspendingtransparency/fix/dev-14944

Fix/dev 14944: Advanced Search - Active filter is not removed for Custom dates

Author: anjenkin

src/js/components/search/SearchSidebarSubmit.jsx

@@ -21,6 +21,7 @@ const propTypes = {
     setShowMobileFilters: PropTypes.func
 };
 
+
 const SearchSidebarSubmit = ({
     stagedFiltersAreEmpty,
     requestsComplete,
@@ -33,11 +34,11 @@ const SearchSidebarSubmit = ({
     let title = 'Click to submit your search.';
     const { hash: urlHash } = getObjFromQueryParams(useLocation().search);
 
-    if (stagedFiltersAreEmpty) {
+    if (stagedFiltersAreEmpty || !filtersChanged) {
         title = 'Add or update a filter to submit.';
         disabled = true;
     }
-    else if (!requestsComplete || !filtersChanged) {
+    else if (!requestsComplete ) {
         title = 'Add or update a filter to submit.';
         disabled = true;
     }

src/js/components/search/filters/timePeriod/DateRange.jsx

@@ -225,14 +225,7 @@ const DateRange = (props) => {
                 }
             });
 
-            if (timePeriodApplied.size > 0 && !matchFound) {
-                props.updateFilter({
-                    dateType: 'dr',
-                    startDate: startValue,
-                    endDate: endValue
-                });
-            }
-            else if (!matchFound && !matchFoundApplied) {
+            if (!matchFound && (timePeriodApplied?.size > 0 || !matchFoundApplied)) {
                 props.updateFilter({
                     dateType: 'dr',
                     startDate: startValue,

src/js/components/search/filters/timePeriod/TimePeriod.jsx

@@ -3,7 +3,7 @@
  * Created by Emily Gullo 11/03/2016
  **/
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Set } from 'immutable';
 
@@ -129,7 +129,7 @@ const TimePeriod = ({
         }
     };
 
-    const handleDateChange = (date, dateType) => {
+    const handleDateChange = useCallback((date, dateType) => {
         // the component will hold values of the start/end dates for use by the UI only
         // this is because the start/end range will be incomplete during the time the user has only
         // picked one date, or if they have picked an invalid range
@@ -153,42 +153,37 @@ const TimePeriod = ({
                 break;
             // no default
         }
-    };
-
-    const removeDateRange = (newValue) => {
-        updateGenericFilter({
-            type: 'timePeriodType',
-            value: 'dr'
-        });
+    }, []);
 
+    const removeDateRange = useCallback((newValue) => {
         setDateRangeChipRemoved(true);
         setStartDateUI(null);
         setEndDateUI(null);
         setStartDateDropdown(null);
         setEndDateDropdown(null);
 
-        if (activeTab === 'dr') {
-            updateGenericFilter({
-                type: 'timePeriodType',
-                value: 'dr'
-            });
-            updateGenericFilter({
-                type: 'time_period',
-                value: newValue
-            });
-        }
-    };
+        const newDRValue = newValue?.size ? newValue : new Set();
+
+        updateGenericFilter({
+            type: 'time_period',
+            value: newDRValue
+        });
+        updateGenericFilter({
+            type: 'timePeriodType',
+            value: activeTab
+        });
+    }, [activeTab, updateGenericFilter]);
 
-    const showErrorFunc = (error, message) => {
+    const showErrorFunc = useCallback((error, message) => {
         setShowError(true);
         setHeader(error);
         setErrorMessage(message);
-    };
+    }, []);
 
-    const hideError = () => {
+    const hideError = useCallback(() => {
         setShowError(false);
         setHeader('');
-    };
+    }, []);
 
     let errorDetails;
     let showFilter;

src/js/components/search/topFilterBar/filterGroups/TimePeriodDRFilterGroup.jsx

@@ -6,6 +6,7 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from "react-redux";
 import PropTypes from "prop-types";
+import { Set } from 'immutable';
 
 import { updateGenericFilter } from "redux/actions/search/searchFilterActions";
 import { dateRangeChipLabel } from "helpers/searchHelper";
@@ -33,14 +34,15 @@ const TimePeriodDRFilterGroup = ({ name, resultsView }) => {
 
         if (!staged) newValue = newValue.add({ end_date: endDate, start_date: startDate });
 
-        dispatch(updateGenericFilter({
-            type: 'timePeriodType',
-            value: 'dr'
-        }));
+        const newDRValue = newValue?.size >= 1 ? newValue : new Set();
         dispatch(updateGenericFilter({
             type: 'time_period',
-            value: newValue
+            value: newDRValue
         }));
+        dispatch(updateGenericFilter({
+            type: 'timePeriodType',
+            value: 'dr'
+        })); 
     };
 
     const filters = {

src/js/components/search/topFilterBar/filterGroups/TimePeriodFYFilterGroup.jsx

@@ -6,6 +6,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from "react-redux";
+import { Set } from 'immutable';
 
 import { updateTimePeriod } from "redux/actions/search/searchFilterActions";
 import BaseTopFilterGroup from '../BaseTopFilterGroup';
@@ -23,8 +24,9 @@ const TimePeriodFYFilterGroup = ({ name, resultsView }) => {
             timePeriodFY.delete(value) :
             timePeriodFY.add(value);
 
+        const newStateValue = newValue?.size ? newValue : new Set();
         dispatch(updateTimePeriod({
-            fy: newValue,
+            fy: newStateValue,
             dateType: 'fy'
         }));
     };

src/js/containers/search/SearchSidebarSubmitContainer.jsx

@@ -3,20 +3,19 @@
  * Created by Kevin Li 12/21/17
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { areFiltersEqual } from 'helpers/searchHelper';
 import SearchSidebarSubmit from 'components/search/SearchSidebarSubmit';
-import { initialState, initialStateFY } from 'redux/reducers/search/searchFiltersReducer';
+import { initialState, initialStateDR } from 'redux/reducers/search/searchFiltersReducer';
 import { clearAllFilters as clearStagedFilters } from 'redux/actions/search/searchFilterActions';
 import { resetMapLegendToggle } from 'redux/actions/search/mapLegendToggleActions';
 import {
     applyStagedFilters,
     resetAppliedFilters, setAppliedFilterCompletion
 } from "redux/actions/search/appliedFilterActions";
-import usePrevious from "hooks/usePrevious";
 import {
     convertFiltersToAnalyticEvents,
     sendAnalyticEvents,
@@ -32,38 +31,17 @@ const SearchSidebarSubmitContainer = ({ setShowMobileFilters }) => {
     } = useSelector((state) => state.appliedFilters);
     const stagedFilters = useSelector((state) => state.filters);
     const dispatch = useDispatch();
-    const [filtersChanged, setFiltersChanged] = useState(false);
-    const prevStagedFilters = usePrevious(stagedFilters);
-    const prevAppliedFilters = usePrevious(appliedFilters);
 
+    const filtersChanged = !areFiltersEqual(stagedFilters, appliedFilters);
     const areStagedFiltersEmpty = areFiltersEqual(stagedFilters, initialState) ||
-            areFiltersEqual(stagedFilters, initialStateFY);
-
-    const compareStores = () => {
-    // we need to do a deep equality check by comparing every store key
-        const storeKeys = Object.keys(stagedFilters);
-        if (storeKeys.length !== Object.keys(appliedFilters).length) {
-            // key lengths do not match, there's a difference so fail immediately
-            return false;
-        }
-        return areFiltersEqual(stagedFilters, appliedFilters);
-    };
+            areFiltersEqual(stagedFilters, initialStateDR);
 
     const resetFilters = useCallback(() => {
         dispatch(clearStagedFilters());
         dispatch(resetAppliedFilters());
         dispatch(resetMapLegendToggle());
     }, [dispatch]);
 
-    const stagingChanged = () => {
-    // do a deep equality check between the staged filters and applied filters
-        if (!compareStores()) {
-            setFiltersChanged(true);
-        }
-        else if (filtersChanged) {
-            setFiltersChanged(false);
-        }
-    };
 
     const applyFilters = useCallback(() => {
         dispatch(setAppliedFilterCompletion(false));
@@ -75,24 +53,12 @@ const SearchSidebarSubmitContainer = ({ setShowMobileFilters }) => {
             dispatch(applyStagedFilters(stagedFilters));
             dispatch(setAppliedFilterCompletion(true));
         }
-        setFiltersChanged(false);
 
         const events = convertFiltersToAnalyticEvents(stagedFilters);
         sendAnalyticEvents(events);
         sendFieldCombinations(events);
     }, [dispatch, resetFilters, stagedFilters]);
 
-    useEffect(() => {
-        const areStagedAndAppliedFiltersEquivalent = (
-            areFiltersEqual(stagedFilters, prevStagedFilters) &&
-            areFiltersEqual(appliedFilters, prevAppliedFilters)
-        );
-        if (!areStagedAndAppliedFiltersEquivalent) {
-            stagingChanged();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [stagedFilters, appliedFilters]);
-
     return (
         <SearchSidebarSubmit
             stagedFiltersAreEmpty={areStagedFiltersEmpty}

src/js/containers/search/filters/TimePeriodContainer.jsx

@@ -3,7 +3,7 @@
   * Created by Kevin Li 11/21/16
   **/
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -50,11 +50,11 @@ const TimePeriodContainer = (props) => {
         setTimePeriods(timePeriodArr);
     };
 
-    const changeTab = (tab) => {
+    const changeTab = useCallback((tab) => {
         setActiveTab(tab);
-    };
+    }, []);
 
-    const updateFilter = (params) => {
+    const updateFilter = useCallback((params) => {
         const newFilters = Object.assign({}, params);
 
         if (activeTab === 'fy') {
@@ -67,7 +67,7 @@ const TimePeriodContainer = (props) => {
             newFilters.fy = [];
             props.updateTimePeriodArray(newFilters);
         }
-    };
+    }, [activeTab]);
 
     const dirtyFilters = () => {
         const appliedFields = [

src/js/helpers/searchHelper.js

@@ -3,7 +3,7 @@
   * Created by Kevin Li 11/2/16
   **/
 
-import { is } from 'immutable';
+import { is as immutableIs, Iterable } from 'immutable';
 import { isEqual, sortBy } from 'lodash-es';
 import dayjs from "dayjs";
 import { initialState } from 'redux/reducers/search/searchFiltersReducer';
@@ -182,12 +182,20 @@ export const fetchLastUpdate = () => apiRequest({
     url: 'v2/awards/last_updated/'
 });
 
+// eslint-disable-next-line max-len
 const areCheckboxSelectionsEqual = ({ exclude: exclude1, require: require1 }, { exclude: exclude2, require: require2 }) => {
     if (!isEqual(sortBy(require1), sortBy(require2))) return false;
     if (!isEqual(sortBy(exclude1), sortBy(exclude2))) return false;
     return true;
 };
 
+const valuesAreEqual = (a, b) => {
+    if(Iterable.isIterable(a) || Iterable.isIterable(b)) {
+        return immutableIs(a, b);
+    }
+
+    return isEqual(a, b);
+}
 /**
  * Equality Comparison of two objects:
  * @param {Object} filters object to be measured for equality
@@ -196,8 +204,10 @@ const areCheckboxSelectionsEqual = ({ exclude: exclude1, require: require1 }, {
  */
 export const areFiltersEqual = (filters = initialState, filterReference = initialState) => {
     if (!filterReference && filters) return false;
-    const referenceObject = Object.assign({}, filterReference);
-    const comparisonObject = Object.assign({}, filters);
+
+    const referenceObject = {...filterReference};
+    const comparisonObject = {...filters};
+
     if (referenceObject.timePeriodType === 'fy') {
     // if the time period is fiscal year, we don't care about the date range values, even
     // if they're provided because the date range tab isn't selected
@@ -209,26 +219,26 @@ export const areFiltersEqual = (filters = initialState, filterReference = initia
         delete referenceObject.filterNaoActiveFromFyOrDateRange;
     }
     else if (referenceObject.timePeriodType === 'dr') {
-    // if the time period is date range, we don't care about the fiscal year values, even
-    // if they're provided because the fiscal year tab isn't selected
+        // if the time period is date range, we don't care about the fiscal year values, even
+        // if they're provided because the fiscal year tab isn't selected
         delete comparisonObject.timePeriodFY;
         delete referenceObject.timePeriodFY;
         delete comparisonObject.filterNewAwardsOnlyActive;
         delete referenceObject.filterNewAwardsOnlyActive;
         delete comparisonObject.filterNaoActiveFromFyOrDateRange;
         delete referenceObject.filterNaoActiveFromFyOrDateRange;
     }
+
     // we need to iterate through each of the filter Redux keys in order to perform equality
     // comparisons on Immutable children (via the Immutable is() function)
     const immutableFilterKeys = Object
         .keys(comparisonObject)
         .filter((k) => !checkboxTreeFilters.includes(k));
 
-    for (const value of immutableFilterKeys) {
-        const key = value;
+    for (const key of immutableFilterKeys) {
         const unfilteredValue = comparisonObject[key];
         const currentValue = referenceObject[key];
-        if (!is(unfilteredValue, currentValue)) {
+        if (!valuesAreEqual(unfilteredValue, currentValue)) {
             return false;
         }
     }

src/js/redux/reducers/search/searchFiltersReducer.js

@@ -82,9 +82,9 @@ export const initialState = {
     awardDescription: ''
 };
 
-export const initialStateFY = {
+export const initialStateDR = {
     keyword: OrderedMap(),
-    timePeriodType: 'fy',
+    timePeriodType: 'dr',
     timePeriodFY: Set(),
     time_period: Set(),
     filterNewAwardsOnlySelected: false,

tests/helpers/searchHelper-test.js

@@ -1,12 +1,12 @@
 /**
  * @jest-environment jsdom
  */
-import { initialState, initialStateFY, CheckboxTreeSelections } from 'redux/reducers/search/searchFiltersReducer';
+import { initialState, CheckboxTreeSelections } from 'redux/reducers/search/searchFiltersReducer';
 import { areFiltersEqual, isSearchHashReady } from 'helpers/searchHelper';
 
 test.each([
     ['obj1 & obj2 are both initial state', true, initialState, initialState],
-    ['obj1 is initial state and obj2 has timePeriodFY changed', false, initialStateFY, { ...initialState, timePeriodFY: new Set(['2020']) }],
+    ['obj1 is initial state and obj2 has timePeriodFY changed', false, initialState, { ...initialState, timePeriodFY: new Set(['2020']) }],
     ['empty vs defined def codes', false, initialState, {
         ...initialState,
         defCodes: CheckboxTreeSelections({ require: ['12'], counts: [], exclude: [] })