3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-14 08:42:31 +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 documentsFoundPlural = useDocumentsFoundPlural();
const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers(); const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
const {searchValue, updateSearchPath} = useSearchQuery(); const {searchQuery, setSearchQuery} = useSearchQuery();
const [searchQuery, setSearchQuery] = useState(searchValue);
const initialSearchResultState = { const initialSearchResultState = {
items: [], items: [],
query: null, query: null,
@ -303,8 +302,6 @@ function SearchPage() {
}, [loaderRef]); }, [loaderRef]);
useEffect(() => { useEffect(() => {
updateSearchPath(searchQuery);
searchResultStateDispatcher({type: 'reset'}); searchResultStateDispatcher({type: 'reset'});
if (searchQuery) { if (searchQuery) {
@ -314,12 +311,7 @@ function SearchPage() {
makeSearch(); makeSearch();
}, 300); }, 300);
} }
}, [ }, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]);
searchQuery,
docsSearchVersionsHelpers.searchVersions,
updateSearchPath,
makeSearch,
]);
useEffect(() => { useEffect(() => {
if (!searchResultState.lastPage || searchResultState.lastPage === 0) { if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@ -329,12 +321,6 @@ function SearchPage() {
makeSearch(searchResultState.lastPage); makeSearch(searchResultState.lastPage);
}, [makeSearch, searchResultState.lastPage]); }, [makeSearch, searchResultState.lastPage]);
useEffect(() => {
if (searchValue && searchValue !== searchQuery) {
setSearchQuery(searchValue);
}
}, [searchQuery, searchValue]);
return ( return (
<Layout wrapperClassName="search-page-wrapper"> <Layout wrapperClassName="search-page-wrapper">
<Head> <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. * LICENSE file in the root directory of this source tree.
*/ */
import {useHistory, useLocation} from '@docusaurus/router'; import {useHistory} from '@docusaurus/router';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useCallback, useEffect, useState} from 'react';
const SEARCH_PARAM_QUERY = 'q'; const SEARCH_PARAM_QUERY = 'q';
function useSearchQuery() { function useSearchQuery() {
const history = useHistory(); const history = useHistory();
const location = useLocation(); const {
const {siteConfig: {baseUrl} = {}} = useDocusaurusContext(); siteConfig: {baseUrl},
} = useDocusaurusContext();
return { const [searchQuery, setSearchQueryState] = useState('');
searchValue:
(ExecutionEnvironment.canUseDOM &&
new URLSearchParams(location.search).get(SEARCH_PARAM_QUERY)) ||
'',
updateSearchPath: (searchValue) => {
const searchParams = new URLSearchParams(location.search);
if (searchValue) { // Init search query just after React hydration
searchParams.set(SEARCH_PARAM_QUERY, searchValue); 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 { } else {
searchParams.delete(SEARCH_PARAM_QUERY); searchParams.delete(SEARCH_PARAM_QUERY);
} }
@ -33,11 +40,23 @@ function useSearchQuery() {
history.replace({ history.replace({
search: searchParams.toString(), search: searchParams.toString(),
}); });
setSearchQueryState(newSearchQuery);
}, },
generateSearchPageLink: (searchValue) => { [history],
);
const generateSearchPageLink = useCallback(
(targetSearchQuery) => {
// Refer to https://github.com/facebook/docusaurus/pull/2838 // 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,
}; };
} }