From 174cd8dc6ff40356885bfeeecaaaccdd362e6574 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Fri, 5 Jun 2020 10:09:13 +0300
Subject: [PATCH] refactor(v2): combine nested theme providers into one (#2870)

---
 .../src/theme/AnnouncementBar/index.js        |  4 +-
 .../theme/AnnouncementBarProvider/index.js    | 24 ------
 .../src/theme/DocSidebar/index.js             |  4 +-
 .../src/theme/Layout/index.js                 | 74 +++++++++----------
 .../src/theme/TabGroupChoiceContext.js        | 15 ----
 .../src/theme/TabGroupChoiceProvider/index.js | 24 ------
 .../src/theme/Tabs/index.js                   |  4 +-
 ...arContext.js => UserPreferencesContext.js} |  9 ++-
 .../theme/UserPreferencesProvider/index.js    | 31 ++++++++
 .../theme/hooks/useTabGroupChoiceContext.js   | 16 ----
 ...ontext.js => useUserPreferencesContext.js} |  9 ++-
 11 files changed, 83 insertions(+), 131 deletions(-)
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/TabGroupChoiceContext.js
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js
 rename packages/docusaurus-theme-classic/src/theme/{AnnouncementBarContext.js => UserPreferencesContext.js} (61%)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/UserPreferencesProvider/index.js
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/hooks/useTabGroupChoiceContext.js
 rename packages/docusaurus-theme-classic/src/theme/hooks/{useAnnouncementBarContext.js => useUserPreferencesContext.js} (54%)

diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js
index 475aaf51f1..b9a1537e80 100644
--- 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
deleted file mode 100644
index e35dfdd1db..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * 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 AnnouncementBarContext from '@theme/AnnouncementBarContext';
-import useAnnouncementBar from '@theme/hooks/useAnnouncementBar';
-
-function AnnouncementBarProvider(props) {
-  const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar();
-
-  return (
-    <AnnouncementBarContext.Provider
-      value={{isAnnouncementBarClosed, closeAnnouncementBar}}>
-      {props.children}
-    </AnnouncementBarContext.Provider>
-  );
-}
-
-export default AnnouncementBarProvider;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index 1a5ff3b7a7..387c33a4fb 100644
--- 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
index f81dfd19ba..090e1a2795 100644
--- 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
deleted file mode 100644
index 4b8db8725e..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceContext.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * 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 {createContext} from 'react';
-
-const TabGroupChoiceContext = createContext({
-  tabGroupChoices: {},
-  setTabGroupChoices: () => {},
-});
-
-export default TabGroupChoiceContext;
diff --git a/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js b/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js
deleted file mode 100644
index 195a02d2ad..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/TabGroupChoiceProvider/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * 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 TabGroupChoiceContext from '@theme/TabGroupChoiceContext';
-
-function TabGroupChoiceProvider(props) {
-  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
-
-  return (
-    <TabGroupChoiceContext.Provider
-      value={{tabGroupChoices, setTabGroupChoices}}>
-      {props.children}
-    </TabGroupChoiceContext.Provider>
-  );
-}
-
-export default TabGroupChoiceProvider;
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
index 07d10a08d8..c3af3c9718 100644
--- 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/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js b/packages/docusaurus-theme-classic/src/theme/UserPreferencesContext.js
similarity index 61%
rename from packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js
rename to packages/docusaurus-theme-classic/src/theme/UserPreferencesContext.js
index 1d1adbe889..eef4146817 100644
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js
+++ b/packages/docusaurus-theme-classic/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
new file mode 100644
index 0000000000..c0a046847b
--- /dev/null
+++ 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
deleted file mode 100644
index 22e20cc1b6..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/hooks/useTabGroupChoiceContext.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * 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 {useContext} from 'react';
-
-import TabGroupChoiceContext from '@theme/TabGroupChoiceContext';
-
-function useTabGroupChoiceContext() {
-  return useContext(TabGroupChoiceContext);
-}
-
-export default useTabGroupChoiceContext;
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBarContext.js b/packages/docusaurus-theme-classic/src/theme/hooks/useUserPreferencesContext.js
similarity index 54%
rename from packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBarContext.js
rename to packages/docusaurus-theme-classic/src/theme/hooks/useUserPreferencesContext.js
index 635974ae40..d352596773 100644
--- a/packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBarContext.js
+++ b/packages/docusaurus-theme-classic/src/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;