Merge pull request #167 from coralproject/view-char-count

View char count

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-embed-stream/style/default.css

@@ -95,7 +95,7 @@ hr {
   margin-top: 10px;
 }
 
-#coralStream .coral-plugin-commentbox-button {
+.coral-plugin-commentbox-button {
   float: right;
   margin-top: 10px;
   padding: 5px 10px;
@@ -111,6 +111,16 @@ hr {
   margin-bottom: 5px;
 }
 
+.coral-plugin-commentbox-char-count {
+  color: #ccc;
+  text-align: right;
+  font-size: 12px;
+}
+
+.coral-plugin-commentbox-char-max {
+  color: #d50000;
+}
+
 /* Comment styles */
 .comment {
   margin-bottom: 10px;

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,
@@ -42,6 +53,10 @@ class CommentBox extends Component {
     if (child_id || parent_id) {
       updateItem(child_id || parent_id, 'showReply', false, 'comments');
     }
+
+    if (this.props.charCount && this.state.body.length > this.props.charCount) {
+      return;
+    }
     postItem(comment, 'comments')
       .then((postedComment) => {
         const commentId = postedComment.id;
@@ -59,8 +74,8 @@ class CommentBox extends Component {
   }
 
   render () {
-    const {styles, reply, author} = this.props;
-    // How to handle language in plugins? Should we have a dependency on our central translation file?
+    const {styles, reply, author, charCount} = this.props;
+    const length = this.state.body.length;
     return <div>
       <div
         className={`${name}-container`}>
@@ -79,10 +94,16 @@ 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 &&
+            `${charCount - length} ${lang.t('characters-remaining')}`
+          }
+        </div>
         <div className={`${name}-button-container`}>
           { author && (
               <Button
-                cStyle='darkGrey'
+                cStyle={length > charCount ? 'lightGrey' : 'darkGrey'}
                 className={`${name}-button`}
                 onClick={this.postComment}>
                 {lang.t('post')}

client/coral-plugin-commentbox/translations.json

@@ -6,7 +6,8 @@
     "name": "Name",
     "comment-post-notif": "Your comment has been posted.",
     "comment-post-notif-premod": "Thank you for posting. Our moderation team will review your comment shortly.",
-    "comment-post-banned-word":  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team."
+    "comment-post-banned-word":  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team.",
+    "characters-remaining": " characters remaining"
   },
   "es": {
     "post": "Publicar",
@@ -15,6 +16,7 @@
     "name": "Nombre",
     "comment-post-notif": "Tu comentario ha sido publicado.",
     "comment-post-notif-premod": "Gracias por comentar. Nuestro equipo de moderación va a revisarlo muy pronto.",
-    "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación."
+    "comment-post-banned-word":  "Tu comentario contiene una o más palabras que no estan permitidasen nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación.",
+    "characters-remaining": "carácteres restantes"
   }
 }

client/coral-ui/components/Button.css

@@ -77,6 +77,17 @@
   background: #696969;
 }
 
+.type--lightGrey {
+  color: white;
+  background: #ccc;
+  cursor: default;
+}
+
+.type--lightGrey:hover {
+  color: white;
+  background: #ccc;
+}
+
 .type--green {
   color: white;
   background: #00897B;

routes/api/comments/index.js

@@ -96,7 +96,13 @@ router.post('/', wordlist.filter('body'), (req, res, next) => {
 
       // Return `premod` if pre-moderation is enabled and an empty "new" status
       // in the event that it is not in pre-moderation mode.
-      .then(({moderation}) => moderation === 'pre' ? 'premod' : '');
+      .then(({moderation, charCountEnable, charCount}) => {
+        // Reject if the comment is too long
+        if (charCountEnable && body.length > charCount) {
+          return 'rejected';
+        }
+        return moderation === 'pre' ? 'premod' : '';
+      });
   }
 
   status.then((status) => Comment.publicCreate({

tests/routes/api/comments/index.js

@@ -197,6 +197,28 @@ describe('/api/v1/comments', () => {
         });
     });
 
+    it('should create a rejected comment if the body is above the character count', () => {
+      return Asset
+        .findOrCreateByUrl('https://coralproject.net/article1')
+        .then((asset) => {
+          return Asset
+            .overrideSettings(asset.id, {charCountEnable: true, charCount: 10})
+            .then(() => asset);
+        })
+        .then((asset) => {
+          return chai.request(app)
+            .post('/api/v1/comments')
+            .set(passport.inject({roles: []}))
+            .send({'body': 'This is way way way way way too long.', 'author_id': '123', 'asset_id': asset.id, 'parent_id': ''});
+        })
+        .then((res) => {
+          expect(res).to.have.status(201);
+          expect(res.body).to.have.property('id');
+          expect(res.body).to.have.property('asset_id');
+          expect(res.body).to.have.property('status', 'rejected');
+        });
+    });
+
     it('shouldn\'t create a comment when the asset has expired commenting', () => {
       return Asset.create({
         closedAt: new Date().setDate(0),