Adds redux to handle external config data

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

@@ -8,22 +8,24 @@ import renderComponent from 'recompose/renderComponent';
 
 import {Spinner} from 'coral-ui';
 import {authActions, assetActions, pym} from 'coral-framework';
-import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils';
-import Embed from '../components/Embed';
-import {setCommentCountCache, viewAllComments} from '../actions/stream';
-import {setActiveTab} from '../actions/embed';
+
 import Stream from './Stream';
+import Embed from '../components/Embed';
+
+import {setActiveTab} from '../actions/embed';
+import {addExternalConfig} from 'coral-framework/actions/config';
+import {setCommentCountCache, viewAllComments} from '../actions/stream';
+import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils';
 
 const {logout, checkLogin} = authActions;
 const {fetchAssetSuccess} = assetActions;
 
 class EmbedContainer extends React.Component {
-
   componentDidMount() {
     pym.sendMessage('childReady');
 
     pym.onMessage('config', config => {
-      console.log(JSON.parse(config));
+      this.props.addExternalConfig(JSON.parse(config));
     });
   }
 
@@ -32,7 +34,7 @@ class EmbedContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if(this.props.root.me && !nextProps.root.me) {
+    if (this.props.root.me && !nextProps.root.me) {
 
       // Refetch because on logout `excludeIgnored` becomes `false`.
       // TODO: logout via mutation and obsolete this?
@@ -40,7 +42,7 @@ class EmbedContainer extends React.Component {
     }
 
     const {fetchAssetSuccess} = this.props;
-    if(!isEqual(nextProps.root.asset, this.props.root.asset)) {
+    if (!isEqual(nextProps.root.asset, this.props.root.asset)) {
 
       // TODO: remove asset data from redux store.
       fetchAssetSuccess(nextProps.root.asset);
@@ -55,7 +57,7 @@ class EmbedContainer extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if(!isEqual(prevProps.root.comment, this.props.root.comment)) {
+    if (!isEqual(prevProps.root.comment, this.props.root.comment)) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
       setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
@@ -90,10 +92,10 @@ export const withQuery = graphql(EMBED_QUERY, {
       assetUrl,
       commentId,
       hasComment: commentId !== '',
-      excludeIgnored: Boolean(auth && auth.user && auth.user.id),
-    },
+      excludeIgnored: Boolean(auth && auth.user && auth.user.id)
+    }
   }),
-  props: ({data}) => separateDataAndRoot(data),
+  props: ({data}) => separateDataAndRoot(data)
 });
 
 const mapStateToProps = state => ({
@@ -102,25 +104,25 @@ const mapStateToProps = state => ({
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
   assetUrl: state.stream.assetUrl,
-  activeTab: state.embed.activeTab,
+  activeTab: state.embed.activeTab
 });
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({
-    fetchAssetSuccess,
-    checkLogin,
-    setCommentCountCache,
-    viewAllComments,
-    logout,
-    setActiveTab,
-  }, dispatch);
+  bindActionCreators(
+    {
+      logout,
+      checkLogin,
+      setActiveTab,
+      viewAllComments,
+      addExternalConfig,
+      fetchAssetSuccess,
+      setCommentCountCache
+    },
+    dispatch
+  );
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  branch(
-    props => !props.auth.checkedInitialLogin,
-    renderComponent(Spinner),
-  ),
-  withQuery,
+  branch(props => !props.auth.checkedInitialLogin, renderComponent(Spinner)),
+  withQuery
 )(EmbedContainer);
-

client/coral-framework/actions/config.js

@@ -0,0 +1,6 @@
+import {ADD_EXTERNAL_CONFIG} from '../constants/config';
+
+export const addExternalConfig = config => ({
+  type: ADD_EXTERNAL_CONFIG,
+  config
+});

client/coral-framework/constants/asset.js

@@ -8,4 +8,3 @@ export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE';
 
 export const OPEN_COMMENTS = 'OPEN_COMMENTS';
 export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
-

client/coral-framework/constants/config.js

@@ -7,3 +7,7 @@ export const UPDATE_CONFIG = 'UPDATE_CONFIG';
 export const OPEN_COMMENTS = 'OPEN_COMMENTS';
 export const CLOSE_COMMENTS = 'CLOSE_COMMENTS';
 export const ADD_ITEM = 'ADD_ITEM';
+
+// TODO: Deprecate old constants
+
+export const ADD_EXTERNAL_CONFIG = 'ADD_EXTERNAL_CONFIG';

client/coral-framework/reducers/config.js

@@ -0,0 +1,15 @@
+import {ADD_EXTERNAL_CONFIG} from '../constants/config';
+
+const initialState = {};
+
+export default function config(state = initialState, action) {
+  switch (action.type) {
+  case ADD_EXTERNAL_CONFIG:
+    return {
+      ...state,
+      ...action.config
+    };
+  default:
+    return state;
+  }
+}

client/coral-framework/reducers/index.js

@@ -1,6 +1,7 @@
 import auth from './auth';
 import user from './user';
 import asset from './asset';
+import config from './config';
 import {reducer as commentBox} from '../../coral-plugin-commentbox';
 import {pluginReducers} from '../helpers/plugins';
 
@@ -8,6 +9,7 @@ export default {
   auth,
   user,
   asset,
+  config,
   commentBox,
   ...pluginReducers
 };

views/article.ejs

@@ -28,7 +28,8 @@
       Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
         talk: '/',
         asset_url: '<%= asset_url ? asset_url : '' %>',
-        asset_id: '<%= asset_id ? asset_id : '' %>'
+        asset_id: '<%= asset_id ? asset_id : '' %>',
+        hola: 'asd'
       })
     "></script>
   </main>