From 8bac70b1b126805daed358fee0ca98505f789d84 Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Thu, 31 Oct 2024 13:56:34 +0100
Subject: [PATCH 1/4] Remove unused getEnvironment import

---
 app/layout.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index cd13bab8..485a0afe 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,7 +5,6 @@ import Footer from "@/components/global/footer/Footer"
 import GridHelper from "@/components/global/gridHelper/GridHelper"
 import Header from "@/components/global/header/Header"
 import Theme from "@/components/global/theme/Theme"
-import { getEnvironment } from "@/lib/helpers/helper.env"
 import ReactQueryProvider from "@/lib/providers/ReactQueryProvider"
 import "@/styles/globals.css"
 

From 9ae201d78b5a32bc3340610cb1365501e0e9447f Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Thu, 31 Oct 2024 13:57:59 +0100
Subject: [PATCH 2/4] Fix the useSearchPArams error when building

NB: This is a quick fix in order to be able to build the app!!
We need to revise these changes al evalute when we need the suspenses
and when not.
---
 app/search/page.tsx                             |  7 +++++--
 components/global/header/Header.tsx             |  6 ++++--
 .../shared/searchFilters/SearchFilterBar.tsx    | 17 +++++++++--------
 .../searchFilters/SearchFiltersColumn.tsx       |  8 +++++---
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/app/search/page.tsx b/app/search/page.tsx
index ba2c7ba0..c50852a4 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -1,4 +1,5 @@
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
+import { Suspense } from "react"
 
 import SearchPageLayout from "@/components/pages/searchPageLayout/SearchPageLayout"
 import getQueryClient from "@/lib/getQueryClient"
@@ -12,7 +13,9 @@ const Page = async ({ searchParams: { q } }: { searchParams: { q: string } }) =>
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <SearchPageLayout searchQuery={q} />
+      <Suspense fallback={<p>Loading...</p>}>
+        <SearchPageLayout searchQuery={q} />
+      </Suspense>
     </HydrationBoundary>
   )
 }
diff --git a/components/global/header/Header.tsx b/components/global/header/Header.tsx
index 340f8aab..69ec264e 100644
--- a/components/global/header/Header.tsx
+++ b/components/global/header/Header.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Suspense } from "react"
 
 import { Button } from "@/components/shared/button/Button"
 import DarkModeToggle from "@/components/shared/darkModeToggle/DarkModeToggle"
@@ -30,7 +30,9 @@ function Header() {
       <div className="h-navigation-search-height">
         <div className="content-container">
           <div className="flex h-full w-full items-center">
-            <SearchInput placeholder="Søg" />
+            <Suspense fallback={<p>Loading...</p>}>
+              <SearchInput placeholder="Søg" />
+            </Suspense>
           </div>
         </div>
       </div>
diff --git a/components/shared/searchFilters/SearchFilterBar.tsx b/components/shared/searchFilters/SearchFilterBar.tsx
index 7bd85694..5e85846e 100644
--- a/components/shared/searchFilters/SearchFilterBar.tsx
+++ b/components/shared/searchFilters/SearchFilterBar.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { Suspense, useState } from "react"
 
 import { SearchFacetFragment } from "@/lib/graphql/generated/fbi/graphql"
 
@@ -21,13 +21,14 @@ const SearchFilterBar = ({ facets }: SearchFilterBarProps) => {
         {facets.map((facet, index) => {
           const isLast = index === facets.length - 1
           return (
-            <SearchFiltersColumn
-              facet={facet}
-              isLast={isLast}
-              key={facet.name}
-              isExpanded={isExpanded}
-              setIsExpanded={setIsExpanded}
-            />
+            <Suspense key={facet.name} fallback={<p>Loading...</p>}>
+              <SearchFiltersColumn
+                facet={facet}
+                isLast={isLast}
+                isExpanded={isExpanded}
+                setIsExpanded={setIsExpanded}
+              />
+            </Suspense>
           )
         })}
       </div>
diff --git a/components/shared/searchFilters/SearchFiltersColumn.tsx b/components/shared/searchFilters/SearchFiltersColumn.tsx
index 13a86884..45a11434 100644
--- a/components/shared/searchFilters/SearchFiltersColumn.tsx
+++ b/components/shared/searchFilters/SearchFiltersColumn.tsx
@@ -1,9 +1,11 @@
+import { useRouter, useSearchParams } from "next/navigation"
+import React, { useEffect, useRef, useState } from "react"
+
 import { SearchFacetFragment } from "@/lib/graphql/generated/fbi/graphql"
 import { cn } from "@/lib/helpers/helper.cn"
-import React, { useEffect, useRef, useState } from "react"
-import { mapFacetsToFilters, mapFilterNameToTranslation, toggleFilter } from "./helper"
-import { useRouter, useSearchParams } from "next/navigation"
+
 import Icon from "../icon/Icon"
+import { mapFacetsToFilters, mapFilterNameToTranslation, toggleFilter } from "./helper"
 
 type SearchFiltersColumnProps = {
   facet: SearchFacetFragment

From af90b7cbde385bc216832fd6ecfe63b84253dd19 Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Thu, 31 Oct 2024 13:59:14 +0100
Subject: [PATCH 3/4] Fix dependency array problems in search components

---
 components/pages/searchPageLayout/SearchPageLayout.tsx | 5 ++++-
 components/shared/searchInput/SearchInput.tsx          | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/pages/searchPageLayout/SearchPageLayout.tsx b/components/pages/searchPageLayout/SearchPageLayout.tsx
index 4fd22098..bf2fc8bf 100644
--- a/components/pages/searchPageLayout/SearchPageLayout.tsx
+++ b/components/pages/searchPageLayout/SearchPageLayout.tsx
@@ -118,6 +118,9 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
     if (isInView) {
       handleLoadMore()
     }
+    // We choose to ignore the eslint warning below
+    // because we do not want to add the handleMore callback which changes on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInView])
 
   // TODO: consider finding a better way to control fetching of data without using the useEffects below
@@ -137,7 +140,7 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
       setFacetFilters(facetsForSearchRequest)
       setCurrentPage(0)
     }
-  }, [facetsForSearchRequest])
+  }, [facetFilters, facetsForSearchRequest])
 
   const facetData = dataFacets?.search?.facets
   const hitcount = data?.pages?.[0]?.search.hitcount ?? 0
diff --git a/components/shared/searchInput/SearchInput.tsx b/components/shared/searchInput/SearchInput.tsx
index cf733d0b..0a8938bb 100644
--- a/components/shared/searchInput/SearchInput.tsx
+++ b/components/shared/searchInput/SearchInput.tsx
@@ -24,6 +24,9 @@ const SearchInput = ({ className, placeholder }: SearchInputProps) => {
     return () => {
       window.removeEventListener("keydown", handleKeydown)
     }
+    // We choose to ignore the eslint warning below
+    // because we do not want to add the handleKeydown callback which changes on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {

From 5fa9920bd5a1c67ab43ceb261f8426b9d3e2dedd Mon Sep 17 00:00:00 2001
From: Mikkel Jakobsen <jakobsen.mikkel@gmail.com>
Date: Thu, 31 Oct 2024 14:17:33 +0100
Subject: [PATCH 4/4] Remove unused helper

Got added by accident
---
 components/pages/searchPageLayout/helper.ts | 49 ---------------------
 1 file changed, 49 deletions(-)
 delete mode 100644 components/pages/searchPageLayout/helper.ts

diff --git a/components/pages/searchPageLayout/helper.ts b/components/pages/searchPageLayout/helper.ts
deleted file mode 100644
index 2dca60f4..00000000
--- a/components/pages/searchPageLayout/helper.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ReadonlyURLSearchParams } from "next/navigation"
-
-import goConfig from "@/lib/config/config"
-import { FacetFieldEnum, SearchFiltersInput } from "@/lib/graphql/generated/fbi/graphql"
-
-export const getSearchQueryArguments = ({
-  q,
-  currentPage,
-  facetFilters,
-}: {
-  q: string
-  currentPage: number
-  facetFilters: SearchFiltersInput
-}) => {
-  const limit = goConfig<number>("search.item.limit")
-  return {
-    q: { all: q },
-    offset: currentPage * limit,
-    limit: limit,
-    filters: {
-      branchId: goConfig<`${number}`[]>("search.branch.ids"),
-      ...facetFilters,
-    },
-  }
-}
-
-export const getFacetsForSearchRequest = ({
-  facetDefinitions,
-  searchParams,
-  mapFacetsToFilters,
-}: {
-  facetDefinitions: FacetFieldEnum[]
-  searchParams: ReadonlyURLSearchParams
-  mapFacetsToFilters: Record<FacetFieldEnum, keyof SearchFiltersInput>
-}) => {
-  return facetDefinitions.reduce(
-    (acc: SearchFiltersInput, facetDefinition) => {
-      const values = searchParams.getAll(facetDefinition)
-      if (values.length > 0) {
-        return {
-          ...acc,
-          [mapFacetsToFilters[facetDefinition]]: [...values],
-        }
-      }
-      return acc
-    },
-    {} as { [key: string]: keyof SearchFiltersInput[] }
-  )
-}