refactor(v2): combine nested theme providers into one

facebook · Jun 3, 2020 · 26305e2 · 26305e2
1 parent 6797af6
commit 26305e2
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 131 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext';
+import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 
 import styles from './styles.module.css';
 
@@ -19,7 +19,7 @@ function AnnouncementBar() {
   const {
     isAnnouncementBarClosed,
     closeAnnouncementBar,
-  } = useAnnouncementBarContext();
+  } = useUserPreferencesContext();
 
   if (!content || isAnnouncementBarClosed) {
     return null;

diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@@ -8,7 +8,7 @@
 import React, {useState, useCallback, useEffect, useRef} from 'react';
 import classnames from 'classnames';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext';
+import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
 import useLogo from '@theme/hooks/useLogo';
 import useScrollPosition from '@theme/hooks/useScrollPosition';
@@ -165,7 +165,7 @@ function DocSidebar(props) {
     isClient,
   } = useDocusaurusContext();
   const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
-  const {isAnnouncementBarClosed} = useAnnouncementBarContext();
+  const {isAnnouncementBarClosed} = useUserPreferencesContext();
   const {scrollY} = useScrollPosition();
 
   const {

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.js b/packages/docusaurus-theme-classic/src/theme/Layout/index.js
@@ -11,8 +11,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import ThemeProvider from '@theme/ThemeProvider';
-import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider';
-import AnnouncementBarProvider from '@theme/AnnouncementBarProvider';
+import UserPreferencesProvider from '@theme/UserPreferencesProvider';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
@@ -44,45 +43,40 @@ function Layout(props) {
 
   return (
     <ThemeProvider>
-      <TabGroupChoiceProvider>
-        <AnnouncementBarProvider>
-          <Head>
-            {/* TODO: Do not assume that it is in english language */}
-            <html lang="en" />
+      <UserPreferencesProvider>
+        <Head>
+          {/* TODO: Do not assume that it is in english language */}
+          <html lang="en" />
 
-            {metaTitle && <title>{metaTitle}</title>}
-            {metaTitle && <meta property="og:title" content={metaTitle} />}
-            {favicon && <link rel="shortcut icon" href={faviconUrl} />}
-            {description && <meta name="description" content={description} />}
-            {description && (
-              <meta property="og:description" content={description} />
-            )}
-            {version && <meta name="docsearch:version" content={version} />}
-            {keywords && keywords.length && (
-              <meta name="keywords" content={keywords.join(',')} />
-            )}
-            {metaImage && <meta property="og:image" content={metaImageUrl} />}
-            {metaImage && (
-              <meta property="twitter:image" content={metaImageUrl} />
-            )}
-            {metaImage && (
-              <meta
-                name="twitter:image:alt"
-                content={`Image for ${metaTitle}`}
-              />
-            )}
-            {permalink && (
-              <meta property="og:url" content={siteUrl + permalink} />
-            )}
-            {permalink && <link rel="canonical" href={siteUrl + permalink} />}
-            <meta name="twitter:card" content="summary_large_image" />
-          </Head>
-          <AnnouncementBar />
-          <Navbar />
-          <div className="main-wrapper">{children}</div>
-          {!noFooter && <Footer />}
-        </AnnouncementBarProvider>
-      </TabGroupChoiceProvider>
+          {metaTitle && <title>{metaTitle}</title>}
+          {metaTitle && <meta property="og:title" content={metaTitle} />}
+          {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+          {description && <meta name="description" content={description} />}
+          {description && (
+            <meta property="og:description" content={description} />
+          )}
+          {version && <meta name="docsearch:version" content={version} />}
+          {keywords && keywords.length && (
+            <meta name="keywords" content={keywords.join(',')} />
+          )}
+          {metaImage && <meta property="og:image" content={metaImageUrl} />}
+          {metaImage && (
+            <meta property="twitter:image" content={metaImageUrl} />
+          )}
+          {metaImage && (
+            <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
+          )}
+          {permalink && (
+            <meta property="og:url" content={siteUrl + permalink} />
+          )}
+          {permalink && <link rel="canonical" href={siteUrl + permalink} />}
+          <meta name="twitter:card" content="summary_large_image" />
+        </Head>
+        <AnnouncementBar />
+        <Navbar />
+        <div className="main-wrapper">{children}</div>
+        {!noFooter && <Footer />}
+      </UserPreferencesProvider>
     </ThemeProvider>
   );
 }

diff --git a/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceContext.js b/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceContext.js
diff --git a/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js b/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
@@ -6,7 +6,7 @@
  */
 
 import React, {useState, Children} from 'react';
-import useTabGroupChoiceContext from '@theme/hooks/useTabGroupChoiceContext';
+import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 
 import classnames from 'classnames';
 
@@ -19,7 +19,7 @@ const keys = {
 
 function Tabs(props) {
   const {block, children, defaultValue, values, groupId} = props;
-  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoiceContext();
+  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
 
   if (groupId != null) {

diff --git a/...assic/src/theme/AnnouncementBarContext.js → ...assic/src/theme/UserPreferencesContext.js b/...assic/src/theme/AnnouncementBarContext.js → ...assic/src/theme/UserPreferencesContext.js
@@ -7,9 +7,14 @@
 
 import {createContext} from 'react';
 
-const AnnouncementBarContext = createContext({
+const UserPreferencesContext = createContext({
+  // Tab group choice.
+  tabGroupChoices: {},
+  setTabGroupChoices: () => {},
+
+  // Announcement bar.
   isAnnouncementBarClosed: false,
   closeAnnouncementBar: () => {},
 });
 
-export default AnnouncementBarContext;
+export default UserPreferencesContext;
diff --git a/packages/docusaurus-theme-classic/src/theme/UserPreferencesProvider/index.js b/packages/docusaurus-theme-classic/src/theme/UserPreferencesProvider/index.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import useTabGroupChoice from '@theme/hooks/useTabGroupChoice';
+import useAnnouncementBar from '@theme/hooks/useAnnouncementBar';
+import UserPreferencesContext from '@theme/UserPreferencesContext';
+
+function UserPreferencesProvider(props) {
+  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
+  const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar();
+
+  return (
+    <UserPreferencesContext.Provider
+      value={{
+        tabGroupChoices,
+        setTabGroupChoices,
+        isAnnouncementBarClosed,
+        closeAnnouncementBar,
+      }}>
+      {props.children}
+    </UserPreferencesContext.Provider>
+  );
+}
+
+export default UserPreferencesProvider;
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useTabGroupChoiceContext.js b/packages/docusaurus-theme-classic/src/theme/hooks/useTabGroupChoiceContext.js
diff --git a/.../theme/hooks/useAnnouncementBarContext.js → .../theme/hooks/useUserPreferencesContext.js b/.../theme/hooks/useAnnouncementBarContext.js → .../theme/hooks/useUserPreferencesContext.js
@@ -6,10 +6,11 @@
  */
 
 import {useContext} from 'react';
-import AnnouncementBarContext from '@theme/AnnouncementBarContext';
 
-function useAnnouncementBarContext() {
-  return useContext(AnnouncementBarContext);
+import UserPreferencesContext from '@theme/UserPreferencesContext';
+
+function useUserPreferencesContext() {
+  return useContext(UserPreferencesContext);
 }
 
-export default useAnnouncementBarContext;
+export default useUserPreferencesContext;