From bc1a3ca0a93187b1e2f8f80cf0ea26213cc5bbfe Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Fri, 18 Oct 2024 10:11:07 +0200
Subject: [PATCH] fix: missing export in search input

---
 components/global/header/Header.tsx           |   2 +-
 .../searchPageLayout/SearchPageLayout.tsx     | 130 +++++++++---------
 components/shared/searchInput/SearchInput.tsx |   4 +-
 tailwind.config.ts                            |   1 +
 4 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/components/global/header/Header.tsx b/components/global/header/Header.tsx
index a9e98b69..53a90e88 100644
--- a/components/global/header/Header.tsx
+++ b/components/global/header/Header.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import { Button } from "@/components/shared/button/Button"
 import DarkModeToggle from "@/components/shared/darkModeToggle/DarkModeToggle"
 import Icon from "@/components/shared/icon/Icon"
-import { SearchInput } from "@/components/shared/searchInput/SearchInput"
+import SearchInput from "@/components/shared/searchInput/SearchInput"
 
 function Header() {
   return (
diff --git a/components/pages/searchPageLayout/SearchPageLayout.tsx b/components/pages/searchPageLayout/SearchPageLayout.tsx
index 93ba5a7b..4a1c51aa 100644
--- a/components/pages/searchPageLayout/SearchPageLayout.tsx
+++ b/components/pages/searchPageLayout/SearchPageLayout.tsx
@@ -1,65 +1,65 @@
-'use client'
+"use client"
 
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams } from "next/navigation"
+import { useEffect } from "react"
+
+import SearchFilterBar from "./SearchFilterBar"
 
 import {
   FacetField,
   FacetValue,
   useSearchFacetsQuery,
-  useSearchWithPaginationQuery
-} from '@/lib/graphql/generated/fbi/graphql'
-import SearchFilterBar from './SearchFilterBar'
-import { useEffect } from 'react'
+  useSearchWithPaginationQuery,
+} from "@/lib/graphql/generated/fbi/graphql"
 
 const facetDefinitions = [
-  'materialTypesGeneral',
-  'mainLanguages',
-  'age',
-  'lix',
-  'subjects',
-  'let'
+  "materialTypesGeneral",
+  "mainLanguages",
+  "age",
+  "lix",
+  "subjects",
+  "let",
 ] as FacetField[]
 
+// TODO: Add branches though endpoint
 const branchIds = [
-  '775120',
-  '775122',
-  '775144',
-  '775167',
-  '775146',
-  '775168',
-  '751010',
-  '775147',
-  '751032',
-  '751031',
-  '775126',
-  '751030',
-  '775149',
-  '775127',
-  '775160',
-  '775162',
-  '775140',
-  '751009',
-  '751029',
-  '751027',
-  '751026',
-  '751025',
-  '775133',
-  '751024',
-  '775100',
-  '775170',
-  '775150',
-  '775130'
+  "775120",
+  "775122",
+  "775144",
+  "775167",
+  "775146",
+  "775168",
+  "751010",
+  "775147",
+  "751032",
+  "751031",
+  "775126",
+  "751030",
+  "775149",
+  "775127",
+  "775160",
+  "775162",
+  "775140",
+  "751009",
+  "751029",
+  "751027",
+  "751026",
+  "751025",
+  "775133",
+  "751024",
+  "775100",
+  "775170",
+  "775150",
+  "775130",
 ] as string[]
 
-export type FilterItemTerm = Omit<FacetValue, '__typename'>
+export type FilterItemTerm = Omit<FacetValue, "__typename">
 
-export const formatFacetTerms = (filters: {
-  [key: string]: { [key: string]: FilterItemTerm }
-}) => {
+export const formatFacetTerms = (filters: { [key: string]: { [key: string]: FilterItemTerm } }) => {
   return Object.keys(filters).reduce(
     (acc, key) => ({
       ...acc,
-      [key]: Object.keys(filters[key])
+      [key]: Object.keys(filters[key]),
     }),
     {}
   )
@@ -67,7 +67,7 @@ export const formatFacetTerms = (filters: {
 
 const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
   const searchParams = useSearchParams()
-  const q = searchQuery || searchParams.get('q') || ''
+  const q = searchQuery || searchParams.get("q") || ""
 
   const facetsForSearchRequest = facetDefinitions.reduce(
     (acc, facetDefinition) => {
@@ -75,7 +75,7 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
       if (value) {
         return {
           ...acc,
-          [facetDefinition]: [value]
+          [facetDefinition]: [value],
         }
       }
 
@@ -84,34 +84,30 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
     {} as { [key: string]: string[] }
   )
 
-  console.log('facetsForSearchRequest', facetsForSearchRequest)
-
-  const { data, error, isLoading, isPending, isFetching } =
-    useSearchWithPaginationQuery({
-      q: { all: q },
-      offset: 0,
-      limit: 10,
-      filters: {
-        // TODO: Add filters though endpoint
-        branchId: branchIds,
-        ...facetsForSearchRequest
-      }
-    })
+  const { data, error, isLoading, isPending, isFetching } = useSearchWithPaginationQuery({
+    q: { all: q },
+    offset: 0,
+    limit: 10,
+    filters: {
+      branchId: branchIds,
+      ...facetsForSearchRequest,
+    },
+  })
 
   const {
     data: facetData,
     error: facetError,
     isLoading: facetIsLoading,
     isPending: facetIsPending,
-    isFetching: facetIsFetching
+    isFetching: facetIsFetching,
   } = useSearchFacetsQuery({
     q: { all: q },
     facetLimit: 100,
     facets: facetDefinitions,
     filters: {
       branchId: branchIds,
-      ...facetsForSearchRequest
-    }
+      ...facetsForSearchRequest,
+    },
   })
 
   useEffect(() => {
@@ -123,9 +119,9 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
   }
 
   return (
-    <div>
+    <div className="content-container">
       <SearchFilterBar facets={facetData?.search?.facets || []} />
-      <h1 className="text-typo-heading-2">{`Viser resultater for "${q}" ${data?.search.hitcount ? '(' + data?.search.hitcount + ')' : ''}`}</h1>
+      <h1 className="text-typo-heading-2">{`Viser resultater for "${q}" ${data?.search.hitcount ? "(" + data?.search.hitcount + ")" : ""}`}</h1>
       {isFetching && <p>isFetching...</p>}
       {isLoading && <p>isLoading...</p>}
       {isPending && <p>isPending...</p>}
@@ -133,8 +129,8 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
       <div className="gap-grid-gap-x grid grid-cols-3">
         {data?.search?.hitcount &&
           data?.search?.hitcount > 0 &&
-          data.search.works.map((work) => (
-            <div key={work.workId} className="bg-background-foreground p-4">
+          data.search.works.map(work => (
+            <div key={work.workId} className="bg-background-overlay p-4">
               <p>{work.titles.full}</p>
 
               <pre>{JSON.stringify(work, null, 2)}</pre>
diff --git a/components/shared/searchInput/SearchInput.tsx b/components/shared/searchInput/SearchInput.tsx
index 8fa63c86..5abc96aa 100644
--- a/components/shared/searchInput/SearchInput.tsx
+++ b/components/shared/searchInput/SearchInput.tsx
@@ -46,7 +46,7 @@ const SearchInput = ({ className }: { className?: string }) => {
       <input
         ref={inputRef}
         className={cn(
-          `text-sm file:text-sm bg-background-foreground flex h-[50px] w-full rounded-base px-5
+          `text-sm file:text-sm flex h-[50px] w-full rounded-base bg-background-overlay px-5
           text-typo-subtitle-lg shadow-sm transition-colors file:border-0 file:bg-transparent file:font-medium
           file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none
           focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 lg:h-20`,
@@ -64,3 +64,5 @@ const SearchInput = ({ className }: { className?: string }) => {
   )
 }
 SearchInput.displayName = "SearchInput"
+
+export default SearchInput
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5c5d99f2..f27fa131 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -261,6 +261,7 @@ const config: Config = {
         "grid-column": "var(--grid-column)",
         "grid-column-half": "calc(var(--grid-column)/2)",
         "grid-column-quarter": "calc(var(--grid-column)/4)",
+        "grid-gap-x": "var(--grid-gap-x)",
       },
       boxShadow: {
         button: "2px 2px 0 0px var(--foreground)",