Merge pull request #1396 from Shopify/themeprovider-new-context

[ThemeProvider] Use the new context api
Shopify · May 6, 2019 · 6a6b6a8 · 6a6b6a8
2 parents 139eac3 + 03dda05
commit 6a6b6a8
Show file tree

Hide file tree

Showing 33 changed files with 450 additions and 515 deletions.
diff --git a/UNRELEASED-V4.md b/UNRELEASED-V4.md
@@ -24,6 +24,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Updated `ThemeProvider` to use the new context api ([#1396](https://github.com/Shopify/polaris-react/pull/1396))
 - Updated `AppProvider` to no longer use `componentWillReceiveProps`([#1255](https://github.com/Shopify/polaris-react/pull/1255))
 - Updated `ThemeProvider` to no longer use `componentWillReceiveProps`([#1254](https://github.com/Shopify/polaris-react/pull/1254))
 - Upgraded the `Banner`, `Card`, and `Modal` components from legacy context API to use createContext ([#786](https://github.com/Shopify/polaris-react/pull/786))

diff --git a/src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts b/src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts
@@ -29,7 +29,7 @@ export default function createPolarisContext(
   let themeContext: CreateThemeContext | undefined;
   if (contextOne && 'logo' in contextOne) {
     themeContext = contextOne as CreateThemeContext;
-    appProviderContext = contextTwo;
+    appProviderContext = contextTwo as CreateAppProviderContext;
   } else {
     appProviderContext = contextOne;
     themeContext = contextTwo as CreateThemeContext | undefined;

diff --git a/...components/AppProvider/utilities/createPolarisContext/tests/createPolarisContext.test.tsx b/...components/AppProvider/utilities/createPolarisContext/tests/createPolarisContext.test.tsx
@@ -37,8 +37,6 @@ describe('createPolarisContext()', () => {
       },
       polarisTheme: {
         logo: null,
-        subscribe: noop,
-        unsubscribe: noop,
       },
     });
   });
@@ -56,10 +54,6 @@ describe('createPolarisContext()', () => {
     };
     const stickyManager = new StickyManager();
     const scrollLockManager = new ScrollLockManager();
-    const mockSubscribe = (fn: () => void) =>
-      ([] as Array<() => void>).push(fn);
-    const mockUnsubscribe = (fn: () => void) =>
-      [].filter((curFn: any) => curFn !== fn);
     const contextOne = createPolarisContext(
       {
         i18n,
@@ -68,15 +62,11 @@ describe('createPolarisContext()', () => {
       },
       {
         logo: null,
-        subscribe: mockSubscribe,
-        unsubscribe: mockUnsubscribe,
       },
     );
     const contextTwo = createPolarisContext(
       {
         logo: null,
-        subscribe: mockSubscribe,
-        unsubscribe: mockUnsubscribe,
       },
       {
         i18n,
@@ -96,8 +86,6 @@ describe('createPolarisContext()', () => {
       },
       polarisTheme: {
         logo: null,
-        subscribe: mockSubscribe,
-        unsubscribe: mockUnsubscribe,
       },
     };
 
@@ -135,23 +123,15 @@ describe('createPolarisContext()', () => {
       },
       polarisTheme: {
         logo: null,
-        subscribe: noop,
-        unsubscribe: noop,
       },
     };
 
     expect(context).toEqual(mockContext);
   });
 
   it('returns the right context with only theme provider context being provided', () => {
-    const mockSubscribe = (fn: () => void) =>
-      ([] as Array<() => void>).push(fn);
-    const mockUnsubscribe = (fn: () => void) =>
-      [].filter((curFn: any) => curFn !== fn);
     const context = createPolarisContext({
       logo: null,
-      subscribe: mockSubscribe,
-      unsubscribe: mockUnsubscribe,
     });
 
     expect(context).toMatchObject({
@@ -166,8 +146,6 @@ describe('createPolarisContext()', () => {
       },
       polarisTheme: {
         logo: null,
-        subscribe: mockSubscribe,
-        unsubscribe: mockUnsubscribe,
       },
     });
   });

diff --git a/src/components/AppProvider/utilities/withAppProvider/tests/withAppProvider.test.tsx b/src/components/AppProvider/utilities/withAppProvider/tests/withAppProvider.test.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {mount} from 'enzyme';
+import withAppProvider from '../withAppProvider';
+
+describe('withAppProvider', () => {
+  it('throws when polaris is not defined', () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const Child: React.SFC<{}> = (_props) => <div />;
+
+    const WrappedComponent = withAppProvider<any>()(Child);
+
+    const fn = () => {
+      mount(<WrappedComponent />);
+      consoleSpy.mockRestore();
+    };
+    expect(fn).toThrowError();
+  });
+});
diff --git a/src/components/AppProvider/utilities/withAppProvider/withAppProvider.tsx b/src/components/AppProvider/utilities/withAppProvider/withAppProvider.tsx
@@ -6,7 +6,10 @@ import Intl from '../Intl';
 import Link from '../Link';
 import {StickyManager} from '../withSticky';
 import ScrollLockManager from '../ScrollLockManager';
-import {ThemeContext} from '../../../ThemeProvider';
+import {
+  ThemeContext,
+  Consumer as ThemeProviderConsumer,
+} from '../../../ThemeProvider';
 import {polarisAppProviderContextTypes} from '../../types';
 
 export interface WithAppProviderProps {
@@ -36,46 +39,47 @@ export default function withAppProvider<OwnProps>() {
       componentDidMount() {
         const {
           polaris: {subscribe: subscribeToPolaris},
-          polarisTheme: {subscribe: subscribeToTheme},
         } = this.context;
 
         if (subscribeToPolaris) {
           subscribeToPolaris(this.handleContextUpdate);
         }
-
-        if (subscribeToTheme) {
-          subscribeToTheme(this.handleContextUpdate);
-        }
       }
 
       componentWillUnmount() {
         const {
           polaris: {unsubscribe: unsubscribeToPolaris},
-          polarisTheme: {unsubscribe: unsubscribeToTheme},
         } = this.context;
 
         if (unsubscribeToPolaris) {
           unsubscribeToPolaris(this.handleContextUpdate);
         }
-
-        if (unsubscribeToTheme) {
-          unsubscribeToTheme(this.handleContextUpdate);
-        }
       }
 
       render() {
-        const {polaris, polarisTheme} = this.context;
-        const polarisContext = {...polaris, theme: polarisTheme};
+        return (
+          <ThemeProviderConsumer>
+            {({polarisTheme}) => {
+              const {polaris} = this.context;
+              const polarisContext = {
+                ...polaris,
+                theme: polarisTheme,
+              };
 
-        if (!polaris) {
-          throw new Error(
-            `The <AppProvider> component is required as of v2.0 of Polaris React. See
-            https://polaris.shopify.com/components/structure/app-provider for implementation
-            instructions.`,
-          );
-        }
+              if (!polaris) {
+                throw new Error(
+                  `The <AppProvider> component is required as of v2.0 of Polaris React. See
+                        https://polaris.shopify.com/components/structure/app-provider for implementation
+                        instructions.`,
+                );
+              }
 
-        return <WrappedComponent {...this.props} polaris={polarisContext} />;
+              return (
+                <WrappedComponent {...this.props} polaris={polarisContext} />
+              );
+            }}
+          </ThemeProviderConsumer>
+        );
       }
 
       private handleContextUpdate = () => {