Merge pull request #529 from coralproject/undo-mobile-fix-attempt

reset the button css fixes

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}

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

@@ -159,6 +159,10 @@ class Embed extends React.Component {
 
     const userBox = <UserBox user={user} logout={() => this.props.logout().then(refetch)}  changeTab={this.changeTab}/>;
 
+    // TODO: This is a quickfix and will be replaced after our refactor.
+    const ignoredUsers = this.props.userData.ignoredUsers;
+    const commentIsIgnored = (comment) => ignoredUsers && ignoredUsers.includes(comment.user.id);
+
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
@@ -210,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>
@@ -242,6 +247,7 @@ class Embed extends React.Component {
                 loadMore={this.props.loadMore}
                 deleteAction={this.props.deleteAction}
                 showSignInDialog={this.props.showSignInDialog}
+                commentIsIgnored={commentIsIgnored}
                 key={highlightedComment.id}
                 reactKey={highlightedComment.id}
                 comment={highlightedComment} />
@@ -273,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

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}
                 />
           )

client/coral-embed-stream/style/default.css

@@ -187,6 +187,7 @@ hr {
 /* Comment Box Styles */
 .coral-plugin-commentbox-container {
   display: flex;
+  width: 100%;
 }
 
 .coral-plugin-commentbox-textarea {
@@ -194,7 +195,8 @@ hr {
   padding: 5px;
   min-height: 100px;
   margin-top: 10px;
-  font-size: 14px;
+  font-size: 16px;
+  border: 1px solid #ccc;
 }
 
 .coral-plugin-commentbox-button-container {

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,

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,

graph/mutators/comment.js

@@ -180,9 +180,9 @@ const createPublicComment = (context, commentInput) => {
  * @param {String} status      the new status of the comment
  */
 
-const setCommentStatus = ({loaders: {Comments}}, {id, status}) => {
+const setCommentStatus = ({user, loaders: {Comments}}, {id, status}) => {
   return CommentsService
-    .setStatus(id, status)
+    .pushStatus(id, status, user ? user.id : null)
     .then((comment) => {
 
       // If the loaders are present, clear the caches for these values because we

graph/resolvers/flag_action.js

@@ -8,7 +8,9 @@ const FlagAction = {
     return group_id;
   },
   user({user_id}, _, {loaders: {Users}}) {
-    return Users.getByID.load(user_id);
+    if (user_id) {
+      return Users.getByID.load(user_id);
+    }
   },
 };
 

services/comments.js

@@ -213,7 +213,15 @@ module.exports = class CommentsService {
    * @return {Promise}
    */
   static pushStatus(id, status, assigned_by = null) {
-    return CommentModel.update({id}, {
+
+    // Check to see if the comment status is in the allowable set of statuses.
+    if (STATUSES.indexOf(status) === -1) {
+
+      // Comment status is not supported! Error out here.
+      return Promise.reject(new Error(`status ${status} is not supported`));
+    }
+
+    return CommentModel.findOneAndUpdate({id}, {
       $push: {
         status_history: {
           type: status,
@@ -292,25 +300,4 @@ module.exports = class CommentsService {
 
     return CommentModel.find(query);
   }
-
-  /**
-   * Sets Comment Status
-   * @param {String} id          identifier of the comment  (uuid)
-   * @param {String} status      the new status of the comment
-   * @return {Promise}
-   */
-
-  static setStatus(id, status) {
-
-    // Check to see if the comment status is in the allowable set of statuses.
-    if (STATUSES.indexOf(status) === -1) {
-
-      // Comment status is not supported! Error out here.
-      return Promise.reject(new Error(`status ${status} is not supported`));
-    }
-
-    return CommentModel.findOneAndUpdate({id}, {
-      $set: {status}
-    });
-  }
 };