Make toggle filer work in both desktop and mobile

danskernesdigitalebibliotek · Nov 28, 2024 · 05adbf1 · 05adbf1
1 parent 73d0ae8
commit 05adbf1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
diff --git a/components/shared/searchFilters/SearchFiltersColumn.tsx b/components/shared/searchFilters/SearchFiltersColumn.tsx
@@ -5,6 +5,7 @@ import { AnimateChangeInHeight } from "@/components/shared/animateChangeInHeight
 import BadgeButton from "@/components/shared/badge/BadgeButton"
 import Icon from "@/components/shared/icon/Icon"
 import {
+  createToggleFilterCallback,
   facetTermIsSelected,
   getFacetTranslation,
   sortByActiveFacets,
@@ -32,6 +33,7 @@ const SearchFiltersColumn = ({
   const elementRef = useRef<HTMLDivElement | null>(null)
   const [hasOverflow, setHasOverflow] = useState(false)
   const { selectedFilters } = useSearchDataAndLoadingStates()
+  const toggleFilter = createToggleFilterCallback(actor)
 
   useEffect(() => {
     const el = elementRef.current
@@ -73,9 +75,7 @@ const SearchFiltersColumn = ({
               <BadgeButton
                 key={index}
                 ariaLabel={value.term}
-                onClick={() =>
-                  actor.send({ type: "TOGGLE_FILTER", name: facet.name, value: value.term })
-                }
+                onClick={() => toggleFilter({ name: facet.name, value: value.term })}
                 isActive={facetTermIsSelected({
                   facet: facet.name,
                   term: value.term,

diff --git a/components/shared/searchFilters/SearchFiltersMobile.tsx b/components/shared/searchFilters/SearchFiltersMobile.tsx
@@ -1,5 +1,6 @@
 import { useRouter, useSearchParams } from "next/navigation"
 import React, { useState } from "react"
+import { AnyActor, AnyEventObject } from "xstate"
 
 import {
   Accordion,
@@ -10,10 +11,10 @@ import {
 import BadgeButton from "@/components/shared/badge/BadgeButton"
 import Icon from "@/components/shared/icon/Icon"
 import {
+  createToggleFilterCallback,
   getActiveFilters,
   getFacetTranslation,
   shouldShowActiveFilters,
-  toggleFilter,
 } from "@/components/shared/searchFilters/helper"
 import {
   Sheet,
@@ -24,6 +25,7 @@ import {
 } from "@/components/shared/sheet/Sheet"
 import { SearchFacetFragment } from "@/lib/graphql/generated/fbi/graphql"
 import { TFilters } from "@/lib/machines/search/types"
+import useSearchMachineActor from "@/lib/machines/search/useSearchMachineActor"
 
 import { Button } from "../button/Button"
 
@@ -35,6 +37,8 @@ const SearchFiltersMobile = ({ facets }: SearchFiltersMobileProps) => {
   const router = useRouter()
   const searchParams = useSearchParams()
   const [isSheetOpen, setIsSheetOpen] = useState(false)
+  const actor = useSearchMachineActor()
+  const toggleFilter = createToggleFilterCallback(actor)
 
   return (
     <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
@@ -59,7 +63,7 @@ const SearchFiltersMobile = ({ facets }: SearchFiltersMobileProps) => {
                 return (
                   <BadgeButton
                     onClick={() => {
-                      toggleFilter(facet.name, value.term, router)
+                      toggleFilter({ name: facet.name, value: value.term })
                     }}
                     key={value.term}
                     ariaLabel={value.term}
@@ -90,7 +94,7 @@ const SearchFiltersMobile = ({ facets }: SearchFiltersMobileProps) => {
                         <BadgeButton
                           onClick={() => {
                             setIsSheetOpen(false)
-                            toggleFilter(facet.name, value.term, router)
+                            toggleFilter({ name: facet.name, value: value.term })
                           }}
                           isActive={!!searchParams.getAll(facet.name).includes(value.term)}
                           key={index}

diff --git a/components/shared/searchFilters/helper.ts b/components/shared/searchFilters/helper.ts
@@ -1,32 +1,16 @@
 import { flatten } from "lodash"
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime"
 import { ReadonlyURLSearchParams } from "next/navigation"
+import { AnyActor, AnyEventObject } from "xstate"
 
 import goConfig from "@/lib/config/goConfig"
 import { FacetFieldEnum, SearchFacetFragment } from "@/lib/graphql/generated/fbi/graphql"
 import { TContext, TFilters } from "@/lib/machines/search/types"
 
-export const toggleFilter = (filterName: string, value: string, router: AppRouterInstance) => {
-  const searchParams = new URLSearchParams(window.location.search)
-
-  if (searchParams.has(filterName)) {
-    const filterValues = [...searchParams.getAll(filterName)]
-    searchParams.delete(filterName)
-
-    if (filterValues.includes(value)) {
-      filterValues.splice(filterValues.indexOf(value), 1)
-    } else {
-      filterValues.push(value)
-    }
-    filterValues.forEach(filterValue => {
-      searchParams.append(filterName, filterValue)
-    })
-  } else {
-    searchParams.append(filterName, value)
+export const createToggleFilterCallback =
+  (actor: AnyActor) =>
+  ({ name, value }: { name: string; value: string }) => {
+    actor.send({ type: "TOGGLE_FILTER", name, value } as AnyEventObject)
   }
-  const searchParamsString = searchParams.toString()
-  router.push("/search" + searchParamsString ? `?${searchParamsString}` : "", { scroll: false })
-}
 
 export const sortByActiveFacets = (facet: SearchFacetFragment, selectedFilters: TFilters) => {
   return [...facet.values].sort((a, b) => {