Separating ActiveAdvancedFilters as its own component.

src/modules/advanced/components/ActiveAdvancedFilters/index.js

@@ -0,0 +1,74 @@
+import './styles.css';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ActiveAdvancedFilters = ({ activeFilters, filters }) => {
+  // Remove properties that have undefined values
+  Object.keys(activeFilters).forEach((option) => {
+    if (!activeFilters[option]) {
+      delete activeFilters[option];
+    }
+  });
+
+  const filterGroups = {};
+  filters.forEach((filterGroup) => {
+    filterGroups[filterGroup.uid] = { ...filterGroup };
+  });
+
+  const items = Object.keys(activeFilters).reduce((acc, group) => {
+    // Just don't show the checkbox filters as active filter items.
+    if (!filterGroups[group] || filterGroups[group].type !== 'checkbox') {
+      const activeFiltersToAdd = activeFilters[group].map((value) => {
+        return { group, value };
+      });
+      return [...acc, ...activeFiltersToAdd];
+    }
+    return acc;
+  }, []);
+
+  if (!items.length) {
+    return null;
+  }
+
+  const titleCase = (string) => {
+    return string.toLowerCase().split('_').map((word) => {
+      return word.replace(word[0], word[0].toUpperCase());
+    }).join(' ');
+  };
+
+  return (
+    <section aria-label='active-filters'>
+      <h2
+        id='active-filters'
+        className='u-margin-top-none margin-bottom__xs h4'
+      >
+        Active filters
+        {' '}
+        <span className='text-grey__light padding-right__xs'>
+          ({items.length})
+        </span>
+      </h2>
+
+      <p className='font-small u-margin-top-none'>
+        Unselect active filters through the options below.
+      </p>
+
+      <ul className='margin-top__none active-filter-list'>
+        {items.map((item, index) => {
+          return (
+            <li key={index + item.group + item.value}>
+              <span className='strong'>{filterGroups[item.group]?.name || titleCase(item.group)}:</span> {item.value}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+ActiveAdvancedFilters.propTypes = {
+  activeFilters: PropTypes.object,
+  filters: PropTypes.array
+};
+
+export default ActiveAdvancedFilters;

src/modules/advanced/components/FiltersContainer/index.js

@@ -1,86 +1,11 @@
-import './styles.css';
 import { AdvancedSearchSubmit, setAdvancedFilter } from '../../../advanced';
 import { useDispatch, useSelector } from 'react-redux';
+import ActiveAdvancedFilters from '../ActiveAdvancedFilters';
 import AdvancedFilter from '../AdvancedFilter';
 import getFilters from './getFilters';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const ActiveAdvancedFilters = ({ datastoreUid }) => {
-  const { activeFilters, filters } = useSelector((state) => {
-    return state.advanced[datastoreUid] || {};
-  });
-  // Check if object exists
-  if (!activeFilters) {
-    return null;
-  }
-  // Remove properties that have undefined values
-  Object.keys(activeFilters).forEach((option) => {
-    if (!activeFilters[option]) {
-      delete activeFilters[option];
-    }
-  });
-
-  const filterGroups = {};
-  filters.forEach((filterGroup) => {
-    filterGroups[filterGroup.uid] = { ...filterGroup };
-  });
-
-  const items = Object.keys(activeFilters).reduce((acc, group) => {
-    // Just don't show the checkbox filters as active filter items.
-    if (!filterGroups[group] || filterGroups[group].type !== 'checkbox') {
-      const activeFiltersToAdd = activeFilters[group].map((value) => {
-        return { group, value };
-      });
-      return [...acc, ...activeFiltersToAdd];
-    }
-    return acc;
-  }, []);
-
-  if (!items.length) {
-    return null;
-  }
-
-  const titleCase = (string) => {
-    return string.toLowerCase().split('_').map((word) => {
-      return word.replace(word[0], word[0].toUpperCase());
-    }).join(' ');
-  };
-
-  return (
-    <section aria-label='active-filters'>
-      <h2
-        id='active-filters'
-        className='u-margin-top-none margin-bottom__xs h4'
-      >
-        Active filters
-        {' '}
-        <span className='text-grey__light padding-right__xs'>
-          ({items.length})
-        </span>
-      </h2>
-
-      <p className='font-small u-margin-top-none'>
-        Unselect active filters through the options below.
-      </p>
-
-      <ul className='margin-top__none active-filter-list'>
-        {items.map((item, index) => {
-          return (
-            <li key={index + item.group + item.value}>
-              <span className='strong'>{filterGroups[item.group]?.name || titleCase(item.group)}:</span> {item.value}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-};
-
-ActiveAdvancedFilters.propTypes = {
-  datastoreUid: PropTypes.string
-};
-
 const FiltersContainer = ({ datastoreUid }) => {
   const dispatch = useDispatch();
   const { activeFilters, filters: filterGroups } = useSelector((state) => {
@@ -145,7 +70,7 @@ const FiltersContainer = ({ datastoreUid }) => {
 
   return (
     <>
-      <ActiveAdvancedFilters datastoreUid={datastoreUid} />
+      {activeFilters && <ActiveAdvancedFilters {...{ activeFilters, filters: filterGroups }} />}
       <h2 className='heading-large'>Additional search options</h2>
       <div className='advanced-filters-inner-container'>
         {filterGroupings.map((filterGroup, groupIndex) => {