Skip to content

Commit

Permalink
Make search page static
Browse files Browse the repository at this point in the history
  • Loading branch information
@pookmish
pookmish committed Jan 9, 2025
1 parent 76dc636 commit a6dd4ee
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 90 deletions.
29 changes: 4 additions & 25 deletions app/search/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {H1} from "@components/elements/headers"
import {getAlgoliaCredential} from "@lib/gql/gql-queries"
import {IndexUiState} from "instantsearch.js/es/types/ui-state"
import AlgoliaSearchForm from "@components/algolia-search/algolia-search-form"

// https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
export const revalidate = false
export const dynamic = "force-static"

export const metadata = {
title: "Search",
Expand All @@ -15,39 +15,18 @@ export const metadata = {
noarchive: true,
},
}
const Page = async (props: {searchParams?: Promise<{[_key: string]: string}>}) => {
const searchParams = await props.searchParams
const Page = async () => {
const [appId, indexName, apiKey] = await getAlgoliaCredential()

const initialState: IndexUiState = {refinementList: {book_type: ["book"]}}
if (searchParams?.q) initialState.query = searchParams.q
if (searchParams?.subjects && initialState.refinementList) {
initialState.refinementList.book_subject = searchParams.subjects.split(",")
}

if (!!searchParams?.["only-books"] && initialState.refinementList) {
delete initialState.refinementList.book_type
}
if (searchParams?.["published-min"] || searchParams?.["published-max"]) {
initialState.range = {
book_published: (searchParams["published-min"] || "0") + ":" + (searchParams["published-max"] || "3000"),
}
}

return (
<div className="centered mt-32">
<div className="mx-auto 3xl:w-10/12">
<H1 className="rs-mb-2" id="page-title">
Search our site
</H1>

{appId && indexName && initialState && apiKey && (
<AlgoliaSearchForm
appId={appId}
searchIndex={indexName}
searchApiKey={apiKey}
initialUiState={initialState}
/>
{appId && indexName && apiKey && (
<AlgoliaSearchForm appId={appId} searchIndex={indexName} searchApiKey={apiKey} />
)}
<noscript>Please enable javascript to view search results</noscript>
</div>
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@next/third-parties": "15.1.4",
"@tailwindcss/container-queries": "^0.1.1",
"@types/node": "^22.10.5",
"@types/react": "^19.0.3",
"@types/react": "^19.0.4",
"@types/react-dom": "19.0.2",
"algoliasearch": "5.19.0",
"autoprefixer": "^10.4.20",
Expand All @@ -32,7 +32,7 @@
"graphql-tag": "^2.12.6",
"html-entities": "^2.5.2",
"html-react-parser": "^5.2.2",
"next": "^15.2.0-canary.0",
"next": "^15.2.0-canary.2",
"plaiceholder": "^3.0.0",
"postcss": "^8.4.49",
"qs": "^6.13.1",
Expand All @@ -46,7 +46,7 @@
"sharp": "^0.33.5",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2",
"typescript": "^5.7.3",
"usehooks-ts": "^3.1.0"
},
"devDependencies": {
Expand Down
56 changes: 46 additions & 10 deletions src/components/algolia-search/algolia-search-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {CheckIcon} from "@heroicons/react/20/solid"
import clsx from "clsx"
import {useBoolean} from "usehooks-ts"
import {twMerge} from "tailwind-merge"
import {ArrowPathIcon} from "@heroicons/react/16/solid"

type Props = {
appId: string
Expand All @@ -41,15 +42,48 @@ type Props = {
initialUiState?: IndexUiState
}

const AlgoliaSearchForm = ({appId, searchIndex, searchApiKey, initialUiState = {}}: Props) => {
const AlgoliaSearchForm = ({appId, searchIndex, searchApiKey}: Props) => {
const searchClient = useMemo(() => liteClient(appId, searchApiKey), [appId, searchApiKey])
const [initialState, setInitialState] = useState<IndexUiState>({refinementList: {book_type: ["book"]}})
const initialRender = useRef(true)

useEffect(() => {
// if (!initialRender) return
initialRender.current = false

const searchParams = new URLSearchParams(window.location.search)
const newInitialState: IndexUiState = {refinementList: {book_type: ["book"]}}

const query = searchParams.get("q")
const subjects = searchParams.get("subjects")
const onlyBooks = searchParams.get("only-books")
const minYear = searchParams.get("published-min")
const maxYear = searchParams.get("published-max")

if (query) newInitialState.query = query
if (subjects && newInitialState.refinementList) {
newInitialState.refinementList.book_subject = subjects.split(",")
}

if (onlyBooks == "false" && newInitialState.refinementList) {
delete newInitialState.refinementList.book_type
}
if (minYear || maxYear) {
newInitialState.range = {
book_published: (minYear || "0") + ":" + (maxYear || "3000"),
}
}
setInitialState(newInitialState)
}, [])

if (initialRender.current) return <ArrowPathIcon className="mx-auto animate-spin" width={50} />
return (
<div>
{/* @ts-expect-error React types don't match the library. */}
<InstantSearchNext
indexName={searchIndex}
searchClient={searchClient}
initialUiState={{[searchIndex]: initialUiState}}
initialUiState={{[searchIndex]: initialState}}
future={{preserveSharedStateOnUnmount: true}}
insights={true}
>
Expand All @@ -62,7 +96,8 @@ const AlgoliaSearchForm = ({appId, searchIndex, searchApiKey, initialUiState = {
const Form = ({searchIndex}: {searchIndex: string}) => {
const router = useRouter()
const searchParams = useSearchParams()
const {value: onlyBooks, setValue: setOnlyBooks} = useBoolean(true)

const {items: bookType, refine: refineBookType} = useRefinementList({attribute: "book_type"})

const inputRef = useRef<HTMLInputElement>(null)
const {query, refine} = useSearchBox({})
Expand All @@ -72,7 +107,7 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
attribute: "book_subject",
limit: 100,
})
const {refine: refineBookType} = useRefinementList({attribute: "book_type"})

const {
start: pubYearRange,
range: pubYearRangeBounds,
Expand Down Expand Up @@ -228,11 +263,8 @@ const Form = ({searchIndex}: {searchIndex: string}) => {
<input
className="peer sr-only"
type="checkbox"
checked={onlyBooks}
onChange={() => {
setOnlyBooks(!onlyBooks)
refineBookType("book")
}}
checked={bookType.find(item => item.value === "book")?.isRefined || false}
onChange={() => refineBookType("book")}
/>
<div className="h-6 w-16 rounded-full bg-press-sand-light shadow-inner peer-checked:bg-press-bay-light" />
<div className="absolute -left-1 -top-2 h-10 w-10 rounded-full border border-fog-dark bg-white shadow outline-8 outline-press-bay transition peer-checked:translate-x-full peer-checked:bg-press-grass peer-focus-visible:outline group-hocus:outline" />
Expand Down Expand Up @@ -465,7 +497,11 @@ const HitItem = ({
useLayoutEffect(() => {
if (focus) {
const reduceMotion = !!window.matchMedia("(prefers-reduced-motion: reduce)")?.matches
ref.current?.scrollIntoView({behavior: reduceMotion ? "instant" : "smooth", block: "end", inline: "nearest"})
ref.current?.scrollIntoView({
behavior: reduceMotion ? "instant" : "smooth",
block: "end",
inline: "nearest",
})
ref.current?.focus({preventScroll: true})
}
}, [focus])
Expand Down
104 changes: 52 additions & 52 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3611,10 +3611,10 @@ __metadata:
languageName: node
linkType: hard

"@next/env@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/env@npm:15.2.0-canary.0"
checksum: 10c0/62ead2020114aa0bdfc551bd6d2db0e7ce07ce047692ec5d98c6e7e5b89bbebd94bd582049f954c03b3bc7ef0932ba38960a41d90ba129f3b2c786c8d1dcf6df
"@next/env@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/env@npm:15.2.0-canary.2"
checksum: 10c0/8c25a6de60cdccf689dd741cd7724b369498784e36dcde34b48e995e63b2817b2ccf6c5621e803f468a43dbd80fd727709f85e3769fcf5e201e4c2989e55d69d
languageName: node
linkType: hard

Expand All @@ -3627,58 +3627,58 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-darwin-arm64@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-darwin-arm64@npm:15.2.0-canary.0"
"@next/swc-darwin-arm64@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-darwin-arm64@npm:15.2.0-canary.2"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard

"@next/swc-darwin-x64@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-darwin-x64@npm:15.2.0-canary.0"
"@next/swc-darwin-x64@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-darwin-x64@npm:15.2.0-canary.2"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard

"@next/swc-linux-arm64-gnu@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-linux-arm64-gnu@npm:15.2.0-canary.0"
"@next/swc-linux-arm64-gnu@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-linux-arm64-gnu@npm:15.2.0-canary.2"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard

"@next/swc-linux-arm64-musl@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-linux-arm64-musl@npm:15.2.0-canary.0"
"@next/swc-linux-arm64-musl@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-linux-arm64-musl@npm:15.2.0-canary.2"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard

"@next/swc-linux-x64-gnu@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-linux-x64-gnu@npm:15.2.0-canary.0"
"@next/swc-linux-x64-gnu@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-linux-x64-gnu@npm:15.2.0-canary.2"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard

"@next/swc-linux-x64-musl@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-linux-x64-musl@npm:15.2.0-canary.0"
"@next/swc-linux-x64-musl@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-linux-x64-musl@npm:15.2.0-canary.2"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard

"@next/swc-win32-arm64-msvc@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-win32-arm64-msvc@npm:15.2.0-canary.0"
"@next/swc-win32-arm64-msvc@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-win32-arm64-msvc@npm:15.2.0-canary.2"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard

"@next/swc-win32-x64-msvc@npm:15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "@next/swc-win32-x64-msvc@npm:15.2.0-canary.0"
"@next/swc-win32-x64-msvc@npm:15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "@next/swc-win32-x64-msvc@npm:15.2.0-canary.2"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
Expand Down Expand Up @@ -8165,7 +8165,7 @@ __metadata:
"@storybook/testing-library": "npm:^0.2.2"
"@tailwindcss/container-queries": "npm:^0.1.1"
"@types/node": "npm:^22.10.5"
"@types/react": "npm:^19.0.3"
"@types/react": "npm:^19.0.4"
"@types/react-dom": "npm:19.0.2"
"@types/react-slick": "npm:^0.23.13"
algoliasearch: "npm:5.19.0"
Expand All @@ -8185,7 +8185,7 @@ __metadata:
graphql-tag: "npm:^2.12.6"
html-entities: "npm:^2.5.2"
html-react-parser: "npm:^5.2.2"
next: "npm:^15.2.0-canary.0"
next: "npm:^15.2.0-canary.2"
plaiceholder: "npm:^3.0.0"
postcss: "npm:^8.4.49"
prettier: "npm:^3.4.2"
Expand All @@ -8205,7 +8205,7 @@ __metadata:
tailwind-merge: "npm:^2.6.0"
tailwindcss: "npm:^3.4.17"
tsconfig-paths-webpack-plugin: "npm:^4.2.0"
typescript: "npm:^5.7.2"
typescript: "npm:^5.7.3"
typescript-eslint: "npm:8.19.1"
usehooks-ts: "npm:^3.1.0"
languageName: unknown
Expand Down Expand Up @@ -12022,19 +12022,19 @@ __metadata:
languageName: node
linkType: hard

"next@npm:^15.2.0-canary.0":
version: 15.2.0-canary.0
resolution: "next@npm:15.2.0-canary.0"
"next@npm:^15.2.0-canary.2":
version: 15.2.0-canary.2
resolution: "next@npm:15.2.0-canary.2"
dependencies:
"@next/env": "npm:15.2.0-canary.0"
"@next/swc-darwin-arm64": "npm:15.2.0-canary.0"
"@next/swc-darwin-x64": "npm:15.2.0-canary.0"
"@next/swc-linux-arm64-gnu": "npm:15.2.0-canary.0"
"@next/swc-linux-arm64-musl": "npm:15.2.0-canary.0"
"@next/swc-linux-x64-gnu": "npm:15.2.0-canary.0"
"@next/swc-linux-x64-musl": "npm:15.2.0-canary.0"
"@next/swc-win32-arm64-msvc": "npm:15.2.0-canary.0"
"@next/swc-win32-x64-msvc": "npm:15.2.0-canary.0"
"@next/env": "npm:15.2.0-canary.2"
"@next/swc-darwin-arm64": "npm:15.2.0-canary.2"
"@next/swc-darwin-x64": "npm:15.2.0-canary.2"
"@next/swc-linux-arm64-gnu": "npm:15.2.0-canary.2"
"@next/swc-linux-arm64-musl": "npm:15.2.0-canary.2"
"@next/swc-linux-x64-gnu": "npm:15.2.0-canary.2"
"@next/swc-linux-x64-musl": "npm:15.2.0-canary.2"
"@next/swc-win32-arm64-msvc": "npm:15.2.0-canary.2"
"@next/swc-win32-x64-msvc": "npm:15.2.0-canary.2"
"@swc/counter": "npm:0.1.3"
"@swc/helpers": "npm:0.5.15"
busboy: "npm:1.6.0"
Expand Down Expand Up @@ -12079,7 +12079,7 @@ __metadata:
optional: true
bin:
next: dist/bin/next
checksum: 10c0/ded544f944fe484575a4a3e1b9c90142bc1dcabd66db2e2ab6cdee44464ae34bb6ba1bb0c2c1d74ceda893e984b5a16d7e8f86eea2c2bd4d358faa609cc0328a
checksum: 10c0/f4a648fca15db6c9ecbe0c6ab2e4398f3a62e9949bf96929f87cd96be7b32f195cedfad4e9201fee0c0620c773b6ea016ab941a4adb95625b07ab0f13835fa4e
languageName: node
linkType: hard

Expand Down Expand Up @@ -15473,23 +15473,23 @@ __metadata:
languageName: node
linkType: hard

"typescript@npm:^5.7.2":
version: 5.7.2
resolution: "typescript@npm:5.7.2"
"typescript@npm:^5.7.3":
version: 5.7.3
resolution: "typescript@npm:5.7.3"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 10c0/a873118b5201b2ef332127ef5c63fb9d9c155e6fdbe211cbd9d8e65877283797cca76546bad742eea36ed7efbe3424a30376818f79c7318512064e8625d61622
checksum: 10c0/b7580d716cf1824736cc6e628ab4cd8b51877408ba2be0869d2866da35ef8366dd6ae9eb9d0851470a39be17cbd61df1126f9e211d8799d764ea7431d5435afa
languageName: node
linkType: hard

"typescript@patch:typescript@npm%3A^5.7.2#optional!builtin<compat/typescript>":
version: 5.7.2
resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=5786d5"
"typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>":
version: 5.7.3
resolution: "typescript@patch:typescript@npm%3A5.7.3#optional!builtin<compat/typescript>::version=5.7.3&hash=5786d5"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 10c0/f3b8082c9d1d1629a215245c9087df56cb784f9fb6f27b5d55577a20e68afe2a889c040aacff6d27e35be165ecf9dca66e694c42eb9a50b3b2c451b36b5675cb
checksum: 10c0/6fd7e0ed3bf23a81246878c613423730c40e8bdbfec4c6e4d7bf1b847cbb39076e56ad5f50aa9d7ebd89877999abaee216002d3f2818885e41c907caaa192cc4
languageName: node
linkType: hard

Expand Down

0 comments on commit a6dd4ee

Please sign in to comment.