UIFC-483-refactor-useUpdatedFilter add test, useMemo

Author: elsenhans

src/components/Filters/FilterFilters.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -16,7 +16,7 @@ const FilterFilters = ({
   activeFilters = { type: [] },
   filterHandlers,
 }) => {
-  const [filterState] = useState(() => buildFilterState(filterConfig));
+  const filterState = useMemo(() => buildFilterState(filterConfig), []);
 
   const renderCheckboxFilter = (key, props) => {
     const groupFilters = activeFilters[key] || [];

src/components/MetadataCollections/CollectionFilters.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -24,10 +24,11 @@ const CollectionFilters = ({
   filterData,
   ...props
 }) => {
-  const [filterState] = useState(() => buildFilterState(
+  const filterState = useMemo(
     // skip for mdSource filter as it is dynamic and handled separately
-    filterConfig.filter(f => f.name !== 'mdSource')
-  ));
+    () => buildFilterState(filterConfig.filter(f => f.name !== 'mdSource')),
+    []
+  );
 
   const renderCheckboxFilter = (key) => {
     const groupFilters = activeFilters[key] || [];

src/components/MetadataSources/SourceFilters.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -20,7 +20,7 @@ const SourceFilters = ({
   filterHandlers,
   ...props
 }) => {
-  const [filterState] = useState(() => buildFilterState(filterConfig));
+  const filterState = useMemo(() => buildFilterState(filterConfig), []);
 
   const renderCheckboxFilter = (key) => {
     const groupFilters = activeFilters[key] || [];

src/util/filterUtils.test.js

@@ -0,0 +1,50 @@
+import { buildFilterState } from './filterUtils';
+
+describe('buildFilterState', () => {
+  it('should build filter state from configs', () => {
+    const configs = [
+      {
+        name: 'filter1',
+        values: [
+          { cql: 'cql1', name: 'name1' },
+          { cql: 'cql2', name: 'name2' },
+        ],
+      },
+      {
+        name: 'filter2',
+        values: [{ cql: 'cql3', name: 'name3' }],
+      },
+    ];
+
+    const expected = {
+      filter1: [
+        { value: 'cql1', label: 'name1' },
+        { value: 'cql2', label: 'name2' },
+      ],
+      filter2: [{ value: 'cql3', label: 'name3' }],
+    };
+
+    expect(buildFilterState(configs)).toEqual(expected);
+  });
+
+  it('should handle empty configs', () => {
+    const configs = [];
+    const expected = {};
+    expect(buildFilterState(configs)).toEqual(expected);
+  });
+
+  it('should handle configs with empty values', () => {
+    const configs = [
+      {
+        name: 'filter1',
+        values: [],
+      },
+    ];
+
+    const expected = {
+      filter1: [],
+    };
+
+    expect(buildFilterState(configs)).toEqual(expected);
+  });
+});