Moving currentFilters logic to FiltersContainer to reduce repeate…

…d code, and to resolve the warning: `Selector unknown returned a different result when called with the same parameters. This can lead to unnecessary rerenders.`
mlibrary · Oct 23, 2024 · ceba9cf · ceba9cf
1 parent a9f4a30
commit ceba9cf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 45 deletions.
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -9,7 +9,10 @@ import React from 'react';
 
 const FiltersContainer = ({ datastoreUid }) => {
   const dispatch = useDispatch();
-  const { activeFilters, filters: filterGroups } = useSelector((state) => {
+  const { [datastoreUid]: urlFilters = {} } = useSelector((state) => {
+    return state.filters.active;
+  });
+  const { activeFilters = {}, filters: filterGroups } = useSelector((state) => {
     return state.advanced[datastoreUid] || {};
   });
   const advancedDatastoreFilters = getFilters({ activeFilters, filterGroups });
@@ -73,12 +76,23 @@ const FiltersContainer = ({ datastoreUid }) => {
                 ? (
                     advancedDatastoreFilters[filterGroup].map((advancedFilter, index) => {
                       const { filters, name, type, uid } = advancedFilter;
+                      const currentAdvancedFilters = activeFilters[uid] || [];
+                      const currentURLFilters = urlFilters[uid] || [];
+                      // Make sure the URL filters and the advanced filters match on load
+                      const currentFilters = [
+                        ...currentURLFilters.filter((currentURLFilter) => {
+                          return !currentAdvancedFilters.includes(currentURLFilter);
+                        }),
+                        ...currentAdvancedFilters.filter((currentAdvancedFilter) => {
+                          return !currentURLFilters.includes(currentAdvancedFilter);
+                        })
+                      ];
                       return (
                         <div key={index} className='advanced-filter-container'>
                           <h2 className='advanced-filter-label-text'>{name}</h2>
                           <div className='advanced-filter-inner-container'>
-                            {type === 'multiple_select' && <Multiselect {...{ datastoreUid, filterGroupUid: uid, filters, name }} />}
-                            {type === 'date_range_input' && <DateRangeInput {...{ datastoreUid, filterGroupUid: uid }} />}
+                            {type === 'multiple_select' && <Multiselect {...{ currentFilters, datastoreUid, filterGroupUid: uid, filters, name }} />}
+                            {type === 'date_range_input' && <DateRangeInput {...{ currentFilters, datastoreUid, filterGroupUid: uid }} />}
                             {!['multiple_select', 'date_range_input'].includes(type) && <AdvancedFilter {...{ advancedFilter, changeAdvancedFilter }} />}
                           </div>
                         </div>

diff --git a/src/modules/core/components/DateRangeInput/index.js b/src/modules/core/components/DateRangeInput/index.js
@@ -1,35 +1,17 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { setAdvancedFilter } from '../../../advanced';
+import { useDispatch } from 'react-redux';
 
 const dateRangeOptions = ['before', 'after', 'between', 'in'];
 
-const DateRangeInput = ({ datastoreUid, filterGroupUid }) => {
+const DateRangeInput = ({ currentFilters, datastoreUid, filterGroupUid }) => {
   const dispatch = useDispatch();
   const [range, setRange] = useState(dateRangeOptions[0]);
   const [firstYear, setFirstYear] = useState('');
   const [secondYear, setSecondYear] = useState('');
-  const { [filterGroupUid]: urlFilters = [] } = useSelector((state) => {
-    return state.filters.active[datastoreUid] || {};
-  });
-  const { activeFilters = {} } = useSelector((state) => {
-    return state.advanced[datastoreUid] || {};
-  });
-  const advancedFilters = useMemo(() => {
-    return activeFilters[filterGroupUid] || [];
-  }, [activeFilters, filterGroupUid]);
 
   useEffect(() => {
-    // Make sure the URL filters and the advanced filters match on load
-    const currentFilters = [
-      ...urlFilters.filter((urlFilter) => {
-        return !advancedFilters.includes(urlFilter);
-      }),
-      ...advancedFilters.filter((advancedFilter) => {
-        return !urlFilters.includes(advancedFilter);
-      })
-    ];
     currentFilters.forEach((filterValue) => {
       dispatch(setAdvancedFilter({
         datastoreUid,
@@ -125,6 +107,7 @@ const DateRangeInput = ({ datastoreUid, filterGroupUid }) => {
 };
 
 DateRangeInput.propTypes = {
+  currentFilters: PropTypes.array,
   datastoreUid: PropTypes.string,
   filterGroupUid: PropTypes.string
 };

diff --git a/src/modules/core/components/Multiselect/index.js b/src/modules/core/components/Multiselect/index.js
@@ -1,21 +1,14 @@
 import './styles.css';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { setAdvancedFilter } from '../../../advanced';
+import { useDispatch } from 'react-redux';
 
-const Multiselect = ({ datastoreUid, filterGroupUid, filters = {}, name }) => {
+const Multiselect = ({ currentFilters, datastoreUid, filterGroupUid, filters = {}, name }) => {
   const dispatch = useDispatch();
   const [filterQuery, setFilterQuery] = useState('');
   const [showOnlySelectedOptions, setShowOnlySelectedOptions] = useState(false);
 
-  const { [filterGroupUid]: urlFilters = [] } = useSelector((state) => {
-    return state.filters.active[datastoreUid] || {};
-  });
-  const { activeFilters = {} } = useSelector((state) => {
-    return state.advanced[datastoreUid] || {};
-  });
-
   const options = useMemo(() => {
     return filters.map(({ isActive, value }) => {
       return {
@@ -29,20 +22,8 @@ const Multiselect = ({ datastoreUid, filterGroupUid, filters = {}, name }) => {
   if (!options.length) {
     return null;
   }
-  const advancedFilters = useMemo(() => {
-    return activeFilters[filterGroupUid] || [];
-  }, [activeFilters, filterGroupUid]);
 
   useEffect(() => {
-    // Make sure the URL filters and the advanced filters match on load
-    const currentFilters = [
-      ...urlFilters.filter((urlFilter) => {
-        return !advancedFilters.includes(urlFilter);
-      }),
-      ...advancedFilters.filter((advancedFilter) => {
-        return !urlFilters.includes(advancedFilter);
-      })
-    ];
     currentFilters.forEach((filterValue) => {
       dispatch(setAdvancedFilter({
         datastoreUid,
@@ -132,6 +113,7 @@ const Multiselect = ({ datastoreUid, filterGroupUid, filters = {}, name }) => {
 };
 
 Multiselect.propTypes = {
+  currentFilters: PropTypes.array,
   datastoreUid: PropTypes.string,
   filterGroupUid: PropTypes.string,
   filters: PropTypes.array,