Issue: [BUG] Filtering on field with multiple values does not work as expected #895

Author: estruyf

CHANGELOG.md

@@ -12,6 +12,8 @@
 
 ### 🐞 Fixes
 
+- [#895](https://github.com/estruyf/vscode-front-matter/issues/895): Fix issue with array values in filters
+
 ## [10.6.0] - 2024-11-06 - [Release notes](https://beta.frontmatter.codes/updates/v10.6.0)
 
 ### 🎨 Enhancements

src/dashboardWebView/components/Header/Filters.tsx

@@ -24,17 +24,35 @@ export const Filters: React.FunctionComponent<IFiltersProps> = () => {
     return otherFilters?.map((filter) => {
       const filterName = typeof filter === "string" ? filter : filter.name;
       const filterTitle = typeof filter === "string" ? firstToUpper(filter) : filter.title;
-      const values = filterValues?.[filterName];
+      let values = filterValues?.[filterName];
       if (!values || values.length === 0) {
         return null;
       }
 
+      // Get all the unique values
+      const individualValues = new Set<string>();
+      values.forEach((value) => {
+        if (value.length === 0) {
+          return;
+        }
+
+        if (Array.isArray(value)) {
+          value.forEach((v) => individualValues.add(v));
+        }
+
+        if (typeof value === "string") {
+          individualValues.add(value);
+        }
+      });
+
+      values = Array.from(individualValues);
+
       return (
         <Filter
           key={filterName}
           label={filterTitle}
           activeItem={crntFilters[filterName]}
-          items={values}
+          items={values as string[]}
           onClick={(value) => setCrntFilters((prev) => {
             const clone = Object.assign({}, prev);
             if (!clone[filterName] && value) {

src/dashboardWebView/hooks/usePages.tsx

@@ -107,7 +107,14 @@ export default function usePages(pages: Page[]) {
         for (const filter of filterNames) {
           const filterValue = filters[filter];
           if (filterValue) {
-            pagesSorted = pagesSorted.filter((page) => page[filter] === filterValue);
+            pagesSorted = pagesSorted.filter((page) => {
+              const value = page[filter];
+              if (Array.isArray(value)) {
+                return value.includes(filterValue);
+              } else {
+                return value === filterValue;
+              }
+            });
           }
         }
       }

src/dashboardWebView/state/atom/FilterValuesAtom.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-export const FilterValuesAtom = atom<{ [filter: string]: string[] }>({
+export const FilterValuesAtom = atom<{ [filter: string]: string[] | string[][] }>({
   key: 'FilterValuesAtom',
   default: {}
 });