3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-13 16:23:34 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: stable callbacks in useSearchQuery + refactor (#5751)

Browse source
This commit is contained in:
Sébastien Lorber 2021-10-20 17:36:33 +02:00 • committed by GitHub
parent 098f210890
commit d799405ace
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
View file

@ -129,8 +129,7 @@ function SearchPage() {
const documentsFoundPlural = useDocumentsFoundPlural();
const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
const {searchValue, updateSearchPath} = useSearchQuery();
const [searchQuery, setSearchQuery] = useState(searchValue);
const {searchQuery, setSearchQuery} = useSearchQuery();
const initialSearchResultState = {
items: [],
query: null,
@ -303,8 +302,6 @@ function SearchPage() {
}, [loaderRef]);
useEffect(() => {
updateSearchPath(searchQuery);
searchResultStateDispatcher({type: 'reset'});
if (searchQuery) {
@ -314,12 +311,7 @@ function SearchPage() {
makeSearch();
}, 300);
}
}, [
searchQuery,
docsSearchVersionsHelpers.searchVersions,
updateSearchPath,
makeSearch,
]);
}, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]);
useEffect(() => {
if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@ -329,12 +321,6 @@ function SearchPage() {
makeSearch(searchResultState.lastPage);
}, [makeSearch, searchResultState.lastPage]);
useEffect(() => {
if (searchValue && searchValue !== searchQuery) {
setSearchQuery(searchValue);
}
}, [searchQuery, searchValue]);
return (
<Layout wrapperClassName="search-page-wrapper">
<Head>

49
packages/docusaurus-theme-search-algolia/src/theme/hooks/useSearchQuery.js
View file

@ -5,27 +5,34 @@
* LICENSE file in the root directory of this source tree.
*/
import {useHistory, useLocation} from '@docusaurus/router';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import {useHistory} from '@docusaurus/router';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useCallback, useEffect, useState} from 'react';
const SEARCH_PARAM_QUERY = 'q';
function useSearchQuery() {
const history = useHistory();
const location = useLocation();
const {siteConfig: {baseUrl} = {}} = useDocusaurusContext();
const {
siteConfig: {baseUrl},
} = useDocusaurusContext();
return {
searchValue:
(ExecutionEnvironment.canUseDOM &&
new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
'',
updateSearchPath: (searchValue) => {
const searchParams = new URLSearchParams(location.search);
const [searchQuery, setSearchQueryState] = useState('');
if (searchValue) {
searchParams.set(SEARCH_PARAM_QUERY, searchValue);
// Init search query just after React hydration
useEffect(() => {
const searchQueryStringValue =
new URLSearchParams(window.location.search).get(SEARCH_PARAM_QUERY) ?? '';
setSearchQueryState(searchQueryStringValue);
}, []);
const setSearchQuery = useCallback(
(newSearchQuery) => {
const searchParams = new URLSearchParams(window.location.search);
if (newSearchQuery) {
searchParams.set(SEARCH_PARAM_QUERY, newSearchQuery);
} else {
searchParams.delete(SEARCH_PARAM_QUERY);
}
@ -33,11 +40,23 @@ function useSearchQuery() {
history.replace({
search: searchParams.toString(),
});
setSearchQueryState(newSearchQuery);
},
generateSearchPageLink: (searchValue) => {
[history],
);
const generateSearchPageLink = useCallback(
(targetSearchQuery) => {
// Refer to https://github.com/facebook/docusaurus/pull/2838
return `${baseUrl}search?q=${encodeURIComponent(searchValue)}`;
return `${baseUrl}search?q=${encodeURIComponent(targetSearchQuery)}`;
},
[baseUrl],
);
return {
searchQuery,
setSearchQuery,
generateSearchPageLink,
};
}