Support for hooks, preSubmit and postSubmit

client/coral-plugin-commentbox/CommentBox.js

@@ -4,6 +4,7 @@ import translations from './translations.json';
 import {Button} from 'coral-ui';
 import {Slot} from 'coral-framework';
 import styles from './styles.css';
+import merge from 'lodash/merge';
 
 const name = 'coral-plugin-commentbox';
 
@@ -23,7 +24,11 @@ class CommentBox extends Component {
 
   state = {
     body: '',
-    username: ''
+    username: '',
+    hooks: {
+      preSubmit: {},
+      postSubmit: {}
+    }
   }
 
   postComment = () => {
@@ -50,10 +55,24 @@ class CommentBox extends Component {
       return;
     }
     !isReply && updateCountCache(assetId, countCache + 1);
+
     postItem(comment, 'comments')
       .then(({data}) => {
         const postedComment = data.createComment.comment;
 
+        // Execute postComment Hooks
+
+        Object.keys(this.state.hooks.postSubmit).forEach(hook => {
+
+          // Hooks MUST be functions
+
+          if (typeof this.state.hooks.postSubmit[hook] === 'function') {
+            this.state.hooks.postSubmit[hook](data);
+          } else {
+            console.warn(`Hooks MUST be functions. ${hook} will not be executed.`);
+          }
+        });
+
         if (postedComment.status === 'REJECTED') {
           addNotification('error', lang.t('comment-post-banned-word'));
           !isReply && updateCountCache(assetId, countCache);
@@ -70,6 +89,15 @@ class CommentBox extends Component {
     this.setState({body: ''});
   }
 
+  addCommentHooks = (hooks = {}) => {
+    if (typeof hooks === 'object') {
+      this.setState(() => ({
+        hooks: merge(this.state.hooks, hooks)
+      }));
+    }
+    return this.state.hooks;
+  }
+
   render () {
     const {styles, isReply, authorId, charCount} = this.props;
     let {cancelButtonClicked} = this.props;
@@ -105,7 +133,13 @@ class CommentBox extends Component {
           }
         </div>
         <div className={`${name}-button-container`}>
-          <Slot fill="commentBoxDetail" inline />
+
+          <Slot
+            fill="commentBoxDetail"
+            addCommentHooks={this.addCommentHooks}
+            inline
+          />
+
           {
             isReply && (
               <Button

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

@@ -3,14 +3,33 @@ import styles from './styles.css';
 
 class OffTopicCheckbox extends React.Component {
 
-  handleChange = () => {
-    console.log('handle Change');
+  handleChange = (e) => {
+
+    if (e.target.checked) {
+      this.props.addCommentHooks({
+        postSubmit: {
+          addTag: (data) => {
+            console.log('This is a hook after posting')
+          }
+        }
+      })
+    } else {
+      this.props.addCommentHooks({
+        postSubmit: {
+          addTag: () => {}
+        }
+      })
+    }
   }
 
   render() {
+
+
+
     return (
       <div className={styles.offTopic}>
         <label>
+          {/*{console.log(this.props)}*/}
           <input type="checkbox" onChange={this.handleChange}/>
           Off-Topic
         </label>