From b2428371c7799b7357578eebf826357537c2c5bb Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 24 Apr 2017 13:09:41 -0600
Subject: [PATCH] enable character counting on replies

---
 client/coral-embed-stream/src/Comment.js     |  8 ++++++++
 client/coral-embed-stream/src/Embed.js       |  5 ++++-
 client/coral-embed-stream/src/Stream.js      |  7 +++++++
 client/coral-plugin-commentbox/CommentBox.js | 10 ++++++----
 client/coral-plugin-replies/ReplyBox.js      | 17 ++++++++++++++++-
 5 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 674c03ec5..63b3ef8dc 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -64,6 +64,8 @@ class Comment extends React.Component {
     currentUser: PropTypes.shape({
       id: PropTypes.string.isRequired
     }),
+    charCountEnable: PropTypes.bool.isRequired,
+    maxCharCount: PropTypes.number,
     comment: PropTypes.shape({
       depth: PropTypes.number,
       action_summaries: PropTypes.array.isRequired,
@@ -121,6 +123,8 @@ class Comment extends React.Component {
       ignoreUser,
       disableReply,
       commentIsIgnored,
+      maxCharCount,
+      charCountEnable,
     } = this.props;
 
     const likeSummary = getActionSummary('LikeActionSummary', comment);
@@ -243,6 +247,8 @@ class Comment extends React.Component {
               commentPostedHandler={() => {
                 setActiveReplyBox('');
               }}
+              charCountEnable={charCountEnable}
+              maxCharCount={maxCharCount}
               setActiveReplyBox={setActiveReplyBox}
               parentId={parentId || comment.id}
               addNotification={addNotification}
@@ -273,6 +279,8 @@ class Comment extends React.Component {
                   addCommentTag={addCommentTag}
                   removeCommentTag={removeCommentTag}
                   ignoreUser={ignoreUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
                   showSignInDialog={showSignInDialog}
                   reactKey={reply.id}
                   key={reply.id}
diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index 51079097f..fbe24c8c7 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -214,7 +214,8 @@ class Embed extends React.Component {
                         isReply={false}
                         currentUser={this.props.auth.user}
                         authorId={user.id}
-                        charCount={asset.settings.charCountEnable && asset.settings.charCount} />
+                        charCountEnable={asset.settings.charCountEnable}
+                        maxCharCount={asset.settings.charCount} />
                      : null
                    }
                  </RestrictedContent>
@@ -278,6 +279,8 @@ class Embed extends React.Component {
                     deleteAction={this.props.deleteAction}
                     showSignInDialog={this.props.showSignInDialog}
                     comments={asset.comments}
+                    maxCharCount={asset.settings.charCount}
+                    charCountEnable={asset.settings.charCountEnable}
                     ignoredUsers={this.props.userData.ignoredUsers} />
                 </div>
                 <LoadMore
diff --git a/client/coral-embed-stream/src/Stream.js b/client/coral-embed-stream/src/Stream.js
index f91e496e8..ab64ee98f 100644
--- a/client/coral-embed-stream/src/Stream.js
+++ b/client/coral-embed-stream/src/Stream.js
@@ -15,6 +15,9 @@ class Stream extends React.Component {
       id: PropTypes.string
     }),
 
+    charCountEnable: PropTypes.bool.isRequired,
+    maxCharCount: PropTypes.number,
+
     // dispatch action to add a tag to a comment
     addCommentTag: PropTypes.func,
 
@@ -52,6 +55,8 @@ class Stream extends React.Component {
       pluginProps,
       ignoreUser,
       ignoredUsers,
+      charCountEnable,
+      maxCharCount,
     } = this.props;
     const commentIsIgnored = (comment) => ignoredUsers && ignoredUsers.includes(comment.user.id);
     return (
@@ -84,6 +89,8 @@ class Stream extends React.Component {
                   key={comment.id}
                   reactKey={comment.id}
                   comment={comment}
+                  maxCharCount={maxCharCount}
+                  charCountEnable={charCountEnable}
                   pluginProps={pluginProps}
                 />
           )
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 2a988711d..261c95414 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -121,11 +121,11 @@ class CommentBox extends Component {
   handleChange = e => this.setState({body: e.target.value});
 
   render () {
-    const {styles, isReply, authorId, charCount} = this.props;
+    const {styles, isReply, authorId, maxCharCount} = this.props;
     let {cancelButtonClicked} = this.props;
 
     const length = this.state.body.length;
-    const enablePostComment = !length || (charCount && length > charCount);
+    const enablePostComment = !length || (maxCharCount && length > maxCharCount);
 
     if (isReply && typeof cancelButtonClicked !== 'function') {
       console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply');
@@ -150,8 +150,8 @@ class CommentBox extends Component {
             onChange={this.handleChange}
             rows={3}/>
         </div>
-        <div className={`${name}-char-count ${length > charCount ? `${name}-char-max` : ''}`}>
-          {charCount && `${charCount - length} ${lang.t('characters-remaining')}`}
+        <div className={`${name}-char-count ${length > maxCharCount ? `${name}-char-max` : ''}`}>
+          {maxCharCount && `${maxCharCount - length} ${lang.t('characters-remaining')}`}
         </div>
         <div className={`${name}-button-container`}>
           <Slot
@@ -186,6 +186,8 @@ class CommentBox extends Component {
 }
 
 CommentBox.propTypes = {
+  charCountEnable: PropTypes.bool.isRequired,
+  maxCharCount: PropTypes.number,
   commentPostedHandler: PropTypes.func,
   postItem: PropTypes.func.isRequired,
   cancelButtonClicked: PropTypes.func,
diff --git a/client/coral-plugin-replies/ReplyBox.js b/client/coral-plugin-replies/ReplyBox.js
index 807ad6699..d6e2b5631 100644
--- a/client/coral-plugin-replies/ReplyBox.js
+++ b/client/coral-plugin-replies/ReplyBox.js
@@ -10,9 +10,22 @@ class ReplyBox extends Component {
   }
 
   render() {
-    const {styles, postItem, assetId, authorId, addNotification, parentId, commentPostedHandler, setActiveReplyBox} = this.props;
+    const {
+      styles,
+      postItem,
+      assetId,
+      authorId,
+      addNotification,
+      parentId,
+      commentPostedHandler,
+      setActiveReplyBox,
+      maxCharCount,
+      charCountEnable
+    } = this.props;
     return <div className={`${name}-textarea`} style={styles && styles.container}>
       <CommentBox
+        maxCharCount={maxCharCount}
+        charCountEnable={charCountEnable}
         commentPostedHandler={commentPostedHandler}
         parentId={parentId}
         cancelButtonClicked={setActiveReplyBox}
@@ -26,6 +39,8 @@ class ReplyBox extends Component {
 }
 
 ReplyBox.propTypes = {
+  charCountEnable: PropTypes.bool.isRequired,
+  maxCharCount: PropTypes.number,
   setActiveReplyBox: PropTypes.func.isRequired,
   commentPostedHandler: PropTypes.func,
   parentId: PropTypes.string,