fix(useFilterConfig): Fix group filter selection

src/hooks/useFilterConfig/helpers/filterChipHelpers.js

@@ -8,8 +8,12 @@ export const toFilterChips = (filterConfig, filterTypes, activeFilters) =>
   Object.entries(activeFilters || {})
     .map(([filter, value]) => {
       const configItem = getFilterConfigItem(filterConfig, filter);
-      return configItem && isNotEmpty(value)
-        ? filterChipTemplates(configItem, value, filterTypes[configItem.type])
+      const filterChips =
+        configItem &&
+        filterChipTemplates(configItem, value, filterTypes[configItem.type]);
+
+      return configItem && isNotEmpty(value) && filterChips
+        ? filterChips
         : undefined;
     })
     .filter((v) => !!v);

src/hooks/useFilterConfig/helpers/filterTypeHelpers/groupType.js

@@ -29,44 +29,34 @@ const groupType = {
       : {}),
     ...defaultOnChange(handler, stringToId(label)),
   }),
-  filterChips: (configItem, value) => ({
-    category: configItem.label,
-    chips: Object.entries(value).flatMap((groupItem) =>
-      Object.keys(groupItem[1]).map((itemValue) => ({
-        name: itemForValueInGroups(configItem, itemValue).label,
-      })),
-    ),
-  }),
-  toSelectValue: (configItem, selectedValues) => {
-    const cleanedUpFilter = Object.fromEntries(
-      Object.entries(selectedValues)
-        .map(([group, groupItems]) => {
-          const filteredItems = Object.entries(groupItems).filter(
-            ([, value]) => value,
-          );
-          return filteredItems.length
-            ? [
-                group,
-                Object.fromEntries(
-                  Object.entries(groupItems).filter(([, value]) => value),
-                ),
-              ]
-            : undefined;
+  filterChips: (configItem, value) => {
+    const chips = Object.entries(value).flatMap(([groupKey, groupItem]) =>
+      Object.entries(groupItem)
+        .filter(([itemKey, value]) => {
+          return itemKey !== groupKey && value === true;
         })
-        .filter((v) => !!v),
+        .map(([key]) => ({
+          name: itemForValueInGroups(configItem, key).label,
+        })),
     );
 
-    return [
-      Object.keys(cleanedUpFilter).length ? cleanedUpFilter : undefined,
-      stringToId(configItem.label),
-      true,
-    ];
+    return chips.length
+      ? {
+          category: configItem.label,
+          chips,
+        }
+      : undefined;
   },
+  toSelectValue: (configItem, selectedValues) => [
+    selectedValues,
+    stringToId(configItem.label),
+    true,
+  ],
   toDeselectValue: (configItem, chip, activeFilters) => {
     const filter = stringToId(configItem.label);
     const activeValues = activeFilters[filter];
     const item = itemForLabelInGroups(configItem, chip.chips[0].name);
-    console.log('iii', { activeValues, item, configItem, chip, activeFilters });
+
     if (item.parent?.value) {
       delete activeValues[item.parent.value][item.value];
     } else {

src/hooks/useFilterConfig/useFilterConfig.js

@@ -104,6 +104,7 @@ const useFilterConfig = (options) => {
           activeFiltersConfig: {
             filters: toFilterChips(filterConfig, filterTypes, activeFilters),
             onDelete: onFilterDelete,
+            onDeleteGroup: onFilterDelete,
           },
         },
         ...(isFilterModalOpen ? { filterModalProps } : {}),

src/support/factories/filters.js

@@ -82,6 +82,7 @@ export const artistByGenre = {
   groups: Object.entries(artistsGroupedByGenre).map(([genre, artists]) => ({
     label: genre,
     value: genre,
+    groupSelectable: true,
     items: artists.slice(0, 10).map(({ artist }) => ({
       label: artist,
       value: artist,
@@ -109,12 +110,13 @@ export const yearsByDecade = {
       [],
     );
 
-    return `.releaseYear in [${allYears.join(', ')}]`;
+    return `.releaseYear in [${allYears.map((year) => `"${year}"`).join(', ')}]`;
   },
   groups: [
     {
       label: '80s',
       value: '80s',
+      groupSelectable: true,
       items: [...new Array(10)].map((_, idx) => ({
         label: `198${idx}`,
         value: `198${idx}`,
@@ -123,6 +125,7 @@ export const yearsByDecade = {
     {
       label: '90s',
       value: '90s',
+      groupSelectable: true,
       items: [...new Array(10)].map((_, idx) => ({
         label: `199${idx}`,
         value: `199${idx}`,
@@ -131,6 +134,7 @@ export const yearsByDecade = {
     {
       label: '00s',
       value: '00s',
+      groupSelectable: true,
       items: [...new Array(10)].map((_, idx) => ({
         label: `200${idx}`,
         value: `200${idx}`,
@@ -139,6 +143,7 @@ export const yearsByDecade = {
     {
       label: '10s',
       value: '10s',
+      groupSelectable: true,
       items: [...new Array(10)].map((_, idx) => ({
         label: `201${idx}`,
         value: `201${idx}`,
@@ -147,6 +152,7 @@ export const yearsByDecade = {
     {
       label: '20s',
       value: '20s',
+      groupSelectable: true,
       items: [...new Array(5)].map((_, idx) => ({
         label: `201${idx}`,
         value: `201${idx}`,