Implement TalkProvider

client/coral-admin/src/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import {render} from 'react-dom';
-import {ApolloProvider} from 'react-apollo';
 import smoothscroll from 'smoothscroll-polyfill';
 import EventEmitter from 'eventemitter2';
-import EventEmitterProvider from 'coral-framework/components/EventEmitterProvider';
+import TalkProvider from 'coral-framework/components/TalkProvider';
 
 import {getClient} from 'coral-framework/services/client';
 import store from './services/store';
@@ -13,8 +12,10 @@ import App from './components/App';
 import 'react-mdl/extra/material.js';
 import './graphql';
 import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+import plugins from 'pluginsConfig';
 
 const eventEmitter = new EventEmitter();
+const client = getClient();
 
 // TODO: pass redux actions through the emitter.
 
@@ -23,10 +24,13 @@ injectPluginsReducers();
 smoothscroll.polyfill();
 
 render(
-  <EventEmitterProvider eventEmitter={eventEmitter}>
-    <ApolloProvider client={getClient()} store={store}>
-      <App />
-    </ApolloProvider>
-  </EventEmitterProvider>
+  <TalkProvider
+    eventEmitter={eventEmitter}
+    client={client}
+    store={store}
+    plugins={plugins}
+  >
+    <App />
+  </TalkProvider>
   , document.querySelector('#root')
 );

client/coral-embed-stream/src/containers/Embed.js

@@ -10,20 +10,23 @@ import renderComponent from 'recompose/renderComponent';
 import {Spinner} from 'coral-ui';
 import * as authActions from 'coral-framework/actions/auth';
 import * as assetActions from 'coral-framework/actions/asset';
-import pym from 'coral-framework/services/pym';
 import {getDefinitionName} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from './Stream';
 import {addNotification} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
-
+import PropTypes from 'prop-types';
 import {setActiveTab} from '../actions/embed';
 
 const {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
 const {fetchAssetSuccess} = assetActions;
 
 class EmbedContainer extends React.Component {
+  static contextTypes = {
+    pym: PropTypes.object,
+  };
+
   subscriptions = [];
 
   subscribeToUpdates(props = this.props) {
@@ -95,7 +98,7 @@ class EmbedContainer extends React.Component {
     if (!get(prevProps, 'root.asset.comment') && get(this.props, 'root.asset.comment')) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(() => pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
+      setTimeout(() => this.context.pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
     }
   }
 

client/coral-embed-stream/src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {render} from 'react-dom';
-import {ApolloProvider} from 'react-apollo';
 
 import {checkLogin, handleAuthToken, logout} from 'coral-framework/actions/auth';
 import './graphql';
@@ -13,7 +12,8 @@ import AppRouter from './AppRouter';
 import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 import reducers from './reducers';
 import EventEmitter from 'eventemitter2';
-import EventEmitterProvider from 'coral-framework/components/EventEmitterProvider';
+import TalkProvider from 'coral-framework/components/TalkProvider';
+import plugins from 'pluginsConfig';
 
 const store = getStore();
 const client = getClient();
@@ -68,10 +68,14 @@ if (!window.opener) {
 }
 
 render(
-  <EventEmitterProvider eventEmitter={eventEmitter}>
-    <ApolloProvider client={client} store={store}>
-      <AppRouter />
-    </ApolloProvider>
-  </EventEmitterProvider>
+  <TalkProvider
+    eventEmitter={eventEmitter}
+    client={client}
+    store={store}
+    pym={pym}
+    plugins={plugins}
+  >
+    <AppRouter />
+  </TalkProvider>
   , document.querySelector('#talk-embed-stream-container')
 );

client/coral-framework/components/ClickOutside.js

@@ -1,13 +1,16 @@
 import {Component, cloneElement, Children} from 'react';
 import PropTypes from 'prop-types';
 import {findDOMNode} from 'react-dom';
-import pym from 'coral-framework/services/pym';
 
 export default class ClickOutside extends Component {
   static propTypes = {
     onClickOutside: PropTypes.func.isRequired
   };
 
+  static contextTypes = {
+    pym: PropTypes.object,
+  };
+
   domNode = null;
 
   handleClick = (e) => {
@@ -18,14 +21,20 @@ export default class ClickOutside extends Component {
   };
 
   componentDidMount() {
+    const {pym} = this.context;
     this.domNode = findDOMNode(this);
     document.addEventListener('click', this.handleClick, true);
-    pym.onMessage('click', this.handleClick);
+    if (pym) {
+      pym.onMessage('click', this.handleClick);
+    }
   }
 
   componentWillUnmount() {
+    const {pym} = this.context;
     document.removeEventListener('click', this.handleClick, true);
-    pym.messageHandlers.click = pym.messageHandlers.click.filter((h) => h !== this.handleClick);
+    if (pym) {
+      pym.messageHandlers.click = pym.messageHandlers.click.filter((h) => h !== this.handleClick);
+    }
   }
 
   render() {

client/coral-framework/components/EventEmitterProvider.js

@@ -1,18 +0,0 @@
-import React from 'react';
-const PropTypes = require('prop-types');
-
-class EventEmitterProvider extends React.Component {
-  getChildContext() {
-    return {eventEmitter: this.props.eventEmitter};
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
-
-EventEmitterProvider.childContextTypes = {
-  eventEmitter: PropTypes.object,
-};
-
-export default EventEmitterProvider;

client/coral-framework/components/TalkProvider.js

@@ -0,0 +1,30 @@
+import React from 'react';
+const PropTypes = require('prop-types');
+import {ApolloProvider} from 'react-apollo';
+
+class TalkProvider extends React.Component {
+  getChildContext() {
+    return {
+      eventEmitter: this.props.eventEmitter,
+      pym: this.props.pym,
+      plugins: this.props.plugins,
+    };
+  }
+
+  render() {
+    const {children, client, store, plugins} = this.props;
+    return (
+      <ApolloProvider client={client} store={store} plugins={plugins}>
+        {children}
+      </ApolloProvider>
+    );
+  }
+}
+
+TalkProvider.childContextTypes = {
+  pym: PropTypes.object,
+  eventEmitter: PropTypes.object,
+  plugins: PropTypes.array,
+};
+
+export default TalkProvider;