Passing character count into commentbox.

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

@@ -90,7 +90,7 @@ class CommentStream extends Component {
     const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0];
     const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
     const {actions, users, comments} = this.props.items;
-    const {status, moderation, closedMessage} = this.props.config;
+    const {status, moderation, closedMessage, charCount, charCountEnable} = this.props.config;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
     const {activeTab} = this.state;
     const banned = (this.props.userData.status === 'banned');
@@ -128,7 +128,7 @@ class CommentStream extends Component {
                         currentUser={this.props.auth.user}
                         banned={banned}
                         author={user}
-                      />
+                        charCount={charCountEnable && charCount}/>
                     </RestrictedContent>
                     </div>
                   : <p>{closedMessage}</p>
@@ -198,6 +198,7 @@ class CommentStream extends Component {
                         parent_id={commentId}
                         premod={moderation}
                         currentUser={user}
+                        charCount={charCountEnable && charCount}
                         showReply={comment.showReply}/>
                       {
                         comment.children &&
@@ -257,6 +258,7 @@ class CommentStream extends Component {
                               premod={moderation}
                               banned={banned}
                               currentUser={user}
+                              charCount={charCountEnable && charCount}
                               showReply={reply.showReply}/>
                           </div>;
                         })

client/coral-plugin-commentbox/CommentBox.js

@@ -23,7 +23,18 @@ class CommentBox extends Component {
   }
 
   postComment = () => {
-    const {postItem, updateItem, id, parent_id, child_id, addNotification, appendItemArray, premod, author} = this.props;
+    const {
+      postItem,
+      updateItem,
+      id,
+      parent_id,
+      child_id,
+      addNotification,
+      appendItemArray,
+      premod,
+      author
+    } = this.props;
+
     let comment = {
       body: this.state.body,
       asset_id: id,
@@ -59,8 +70,16 @@ class CommentBox extends Component {
     this.setState({body: ''});
   }
 
+  onUpdateComment = (e) => {
+    const body = e.target.value;
+    if (!this.props.charCount || body.length > this.props.charCount) {
+      this.setState({body});
+    }
+  }
+
   render () {
-    const {styles, reply, author} = this.props;
+    const {styles, reply, author, charCount} = this.props;
+    const length = this.state.body.length;
     // How to handle language in plugins? Should we have a dependency on our central translation file?
     return <div>
       <div
@@ -80,6 +99,12 @@ class CommentBox extends Component {
             onChange={(e) => this.setState({body: e.target.value})}
             rows={3}/>
         </div>
+        <div className={`${name}-char-count ${length > charCount && `${name}-char-max`}`}>
+          {
+            charCount &&
+            `${length}/${charCount}`
+          }
+        </div>
         <div className={`${name}-button-container`}>
           { author && (
               <Button