From 78286d3374b392183467fa14cebb8870ab447710 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Apr 2017 20:51:18 -0300
Subject: [PATCH] Running CommentBox reducers and triggering actions from
 Plugins!

---
 client/coral-framework/reducers/index.js      |  2 +
 client/coral-plugin-commentbox/CommentBox.js  | 38 ++++++++-----------
 client/coral-plugin-commentbox/actions.js     |  9 +++++
 client/coral-plugin-commentbox/constants.js   |  2 +
 client/coral-plugin-commentbox/index.js       |  5 +++
 client/coral-plugin-commentbox/reducer.js     | 25 ++++++++++++
 .../client/components/OffTopicCheckbox.js     | 36 +++++++-----------
 7 files changed, 71 insertions(+), 46 deletions(-)
 create mode 100644 client/coral-plugin-commentbox/actions.js
 create mode 100644 client/coral-plugin-commentbox/constants.js
 create mode 100644 client/coral-plugin-commentbox/index.js
 create mode 100644 client/coral-plugin-commentbox/reducer.js

diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js
index fae7e60d5..d5b66bbae 100644
--- a/client/coral-framework/reducers/index.js
+++ b/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
 };
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index c506da0cc..37bb58f67 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/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);
diff --git a/client/coral-plugin-commentbox/actions.js b/client/coral-plugin-commentbox/actions.js
new file mode 100644
index 000000000..ead900070
--- /dev/null
+++ b/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
+});
\ No newline at end of file
diff --git a/client/coral-plugin-commentbox/constants.js b/client/coral-plugin-commentbox/constants.js
new file mode 100644
index 000000000..b1290f02e
--- /dev/null
+++ b/client/coral-plugin-commentbox/constants.js
@@ -0,0 +1,2 @@
+export const ADD_TAG = 'ADD_TAG';
+export const REMOVE_TAG = 'REMOVE_TAG';
diff --git a/client/coral-plugin-commentbox/index.js b/client/coral-plugin-commentbox/index.js
new file mode 100644
index 000000000..9f166caeb
--- /dev/null
+++ b/client/coral-plugin-commentbox/index.js
@@ -0,0 +1,5 @@
+import reducer from './reducer';
+
+export default {
+  reducer
+};
diff --git a/client/coral-plugin-commentbox/reducer.js b/client/coral-plugin-commentbox/reducer.js
new file mode 100644
index 000000000..f956be1f1
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
index 8944bee89..e681eb412 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
+++ b/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);