Skip to content

Commit 6beaf0e

Browse files
mertbagtmertbagt
authored
Merge pull request #1766 from seatuna/ctoon/1753/upgrade-instantsearch-router
[1753] Replace custom routing with react-instantsearch-router-nextjs
2 parents fbbcddc + 58b11b4 commit 6beaf0e

File tree

6 files changed

+119
-62
lines changed

6 files changed

+119
-62
lines changed

‎components/search/bills/BillSearch.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,23 @@ import {
77
SearchBox,
88
useInstantSearch
99
} from "react-instantsearch"
10-
import { currentGeneralCourt } from "functions/src/shared"
10+
import { createInstantSearchRouterNext } from "react-instantsearch-router-nextjs"
11+
import singletonRouter from "next/router"
1112
import styled from "styled-components"
1213
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter"
14+
import { currentGeneralCourt } from "functions/src/shared"
1315
import { Col, Container, Row, Spinner } from "../../bootstrap"
1416
import { NoResults } from "../NoResults"
1517
import { ResultCount } from "../ResultCount"
1618
import { SearchContainer } from "../SearchContainer"
1719
import { SearchErrorBoundary } from "../SearchErrorBoundary"
18-
import { useRouting } from "../useRouting"
1920
import { BillHit } from "./BillHit"
2021
import { useBillRefinements } from "./useBillRefinements"
2122
import { SortBy, SortByWithConfigurationItem } from "../SortBy"
2223
import { getServerConfig, VirtualFilters } from "../common"
2324
import { useBillSort } from "./useBillSort"
2425
import { FC, useState } from "react"
26+
import { pathToSearchState, searchStateToUrl } from "../routingHelpers"
2527

2628
const searchClient = new TypesenseInstantSearchAdapter({
2729
server: getServerConfig(),
@@ -70,8 +72,16 @@ export const BillSearch = () => {
7072
}
7173
}}
7274
searchClient={searchClient}
73-
routing={useRouting()}
74-
future={{ preserveSharedStateOnUnmount: true }}
75+
routing={{
76+
router: createInstantSearchRouterNext({
77+
singletonRouter,
78+
routerOptions: {
79+
cleanUrlOnDispose: false,
80+
createURL: args => searchStateToUrl(args),
81+
parseURL: args => pathToSearchState(args)
82+
}
83+
})
84+
}}
7585
>
7686
<VirtualFilters type="bill" />
7787
<Layout items={items} />

‎components/search/routingHelpers.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { UiState } from "instantsearch.js"
2+
import QueryString from "qs"
3+
4+
export const searchStateToUrl = (createUrlArgs: {
5+
location: Location
6+
qsModule: typeof QueryString
7+
routeState: UiState
8+
}) => {
9+
const { location, qsModule: qs, routeState: searchState } = createUrlArgs
10+
const base = location.origin + location.pathname
11+
12+
const flagQueries = Object.fromEntries(
13+
Object.entries(qs.parse(window.location.search.slice(1))).filter(
14+
([key]) => !Object.keys(searchState).includes(key)
15+
)
16+
)
17+
18+
const query = qs.stringify({
19+
...searchState,
20+
...flagQueries
21+
})
22+
23+
return query ? `${base}?${query}` : base
24+
}
25+
26+
export const pathToSearchState = (parseUrlArgs: {
27+
location: Location
28+
qsModule: typeof QueryString
29+
}) => {
30+
const { location, qsModule: qs } = parseUrlArgs
31+
const path = location.href
32+
33+
return (
34+
path.includes("?") ? qs.parse(path.substring(path.indexOf("?") + 1)) : {}
35+
) as UiState
36+
}

‎components/search/testimony/TestimonySearch.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
SearchBox,
77
useInstantSearch
88
} from "react-instantsearch"
9+
import { createInstantSearchRouterNext } from "react-instantsearch-router-nextjs"
10+
import singletonRouter from "next/router"
911
import {
1012
StyledTabContent,
1113
StyledTabNav
@@ -23,10 +25,10 @@ import { SearchContainer } from "../SearchContainer"
2325
import { SearchErrorBoundary } from "../SearchErrorBoundary"
2426
import { SortBy } from "../SortBy"
2527
import { getServerConfig, VirtualFilters } from "../common"
26-
import { useRouting } from "../useRouting"
2728
import { TestimonyHit } from "./TestimonyHit"
2829
import { useTestimonyRefinements } from "./useTestimonyRefinements"
2930
import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext"
31+
import { pathToSearchState, searchStateToUrl } from "../routingHelpers"
3032

3133
const searchClient = new TypesenseInstantSearchAdapter({
3234
server: getServerConfig(),
@@ -63,8 +65,16 @@ export const TestimonySearch = () => (
6365
}
6466
}}
6567
searchClient={searchClient}
66-
routing={useRouting()}
67-
future={{ preserveSharedStateOnUnmount: true }}
68+
routing={{
69+
router: createInstantSearchRouterNext({
70+
singletonRouter,
71+
routerOptions: {
72+
cleanUrlOnDispose: false,
73+
createURL: args => searchStateToUrl(args),
74+
parseURL: args => pathToSearchState(args)
75+
}
76+
})
77+
}}
6878
>
6979
<VirtualFilters type="testimony" />
7080
<Layout />

‎components/search/useRouting.tsx

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@
118118
"react-i18next": "^13.2.2",
119119
"react-inlinesvg": "^3.0.1",
120120
"react-instantsearch": "^7.12.4",
121+
"react-instantsearch-router-nextjs": "^7.15.5",
121122
"react-is": "^18.2.0",
122123
"react-markdown": "^8.0.4",
123124
"react-overlays": "^5.1.1",

‎yarn.lock

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5291,6 +5291,13 @@ [email protected]:
52915291
dependencies:
52925292
"@algolia/events" "^4.0.1"
52935293

5294+
[email protected]:
5295+
version "3.24.3"
5296+
resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.24.3.tgz#9a358c3110bcd912e79ef606a6e7bdd7725d22ee"
5297+
integrity sha512-3QKg5lzSfUiPN8Hn1ViHEGv6PjK7i4SFEDLzwlSzPO/4mVOsyos7B7/AsEtFQW5KHHPiCq6DyJl+mzg7CYlEgw==
5298+
dependencies:
5299+
"@algolia/events" "^4.0.1"
5300+
52945301
all-contributors-cli@^6.20.5:
52955302
version "6.26.1"
52965303
resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-6.26.1.tgz#9f3358c9b9d0a7e66c8f84ffebf5a6432a859cae"
@@ -10401,6 +10408,13 @@ install-artifact-from-github@^1.3.5:
1040110408
resolved "https://registry.yarnpkg.com/install-artifact-from-github/-/install-artifact-from-github-1.3.5.tgz#88c96fe40e5eb21d45586d564208c648a1dbf38d"
1040210409
integrity sha512-gZHC7f/cJgXz7MXlHFBxPVMsvIbev1OQN1uKQYKVJDydGNm9oYf9JstbU4Atnh/eSvk41WtEovoRm+8IF686xg==
1040310410

10411+
[email protected]:
10412+
version "0.11.1"
10413+
resolved "https://registry.yarnpkg.com/instantsearch-ui-components/-/instantsearch-ui-components-0.11.1.tgz#664ca03f657079946e459af72fa8d2674799c466"
10414+
integrity sha512-ZqUbJYYgObQ47J08ftXV1KNC1vdEoiD4/49qrkCdW46kRzLxLgYXJGuEuk48DQwK4aBtIoccgTyfbMGfcqNjxg==
10415+
dependencies:
10416+
"@babel/runtime" "^7.1.2"
10417+
1040410418
[email protected]:
1040510419
version "0.9.0"
1040610420
resolved "https://registry.yarnpkg.com/instantsearch-ui-components/-/instantsearch-ui-components-0.9.0.tgz#f7ae71fe623d18eff32b73071749f31826cb7b89"
@@ -10431,6 +10445,24 @@ [email protected]:
1043110445
qs "^6.5.1 < 6.10"
1043210446
search-insights "^2.15.0"
1043310447

10448+
[email protected]:
10449+
version "4.78.1"
10450+
resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.78.1.tgz#cee799b920ba08c7c4e5af5ba591b86a1d80af1d"
10451+
integrity sha512-nDTWQ6DUxYzBZfkSxb/QJsYMZPPU8SGlGurn9147ABvA5Eumtxmk3Qy55EBMl0VxKVltGy3axAYMRB/gKIIHkg==
10452+
dependencies:
10453+
"@algolia/events" "^4.0.1"
10454+
"@types/dom-speech-recognition" "^0.0.1"
10455+
"@types/google.maps" "^3.55.12"
10456+
"@types/hogan.js" "^3.0.0"
10457+
"@types/qs" "^6.5.3"
10458+
algoliasearch-helper "3.24.3"
10459+
hogan.js "^3.0.2"
10460+
htm "^3.0.0"
10461+
instantsearch-ui-components "0.11.1"
10462+
preact "^10.10.0"
10463+
qs "^6.5.1 < 6.10"
10464+
search-insights "^2.17.2"
10465+
1043410466
instantsearch.js@^4.43.0:
1043510467
version "4.62.0"
1043610468
resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.62.0.tgz#68577f4f04866728f22441cbc7464c544678d342"
@@ -14805,6 +14837,24 @@ [email protected]:
1480514837
instantsearch.js "4.74.2"
1480614838
use-sync-external-store "^1.0.0"
1480714839

14840+
[email protected]:
14841+
version "7.15.5"
14842+
resolved "https://registry.yarnpkg.com/react-instantsearch-core/-/react-instantsearch-core-7.15.5.tgz#65d1edc440de8dc73d55230d13af8cbcf1724221"
14843+
integrity sha512-SFxiwwMf0f5F/8U0Y4ullvQ7bZtbYE516UOJbxaHhjV8yY0i8c22K4lrBFrYbxVRT7QAcp2wLGHiB7r/lD7eRA==
14844+
dependencies:
14845+
"@babel/runtime" "^7.1.2"
14846+
algoliasearch-helper "3.24.3"
14847+
instantsearch.js "4.78.1"
14848+
use-sync-external-store "^1.0.0"
14849+
14850+
react-instantsearch-router-nextjs@^7.15.5:
14851+
version "7.15.5"
14852+
resolved "https://registry.yarnpkg.com/react-instantsearch-router-nextjs/-/react-instantsearch-router-nextjs-7.15.5.tgz#a8b13bc5ad9bd8c5a689d48f2714eab6bed2514f"
14853+
integrity sha512-kn325Nl6QkZlkSuOXwKUOb56QkSsKes9XQdBLythKt2oZzzAfcaXSYzYsFEyj96cMYDLkRHhHvLhdyq4C8Xezg==
14854+
dependencies:
14855+
instantsearch.js "4.78.1"
14856+
react-instantsearch-core "7.15.5"
14857+
1480814858
react-instantsearch@^7.12.4:
1480914859
version "7.13.2"
1481014860
resolved "https://registry.yarnpkg.com/react-instantsearch/-/react-instantsearch-7.13.2.tgz#db84d04bd399596fb0078625bc75a6abc65e4bc6"
@@ -15607,6 +15657,11 @@ search-insights@^2.15.0:
1560715657
resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.17.2.tgz#d13b2cabd44e15ade8f85f1c3b65c8c02138629a"
1560815658
integrity sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==
1560915659

15660+
search-insights@^2.17.2:
15661+
version "2.17.3"
15662+
resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.17.3.tgz#8faea5d20507bf348caba0724e5386862847b661"
15663+
integrity sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==
15664+
1561015665
search-insights@^2.6.0:
1561115666
version "2.11.0"
1561215667
resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.11.0.tgz#0512ae3b801fed5ff3a2ae82840bf20ba29d82e5"

0 commit comments

Comments
 (0)