Importing array instead of object for filters.

mlibrary · Nov 12, 2024 · 73ad925 · 73ad925
1 parent e76f169
commit 73ad925
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/src/modules/advanced/components/AccessOptions/index.js b/src/modules/advanced/components/AccessOptions/index.js
@@ -1,49 +1,55 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { setAdvancedFilter } from '../../../advanced';
 import { useDispatch } from 'react-redux';
 
-const AccessOptions = ({ advancedFilter, datastoreUid }) => {
+const AccessOptions = ({ datastoreUid, filters }) => {
   const dispatch = useDispatch();
-  const [filters, setFilters] = useState(advancedFilter.filters);
+  const [options, setOptions] = useState([]);
 
-  const handleCheckboxChange = (filterItem) => {
+  useEffect(() => {
+    setOptions(filters);
+  }, [filters]);
+
+  const handleCheckboxChange = useCallback((filterItem) => {
     const { checked, uid: filterGroupUid } = filterItem.value;
 
-    setFilters(filters.map((filter) => {
-      if (filter.value.uid === filterGroupUid) {
-        return {
-          ...filter,
-          value: {
-            ...filter.value,
-            checked: !filter.value.checked
-          }
-        };
-      }
-      return filter;
-    }));
+    setOptions((prevOptions) => {
+      return prevOptions.map((option) => {
+        if (option.value.uid === filterGroupUid) {
+          return {
+            ...option,
+            value: {
+              ...option.value,
+              checked: !option.value.checked
+            }
+          };
+        }
+        return option;
+      });
+    }
+    );
 
     dispatch(setAdvancedFilter({
       datastoreUid,
       filterGroupUid,
       filterValue: !checked,
       onlyOneFilterValue: true
     }));
-  };
-
+  }, [dispatch, datastoreUid]);
   return (
     <>
-      {filters.map((filter, index) => {
+      {options.map((option, index) => {
         return (
-          <label key={filter.value.uid} className={index > 0 ? 'margin-top__xs' : ''}>
+          <label key={option.value.uid} className={index > 0 ? 'margin-top__xs' : ''}>
             <input
               type='checkbox'
-              checked={filter.value.checked}
+              checked={option.value.checked}
               onChange={() => {
-                return handleCheckboxChange(filter);
+                return handleCheckboxChange(option);
               }}
             />
-            {filter.value.name}
+            {option.value.name}
           </label>
         );
       })}
@@ -52,8 +58,8 @@ const AccessOptions = ({ advancedFilter, datastoreUid }) => {
 };
 
 AccessOptions.propTypes = {
-  advancedFilter: PropTypes.object,
-  datastoreUid: PropTypes.string
+  datastoreUid: PropTypes.string,
+  filters: PropTypes.array
 };
 
 export default AccessOptions;
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -79,7 +79,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                       {type === 'multiple_select' && <Multiselect {...{ currentFilters, datastoreUid, filterGroupUid: uid, filters, name }} />}
                       {type === 'date_range_input' && <DateRangeInput {...{ currentFilter: currentURLFilters[0], datastoreUid, filterGroupUid: uid }} />}
                       {type === 'scope_down' && <AdvancedFilter {...{ advancedFilter, changeAdvancedFilter }} />}
-                      {type === 'checkbox' && <AccessOptions key={index} {...{ advancedFilter, datastoreUid, filterGroupUid: advancedFilter.uid }} />}
+                      {type === 'checkbox' && <AccessOptions {...{ datastoreUid, filters }} />}
                     </div>
                   </div>
                 );