Fix problem about facet result names not matching input filters

Lix -> lixRange is the main problem. This PR fixes the problem by translating the filter right after the facets have been fecthed. The translated facet name lives through the rest of the life cycle and is being sent to the next requests.
danskernesdigitalebibliotek · Nov 27, 2024 · 409a778 · 409a778
1 parent bced893
commit 409a778
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 42 deletions.
diff --git a/__tests__/search.test.ts b/__tests__/search.test.ts
@@ -1,13 +1,11 @@
 import { ReadonlyURLSearchParams } from "next/navigation"
 import { beforeEach, describe, expect, it, vi } from "vitest"
 
-import {
-  getFacetsForSearchRequest,
-  getSearchQueryArguments,
-} from "@/components/pages/searchPageLayout/helper"
+import { getFacetsForSearchRequest } from "@/components/pages/searchPageLayout/helper"
 import { getFacetMachineNames, getFacetTranslation } from "@/components/shared/searchFilters/helper"
 import goConfig from "@/lib/config/goConfig"
 import { FacetFieldEnum } from "@/lib/graphql/generated/fbi/graphql"
+import { correctFacetNames } from "@/lib/machines/search/helpers"
 
 vi.mock(import("@/lib/config/goConfig"), async importOriginal => {
   const actual = await importOriginal()
@@ -86,8 +84,117 @@ describe("Facet functionality", () => {
   })
 
   it("getFacetTranslation should give a translated facet when given a facet machine name", () => {
-    // @ts-ignore
-    const translation = getFacetTranslation("LIX")
+    const translation = getFacetTranslation("lixRange")
     expect(translation).toBe("Lix")
   })
+
+  it("correctFacetNames should translate the facet names to input filter valid names", () => {
+    const facets = [
+      {
+        name: "materialTypesGeneral",
+        values: [
+          {
+            key: "podcasts",
+            term: "podcasts",
+            score: 179,
+          },
+        ],
+      },
+      {
+        name: "mainLanguages",
+        values: [
+          {
+            key: "dan",
+            term: "Dansk",
+            score: 238,
+          },
+        ],
+      },
+      {
+        name: "age",
+        values: [
+          {
+            key: "for 10 år",
+            term: "for 10 år",
+            score: 25,
+          },
+        ],
+      },
+      {
+        name: "lix",
+        values: [
+          {
+            key: "22",
+            term: "22",
+            score: 2,
+          },
+        ],
+      },
+      {
+        name: "subjects",
+        values: [
+          {
+            key: "magi",
+            term: "magi",
+            score: 192,
+          },
+        ],
+      },
+    ]
+
+    const result = correctFacetNames(facets)
+
+    expect(result).toStrictEqual([
+      {
+        name: "materialTypesGeneral",
+        values: [
+          {
+            key: "podcasts",
+            term: "podcasts",
+            score: 179,
+          },
+        ],
+      },
+      {
+        name: "mainLanguages",
+        values: [
+          {
+            key: "dan",
+            term: "Dansk",
+            score: 238,
+          },
+        ],
+      },
+      {
+        name: "age",
+        values: [
+          {
+            key: "for 10 år",
+            term: "for 10 år",
+            score: 25,
+          },
+        ],
+      },
+      {
+        name: "lixRange",
+        values: [
+          {
+            key: "22",
+            term: "22",
+            score: 2,
+          },
+        ],
+      },
+      {
+        name: "subjects",
+        values: [
+          {
+            key: "magi",
+            term: "magi",
+            score: 192,
+          },
+        ],
+      },
+    ])
+  })
 })
diff --git a/components/pages/searchPageLayout/helper.ts b/components/pages/searchPageLayout/helper.ts
@@ -1,31 +1,7 @@
-import { GetNextPageParamFunction } from "@tanstack/react-query"
 import { useSelector } from "@xstate/react"
-import { ReadonlyURLSearchParams } from "next/navigation"
 
-import { getFacetMachineNames } from "@/components/shared/searchFilters/helper"
-import goConfig from "@/lib/config/goConfig"
-import { TFilters } from "@/lib/machines/search/types"
 import useSearchMachineActor from "@/lib/machines/search/useSearchMachineActor"
 
-export const getFacetsForSearchRequest = (searchParams: ReadonlyURLSearchParams) => {
-  const facets = goConfig("search.facets")
-  const facetsMachineNames = getFacetMachineNames()
-
-  return facetsMachineNames.reduce(
-    (acc: TFilters, machineName) => {
-      const values = searchParams.getAll(facets[machineName as keyof typeof facets].filter)
-      if (values.length > 0) {
-        return {
-          ...acc,
-          [facets[machineName as keyof typeof facets].filter]: [...values],
-        }
-      }
-      return acc
-    },
-    {} as { [key: string]: keyof TFilters[] }
-  )
-}
-
 export const useSearchDataAndLoadingStates = () => {
   const actor = useSearchMachineActor()
   const searchQuery = useSelector(actor, snapshot => {

diff --git a/components/shared/searchFilters/helper.ts b/components/shared/searchFilters/helper.ts
@@ -48,9 +48,9 @@ export const getFacetMachineNames = () => {
 }
 
 export const getFacetTranslation = (facetFilter: keyof TFilters) => {
-  const facets = goConfig("search.facets")
-
-  return facets[facetFilter.toUpperCase() as keyof typeof facets].translation || ""
+  const facetsConfig = Object.values(goConfig("search.facets"))
+  const translation = facetsConfig.find(facet => facet.filter === facetFilter)?.translation
+  return translation || ""
 }
 
 export const getActiveFilters = (

diff --git a/lib/machines/search/helpers.ts b/lib/machines/search/helpers.ts
@@ -1,9 +1,11 @@
+import { ReadonlyURLSearchParams } from "next/navigation"
+
+import { getFacetMachineNames } from "@/components/shared/searchFilters/helper"
 import goConfig from "@/lib/config/goConfig"
+import { SearchFacetsQuery } from "@/lib/graphql/generated/fbi/graphql"
 
 import { TContext, TFilters } from "./types"
 
-// Filters needs to be translated tho the input filters expected by the API
-// For some reason the input filters are different from the filters coming from the search facets request.
 export const getFiltersForSearchRequest = ({ selectedFilters }: TContext): TFilters => {
   const facets = goConfig("search.facets")
   return Object.keys(selectedFilters).reduce((acc, key: string) => {
@@ -16,3 +18,38 @@ export const getFiltersForSearchRequest = ({ selectedFilters }: TContext): TFilt
     return acc
   }, {} as TFilters)
 }
+
+// Filters needs to be translated tho the input filters expected by the API
+// For some reason the input filters are different from the filters coming from the search facets request.
+export const correctFacetNames = (facets: SearchFacetsQuery["search"]["facets"]) => {
+  const facetsConfig = goConfig("search.facets")
+  type TFacetConfigKey = keyof typeof facetsConfig
+
+  return facets.map(({ name, ...rest }) => {
+    const configKey = (name as TFacetConfigKey).toUpperCase()
+    const filterName = facetsConfig[configKey as TFacetConfigKey].filter
+    return {
+      ...rest,
+      name: filterName,
+    }
+  })
+}
+
+export const transformSearchParamsIntoFilters = (searchParams: ReadonlyURLSearchParams) => {
+  const facets = goConfig("search.facets")
+  const facetsMachineNames = getFacetMachineNames()
+
+  return facetsMachineNames.reduce(
+    (acc: TFilters, machineName) => {
+      const values = searchParams.getAll(facets[machineName as keyof typeof facets].filter)
+      if (values.length > 0) {
+        return {
+          ...acc,
+          [facets[machineName as keyof typeof facets].filter]: [...values],
+        }
+      }
+      return acc
+    },
+    {} as { [key: string]: keyof TFilters[] }
+  )
+}
diff --git a/lib/machines/search/search.machine.setup.ts b/lib/machines/search/search.machine.setup.ts
@@ -1,5 +1,6 @@
 import { assign, emit, setup } from "xstate"
 
+import { correctFacetNames } from "./helpers"
 import { getFacets, performSearch } from "./queries"
 import { TContext, TFilters, TInput } from "./types"
 
@@ -63,7 +64,9 @@ export default setup({
             search: { facets },
           },
         },
-      }) => facets,
+      }) => {
+        return correctFacetNames(facets)
+      },
     }),
     setSearchDataInContext: assign({
       searchData: ({

diff --git a/lib/machines/search/search.machine.ts b/lib/machines/search/search.machine.ts
@@ -1,6 +1,5 @@
 import { and, not } from "xstate"
 
-import { getFiltersForSearchRequest } from "./helpers"
 import searchMachineSetup from "./search.machine.setup"
 
 export default searchMachineSetup.createMachine({
@@ -95,7 +94,7 @@ export default searchMachineSetup.createMachine({
                   return {
                     q: context.currentQuery,
                     queryClient: context.queryClient,
-                    filters: getFiltersForSearchRequest(context),
+                    filters: context.selectedFilters,
                     offset: context.searchOffset,
                     limit: context.searchPageSize,
                   }
@@ -125,7 +124,7 @@ export default searchMachineSetup.createMachine({
                   return {
                     q: context.currentQuery,
                     queryClient: context.queryClient,
-                    filters: getFiltersForSearchRequest(context),
+                    filters: context.selectedFilters,
                     facetLimit: context.facetLimit,
                   }
                 },
@@ -160,7 +159,7 @@ export default searchMachineSetup.createMachine({
               return {
                 q: context.currentQuery,
                 queryClient: context.queryClient,
-                filters: getFiltersForSearchRequest(context),
+                filters: context.selectedFilters,
                 offset: context.searchOffset,
                 limit: context.searchPageSize,
               }

diff --git a/lib/machines/search/useSearchMachineActor.tsx b/lib/machines/search/useSearchMachineActor.tsx
@@ -7,9 +7,9 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { AnyEventObject, createActor } from "xstate"
 
-import { getFacetsForSearchRequest } from "@/components/pages/searchPageLayout/helper"
 import goConfig from "@/lib/config/goConfig"
 
+import { transformSearchParamsIntoFilters } from "./helpers"
 import searchMachine from "./search.machine"
 
 const searchActor = createActor(searchMachine, {
@@ -62,7 +62,7 @@ const useSearchMachineActor = () => {
     }
 
     const q = searchParams.get("q")
-    const filters = getFacetsForSearchRequest(searchParams as ReadonlyURLSearchParams)
+    const filters = transformSearchParamsIntoFilters(searchParams as ReadonlyURLSearchParams)
 
     if (!_.isEmpty(filters)) {
       actor.send({ type: "SET_INITIAL_FILTERS", filters })