Running CommentBox reducers and triggering actions from Plugins!

client/coral-framework/reducers/index.js

@@ -1,11 +1,13 @@
 import auth from './auth';
 import user from './user';
 import asset from './asset';
+import {reducer as commentBox} from '../../coral-plugin-commentbox';
 import {pluginReducers} from '../helpers/plugins';
 
 export default {
   auth,
   user,
   asset,
+  commentBox,
   ...pluginReducers
 };

client/coral-plugin-commentbox/CommentBox.js

@@ -3,6 +3,8 @@ import {I18n} from '../coral-framework';
 import translations from './translations.json';
 import {Button} from 'coral-ui';
 import {Slot} from 'coral-framework';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 
 const name = 'coral-plugin-commentbox';
 
@@ -13,10 +15,7 @@ class CommentBox extends Component {
 
     this.state = {
       username: '',
-      comment: {
-        body: '',
-        tags: []
-      },
+      body: '',
       hooks: {
         preSubmit: [],
         postSubmit: []
@@ -35,13 +34,14 @@ class CommentBox extends Component {
       countCache,
       addNotification,
       updateCountCache,
-      commentPostedHandler,
+      commentPostedHandler
     } = this.props;
 
     let comment = {
       asset_id: assetId,
       parent_id: parentId,
-      ...this.state.comment
+      body: this.state.body,
+      ...this.props.commentBox
     };
 
     !isReply && updateCountCache(assetId, countCache + 1);
@@ -70,12 +70,7 @@ class CommentBox extends Component {
       })
       .catch((err) => console.error(err));
 
-    this.setState({
-      comment: {
-        ...this.state.comment,
-        body: ''
-      }
-    });
+    this.setState({body: ''});
   }
 
   registerHook = (hookType = '', hook = () => {}) => {
@@ -126,20 +121,13 @@ class CommentBox extends Component {
     });
   }
 
-  handleChange = e => {
-    this.setState({
-      comment: {
-        ...this.state.comment,
-        body: e.target.value
-      }
-    });
-  }
+  handleChange = e => this.setState({body: e.target.value});
 
   render () {
     const {styles, isReply, authorId, charCount} = this.props;
     let {cancelButtonClicked} = this.props;
 
-    const length = this.state.comment.body.length;
+    const length = this.state.body.length;
     const enablePostComment = !length || (charCount && length > charCount);
 
     if (isReply && typeof cancelButtonClicked !== 'function') {
@@ -159,7 +147,7 @@ class CommentBox extends Component {
           <textarea
             className={`${name}-textarea`}
             style={styles && styles.textarea}
-            value={this.state.comment.body}
+            value={this.state.body}
             placeholder={lang.t('comment')}
             id={isReply ? 'replyText' : 'commentText'}
             onChange={this.handleChange}
@@ -213,6 +201,10 @@ CommentBox.propTypes = {
   currentUser: PropTypes.object
 };
 
-export default CommentBox;
+const mapStateToProps = ({commentBox}) => ({commentBox});
+
+const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(CommentBox);
 
 const lang = new I18n(translations);

client/coral-plugin-commentbox/actions.js

@@ -0,0 +1,9 @@
+export const addTag = tag => ({
+  type: 'ADD_TAG',
+  tag
+});
+
+export const removeTag = idx => ({
+  type: 'REMOVE_TAG',
+  idx
+});

client/coral-plugin-commentbox/constants.js

@@ -0,0 +1,2 @@
+export const ADD_TAG = 'ADD_TAG';
+export const REMOVE_TAG = 'REMOVE_TAG';

client/coral-plugin-commentbox/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+
+export default {
+  reducer
+};

client/coral-plugin-commentbox/reducer.js

@@ -0,0 +1,25 @@
+import {ADD_TAG, REMOVE_TAG} from './constants';
+
+const initialState = {
+  tags: []
+};
+
+export default function commentBox (state = initialState, action) {
+  switch (action.type) {
+  case ADD_TAG :
+    return {
+      ...state,
+      tags: [...state.tags, action.tag]
+    };
+  case REMOVE_TAG :
+    return {
+      ...state,
+      tags: [
+        ...state.tags.slice(0, action.idx),
+        ...state.tags.slice(action.idx + 1)
+      ]
+    };
+  default :
+    return state;
+  }
+}

plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
 import styles from './styles.css';
 
 class OffTopicCheckbox extends React.Component {
@@ -9,29 +12,10 @@ class OffTopicCheckbox extends React.Component {
 
   handleChange = (e) => {
     if (e.target.checked) {
-      this.props.updateComment(this.addTag)
+      this.props.addTag(this.label)
     } else {
-      this.props.updateComment(this.removeTag)
-    }
-  }
-
-  addTag = (state) => ({
-    comment: {
-      ...state.comment,
-      tags: [...state.comment.tags, this.label]
-    }
-  })
-
-  removeTag = (state) => {
-    const idx = state.comment.tags.indexOf(this.label);
-    return {
-      comment: {
-        ...state.comment,
-        tags: [
-          ...state.comment.tags.slice(0, idx),
-          ...state.comment.tags.slice(idx + 1)
-        ]
-      }
+      const idx = this.props.commentBox.tags.indexOf(this.label);
+      this.props.removeTag(idx);
     }
   }
 
@@ -47,4 +31,10 @@ class OffTopicCheckbox extends React.Component {
   }
 }
 
-export default OffTopicCheckbox;
+
+const mapStateToProps = ({commentBox}) => ({commentBox});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({addTag, removeTag}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);