fix(v2): keep DocSearch state on remounts (#3297)

* fix(v2): keep DocSearch state on remounts

* fix: memoize `transformSearchClient`
This commit is contained in:
François Chalifour 2020-08-17 14:58:02 +02:00 committed by GitHub
parent 473d263469
commit 51f07608fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 51 deletions

View file

@ -8,7 +8,7 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@docsearch/react": "^1.0.0-alpha.25", "@docsearch/react": "^1.0.0-alpha.27",
"@hapi/joi": "^17.1.1", "@hapi/joi": "^17.1.1",
"algoliasearch": "^4.0.0", "algoliasearch": "^4.0.0",
"algoliasearch-helper": "^3.1.1", "algoliasearch-helper": "^3.1.1",

View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
import React, {useState, useRef, useCallback} from 'react'; import React, {useState, useRef, useCallback, useMemo} from 'react';
import {createPortal} from 'react-dom'; import {createPortal} from 'react-dom';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useHistory} from '@docusaurus/router'; import {useHistory} from '@docusaurus/router';
@ -73,6 +73,44 @@ function DocSearch(props) {
[importDocSearchModalIfNeeded, setIsOpen, setInitialQuery], [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
); );
const navigator = useRef({
navigate({suggestionUrl}) {
history.push(suggestionUrl);
},
}).current;
const transformItems = useRef((items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL.
// Alternatively, we can use `new URL(item.url)` but it's not
// supported in IE.
const a = document.createElement('a');
a.href = item.url;
return {
...item,
url: withBaseUrl(`${a.pathname}${a.hash}`),
};
});
}).current;
const resultsFooterComponent = useMemo(
() => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />,
[onClose],
);
const transformSearchClient = useCallback(
(searchClient) => {
searchClient.addAlgoliaAgent(
'docusaurus',
siteMetadata.docusaurusVersion,
);
return searchClient;
},
[siteMetadata.docusaurusVersion],
);
useDocSearchKeyboardEvents({ useDocSearchKeyboardEvents({
isOpen, isOpen,
onOpen, onOpen,
@ -108,37 +146,11 @@ function DocSearch(props) {
onClose={onClose} onClose={onClose}
initialScrollY={window.scrollY} initialScrollY={window.scrollY}
initialQuery={initialQuery} initialQuery={initialQuery}
navigator={{ navigator={navigator}
navigate({suggestionUrl}) { transformItems={transformItems}
history.push(suggestionUrl);
},
}}
transformItems={(items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL.
// Alternatively, we can use `new URL(item.url)` but it's not
// supported in IE.
const a = document.createElement('a');
a.href = item.url;
return {
...item,
url: withBaseUrl(`${a.pathname}${a.hash}`),
};
});
}}
hitComponent={Hit} hitComponent={Hit}
resultsFooterComponent={(footerProps) => ( resultsFooterComponent={resultsFooterComponent}
<ResultsFooter {...footerProps} onClose={onClose} /> transformSearchClient={transformSearchClient}
)}
transformSearchClient={(searchClient) => {
searchClient.addAlgoliaAgent(
'docusaurus',
siteMetadata.docusaurusVersion,
);
return searchClient;
}}
{...props} {...props}
/>, />,
document.body, document.body,

View file

@ -1771,19 +1771,19 @@
enabled "2.0.x" enabled "2.0.x"
kuler "^2.0.0" kuler "^2.0.0"
"@docsearch/css@^1.0.0-alpha.25": "@docsearch/css@^1.0.0-alpha.27":
version "1.0.0-alpha.25" version "1.0.0-alpha.27"
resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.25.tgz#08eb99fc8364c71427e0885cb09892c607e0617a" resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.27.tgz#7f50985869ebab10ffb901b94ed7545269a3393c"
integrity sha512-Mq2rFnq/SyQhDah/YjvE0dLnz8JozncOCKPqjbfyt/Q5sJwJhNfUlrZhvk2OgOirKX4izYrFq4PZgGKDokiEgQ== integrity sha512-Kw6R/gAHMZW2tKZO2a0gd3I8Yf6bJgTk3Dp+L0ZFrvEHEh8v3yQKvoxVify3ML9YVyvCxxAPQQuF9u3JNUwvXw==
"@docsearch/react@^1.0.0-alpha.25": "@docsearch/react@^1.0.0-alpha.27":
version "1.0.0-alpha.25" version "1.0.0-alpha.27"
resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.25.tgz#e3bf76e888b28c1b37c6412fd99939b83a10eca6" resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.27.tgz#eae61d648ddc3667c5dee82c4cd9d47bf35a3c85"
integrity sha512-s2hwj47lcpNBZVYojhbMZZ+grzm1AFFcbkgJYAl97rgzvG5X7lr8sGvzEIgjlE64t4T6FWtrM/B8XxZq1K9SxA== integrity sha512-jcgUHZsrNNRsaVsplqKhXWheh4VzRTCdhsPuVhJMRvfsFUqXEPo/7kVt5xIybtOj9u+/FVdeSO+APJEE2rakYA==
dependencies: dependencies:
"@docsearch/css" "^1.0.0-alpha.25" "@docsearch/css" "^1.0.0-alpha.27"
"@francoischalifour/autocomplete-core" "^1.0.0-alpha.25" "@francoischalifour/autocomplete-core" "^1.0.0-alpha.27"
"@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.25" "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.27"
algoliasearch "^4.0.0" algoliasearch "^4.0.0"
"@endiliey/react-ideal-image@^0.0.11": "@endiliey/react-ideal-image@^0.0.11":
@ -1883,15 +1883,15 @@
unique-filename "^1.1.1" unique-filename "^1.1.1"
which "^1.3.1" which "^1.3.1"
"@francoischalifour/autocomplete-core@^1.0.0-alpha.25": "@francoischalifour/autocomplete-core@^1.0.0-alpha.27":
version "1.0.0-alpha.25" version "1.0.0-alpha.27"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.25.tgz#16a2a88ec0919b90fa3378f1f3652ff8f9df2a05" resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.27.tgz#bd85058bf0ef02e9f9a57c7973c705edc2a25c41"
integrity sha512-wQjL1NjgGGlbeTa+fg1+HNoUiJ0+a32xEE+8wKKHu1FX4dH/FRMkn8sEulsq6QHZyg41YMeJkOUHUwBnNtyWeA== integrity sha512-kpKbtrjMt9l1HIFFmmH0u88633/1oBD+mEjKg1EIRJ1zQCeOBxlQvIXZ3X6GEoud79QjLVoc8HD4HN1OMRt+OA==
"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.25": "@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.27":
version "1.0.0-alpha.25" version "1.0.0-alpha.27"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.25.tgz#703eb85d4f55eab66fd9cf5f18749ee830093f78" resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.27.tgz#29de9939274887363f6e3f41078b2ee3e9c56493"
integrity sha512-tXrNYJ5my5LzphHfVLzSkuH2XMOn8CnLkG/FkaoiNeFQ97NpYrI0LOQxOPloalz2/dulgvvSqIg85XGzjAKfEg== integrity sha512-Mp4lhlLd8vuLOCXtuw8UTUaJXGRrXYL7AN/ZmhaMwqyL9e9XSqLlcv82EWP0NAMcoz/I1E1C709h4jnbnN4llw==
"@hapi/address@2.x.x": "@hapi/address@2.x.x":
version "2.1.4" version "2.1.4"