Creating AccessOptions and separating checkbox type from `Advance…

…dFilter`.
mlibrary · Nov 7, 2024 · c839a8e · c839a8e
1 parent 6c8ea5b
commit c839a8e
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 50 deletions.
diff --git a/src/modules/advanced/components/AccessOptions/index.js b/src/modules/advanced/components/AccessOptions/index.js
@@ -0,0 +1,43 @@
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { setAdvancedFilter } from '../../../advanced';
+import { useDispatch } from 'react-redux';
+
+const AccessOptions = ({ advancedFilter, datastoreUid, filterGroupUid }) => {
+  const dispatch = useDispatch();
+
+  const isChecked = useMemo(() => {
+    return (!advancedFilter.activeFilters?.length && advancedFilter.conditions.default === 'checked')
+      || (advancedFilter.activeFilters?.[0] === advancedFilter.conditions.checked);
+  }, [advancedFilter]);
+
+  const value = isChecked ? advancedFilter.conditions.unchecked : advancedFilter.conditions.checked;
+
+  const changeAdvancedFilter = useCallback(() => {
+    dispatch(setAdvancedFilter({
+      datastoreUid,
+      filterGroupUid,
+      filterValue: value,
+      onlyOneFilterValue: true
+    }));
+  }, [dispatch, datastoreUid, filterGroupUid, value]);
+
+  return (
+    <label>
+      <input
+        type='checkbox'
+        checked={isChecked}
+        onChange={changeAdvancedFilter}
+      />
+      <span>{advancedFilter.name}</span>
+    </label>
+  );
+};
+
+AccessOptions.propTypes = {
+  advancedFilter: PropTypes.object.isRequired,
+  datastoreUid: PropTypes.string.isRequired,
+  filterGroupUid: PropTypes.string.isRequired
+};
+
+export default AccessOptions;
diff --git a/src/modules/advanced/components/AdvancedFilter/index.js b/src/modules/advanced/components/AdvancedFilter/index.js
@@ -1,56 +1,20 @@
-import { Checkbox } from '../../../reusable';
 import NarrowSearchTo from '../NarrowSearchTo';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const getIsCheckboxFilterChecked = ({ advancedFilter }) => {
-  const hasActiveFilter = advancedFilter.activeFilters?.length > 0;
-
-  if (!hasActiveFilter && advancedFilter.conditions.default === 'checked') {
-    return true;
-  }
-
-  if (hasActiveFilter && advancedFilter.activeFilters[0] === advancedFilter.conditions.checked) {
-    return true;
-  }
-
-  return false;
-};
-
 const AdvancedFilter = ({ advancedFilter, changeAdvancedFilter }) => {
-  if (advancedFilter.type === 'scope_down') {
-    return (
-      <NarrowSearchTo
-        handleChange={(option) => {
-          return changeAdvancedFilter({
-            filterGroupUid: option.uid,
-            filterType: advancedFilter.type,
-            filterValue: option.value
-          });
-        }}
-        options={advancedFilter.options}
-      />
-    );
-  }
-  if (advancedFilter.type === 'checkbox') {
-    const isChecked = getIsCheckboxFilterChecked({ advancedFilter });
-    const value = isChecked ? advancedFilter.conditions.unchecked : advancedFilter.conditions.checked;
-
-    return (
-      <Checkbox
-        handleClick={() => {
-          return changeAdvancedFilter({
-            filterGroupUid: advancedFilter.uid,
-            filterType: advancedFilter.type,
-            filterValue: value
-          });
-        }}
-        isChecked={isChecked}
-        label={advancedFilter.name}
-      />
-    );
-  }
-  return null;
+  return (
+    <NarrowSearchTo
+      handleChange={(option) => {
+        return changeAdvancedFilter({
+          filterGroupUid: option.uid,
+          filterType: advancedFilter.type,
+          filterValue: option.value
+        });
+      }}
+      options={advancedFilter.options}
+    />
+  );
 };
 
 AdvancedFilter.propTypes = {

diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -1,5 +1,6 @@
 import { AdvancedSearchSubmit, setAdvancedFilter } from '../../../advanced';
 import { useDispatch, useSelector } from 'react-redux';
+import AccessOptions from '../AccessOptions';
 import ActiveAdvancedFilters from '../ActiveAdvancedFilters';
 import AdvancedFilter from '../AdvancedFilter';
 import DateRangeInput from '../DateRangeInput';
@@ -94,7 +95,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                           <div className='advanced-filter-inner-container'>
                             {type === 'multiple_select' && <Multiselect {...{ currentFilters, datastoreUid, filterGroupUid: uid, filters, name }} />}
                             {type === 'date_range_input' && <DateRangeInput {...{ currentFilter: currentURLFilters[0], datastoreUid, filterGroupUid: uid }} />}
-                            {!['multiple_select', 'date_range_input'].includes(type) && <AdvancedFilter {...{ advancedFilter, changeAdvancedFilter }} />}
+                            {type === 'scope_down' && <AdvancedFilter {...{ advancedFilter, changeAdvancedFilter }} />}
                           </div>
                         </div>
                       );
@@ -104,7 +105,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                     <div className='advanced-filter-container'>
                       <h2 className='advanced-filter-label-text'>{filterGroup}</h2>
                       {advancedDatastoreFilters[filterGroup].map((advancedFilter, index) => {
-                        return <AdvancedFilter key={index} {...{ advancedFilter, changeAdvancedFilter }} />;
+                        return <AccessOptions key={index} {...{ advancedFilter, datastoreUid, filterGroupUid: advancedFilter.uid }} />;
                       })}
                     </div>
                   )}