search page: support docs multi-instance

slorber · slorber · commit b8bc278affe6 · 2020-10-21T17:29:22.000+02:00
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
@@ -16,29 +16,96 @@ import clsx from 'clsx';
 import Head from '@docusaurus/Head';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useDocsData} from '@theme/hooks/useDocs';
+import {useAllDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/constants';
-
 import styles from './styles.module.css';
 
 function pluralize(count, word) {
   return count > 1 ? `${word}s` : word;
 }
 
+function useDocsSearchVersionsHelpers() {
+  const allDocsData = useAllDocsData();
+
+  // State of the version select menus / algolia facet filters
+  // docsPluginId -> versionName map
+  const [searchVersions, setSearchVersions] = useState(() => {
+    return Object.entries(allDocsData).reduce((acc, [pluginId, pluginData]) => {
+      return {...acc, [pluginId]: pluginData.versions[0].name};
+    }, {});
+  });
+
+  // Set the value of a single select menu
+  const setSearchVersion = (pluginId, searchVersion) =>
+    setSearchVersions((s) => ({...s, [pluginId]: searchVersion}));
+
+  const versioningEnabled = Object.values(allDocsData).some(
+    (docsData) => docsData.versions.length > 1,
+  );
+
+  return {
+    allDocsData,
+    versioningEnabled,
+    searchVersions,
+    setSearchVersion,
+  };
+}
+
+// We want to display one select per versioned docs plugin instance
+const SearchVersionSelectList = ({docsSearchVersionsHelpers}) => {
+  const versionedPluginEntries = Object.entries(
+    docsSearchVersionsHelpers.allDocsData,
+  )
+    // Do not show a version select for unversioned docs plugin instances
+    .filter(([, docsData]) => docsData.versions.length > 1);
+
+  return (
+    <div
+      className={clsx(
+        'col',
+        'col--3',
+        'padding-left--none',
+        styles.searchVersionColumn,
+      )}>
+      {versionedPluginEntries.map(([pluginId, docsData]) => {
+        const labelPrefix =
+          versionedPluginEntries.length > 1 ? `${pluginId}: ` : '';
+        return (
+          <select
+            key={pluginId}
+            onChange={(e) =>
+              docsSearchVersionsHelpers.setSearchVersion(
+                pluginId,
+                e.target.value,
+              )
+            }
+            defaultValue={docsSearchVersionsHelpers.searchVersions[pluginId]}
+            className={styles.searchVersionInput}>
+            {docsData.versions.map((version, i) => (
+              <option
+                key={i}
+                label={`${labelPrefix}${version.label}`}
+                value={version.name}
+              />
+            ))}
+          </select>
+        );
+      })}
+    </div>
+  );
+};
+
 function Search() {
   const {
     siteConfig: {
       themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
     } = {},
   } = useDocusaurusContext();
-  const {versions} = useDocsData(DEFAULT_PLUGIN_ID);
-  const versioningEnabled = versions.length > 0;
+  const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
   const {searchValue, updateSearchPath} = useSearchQuery();
-  const [searchVersion, setSearchVersion] = useState(versions[0]?.name);
   const [searchQuery, setSearchQuery] = useState(searchValue);
   const initialSearchResultState = {
     items: [],
@@ -90,7 +157,7 @@ function Search() {
   const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
     hitsPerPage: 15,
     advancedSyntax: true,
-    facets: searchVersion ? ['version'] : [],
+    disjunctiveFacets: ['docusaurus_tag'],
   });
 
   algoliaHelper.on(
@@ -172,25 +239,19 @@ function Search() {
       : 'Search the documentation';
 
   const makeSearch = (page = 0) => {
-    if (searchVersion) {
-      algoliaHelper
-        .setQuery(searchQuery)
-        .addFacetRefinement('version', searchVersion)
-        .setPage(page)
-        .search();
-    } else {
-      algoliaHelper.setQuery(searchQuery).setPage(page).search();
-    }
-  };
-
-  const handleSearchInputChange = (e) => {
-    const searchInputValue = e.target.value;
+    algoliaHelper.setQuery(searchQuery).setPage(page);
+
+    algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
+    Object.entries(docsSearchVersionsHelpers.searchVersions).forEach(
+      ([pluginId, searchVersion]) => {
+        algoliaHelper.addDisjunctiveFacetRefinement(
+          'docusaurus_tag',
+          `docs-${pluginId}-${searchVersion}`,
+        );
+      },
+    );
 
-    if (e.target.tagName === 'SELECT') {
-      setSearchVersion(searchInputValue);
-    } else {
-      setSearchQuery(searchInputValue);
-    }
+    algoliaHelper.search();
   };
 
   useEffect(() => {
@@ -217,7 +278,7 @@ function Search() {
         makeSearch();
       }, 300);
     }
-  }, [searchQuery, searchVersion]);
+  }, [searchQuery, docsSearchVersionsHelpers.searchVersions]);
 
   useEffect(() => {
     if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
@@ -249,39 +310,26 @@ function Search() {
         <form className="row" onSubmit={(e) => e.preventDefault()}>
           <div
             className={clsx('col', styles.searchQueryColumn, {
-              'col--9': versioningEnabled,
-              'col--12': !versioningEnabled,
+              'col--9': docsSearchVersionsHelpers.versioningEnabled,
+              'col--12': !docsSearchVersionsHelpers.versioningEnabled,
             })}>
             <input
               type="search"
               name="q"
               className={styles.searchQueryInput}
               placeholder="Type your search here"
               aria-label="Search"
-              onChange={handleSearchInputChange}
+              onChange={(e) => setSearchQuery(e.target.value)}
               value={searchQuery}
               autoComplete="off"
               autoFocus
             />
           </div>
 
-          {versioningEnabled && (
-            <div
-              className={clsx(
-                'col',
-                'col--3',
-                'padding-left--none',
-                styles.searchVersionColumn,
-              )}>
-              <select
-                onChange={handleSearchInputChange}
-                defaultValue={searchVersion}
-                className={styles.searchVersionInput}>
-                {versions.map((version, i) => (
-                  <option key={i} label={version.label} value={version.name} />
-                ))}
-              </select>
-            </div>
+          {docsSearchVersionsHelpers.versioningEnabled && (
+            <SearchVersionSelectList
+              docsSearchVersionsHelpers={docsSearchVersionsHelpers}
+            />
           )}
         </form>
 
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
@@ -14,6 +14,7 @@
   padding: 0.5rem;
   width: 100%;
   background: #fff;
+  margin-bottom: 1rem;
 }
 
 .searchResultsColumn {

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`padding: 0.5rem;`
`15`	`15`	`width: 100%;`
`16`	`16`	`background: #fff;`
	`17`	`+ margin-bottom: 1rem;`
`17`	`18`	`}`
`18`	`19`
`19`	`20`	`.searchResultsColumn {`