refactor: 💡 restructure into context-like API

Author: streamich

src/GoogleAuth/__story__/story.tsx

@@ -1,14 +1,17 @@
 import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
-import {GoogleAuthButton} from '..';
+import {createGoogleAuthContext} from '..';
 // import ShowDocs from '../../../.storybook/ShowDocs'
 
 const clientId = '305188012168-htfit0k0u4vegn0f6hn10rcqoj1m77ca.apps.googleusercontent.com';
+const ctx1 = createGoogleAuthContext(clientId);
 
 storiesOf('Context/GoogleAuthButton', module)
   // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/GoogleAuthButton.md')}))
   .add('Default', () =>
-    <GoogleAuthButton clientId={clientId}>{(state) =>
-      <button>Sign in with Google!</button>
-    }</GoogleAuthButton>
+    <ctx1.Provider>
+      <ctx1.Consumer>{({signIn}) =>
+        <button onClick={signIn}>Sign in with Google!</button>
+      }</ctx1.Consumer>
+    </ctx1.Provider>
   );

src/GoogleAuth/util.ts renamed to src/GoogleAuth/gapi.ts

@@ -1,17 +1,54 @@
-import {Component} from 'react';
-import renderProp from '../util/renderProp';
-import {IUniversalInterfaceProps} from '../typing';
+import {h} from '../util';
+import {Component, createContext} from 'react';
+import {getGapiAuthInstance} from './gapi';
 
-export interface IGoogleAuthButtonProps extends IUniversalInterfaceProps<IGoogleAuthButtonState> {
-    clientId: string;
+export interface IGoogleAuthProviderProps {
+  children;
 }
 
-export interface IGoogleAuthButtonState {
-    loading?: boolean;
+export interface IGoogleAuthProviderState {
+  loading?: boolean;
+  signIn: () => Promise<void>;
+  signOut: () => Promise<void>;
+  user: any | null;
 }
 
-export class GoogleAuthButton extends Component<IGoogleAuthButtonProps, IGoogleAuthButtonState> {
+export interface IGoogleAuthConsumerProps {
+  children: (state: IGoogleAuthProviderState) => React.ReactNode;
+}
+
+export const createGoogleAuthContext = (clientId: string) => {
+  const context = createContext({});
+
+  let googleAuth;
+  const getAuthInstance = async () => {
+    if (!googleAuth) {
+      googleAuth = await getGapiAuthInstance(clientId);
+    }
+
+    return googleAuth;
+  };
+
+  class Provider extends Component<IGoogleAuthProviderProps, IGoogleAuthProviderState> {
+    state: IGoogleAuthProviderState = {
+      signIn: async () => {
+        const googleAuth = await getAuthInstance();
+        await googleAuth.signIn();
+      },
+      signOut: async () => {
+        const googleAuth = await getAuthInstance();
+        await googleAuth.signOut();
+      },
+      user: null,
+    };
+
     render () {
-        return renderProp(this.props, this.state);
+      return h(context.Provider, {value: this.state}, this.props.children);
     }
-}
+  }
+
+  return {
+    Provider,
+    Consumer: context.Consumer as React.SFC<IGoogleAuthConsumerProps>,
+  };
+};