Merge pull request #4721 from picklesrus/comment-status

Show the comment status box on project page loads if the user is muted.

src/views/preview/comment/compose-comment.jsx

@@ -47,7 +47,8 @@ class ComposeComment extends React.Component {
             status: ComposeStatus.EDITING,
             error: null,
             appealId: null,
-            muteOpen: false
+            muteOpen: false,
+            muteExpiresAt: this.props.muteStatus.muteExpiresAt * 1000 // convert to ms
         };
     }
     handleInput (event) {
@@ -185,6 +186,7 @@ class ComposeComment extends React.Component {
                         </CommentingStatus>
                     </FlexRow>
                 ) : null }
+                {!this.isMuted() || (this.isMuted() && this.state.status === ComposeStatus.REJECTED_MUTE) ? (
                     <div
                         className={classNames('flex-row',
                             'comment',
@@ -252,6 +254,8 @@ class ComposeComment extends React.Component {
                                 </FlexRow>
                             </Formsy>
                         </FlexRow>
+                    </div>
+                ) : null }
                 {this.state.muteOpen ? (
                     <MuteModal
                         isOpen
@@ -263,7 +267,6 @@ class ComposeComment extends React.Component {
                         onRequestClose={this.handleMuteClose}
                     />
                 ) : null}
-                </div>
             </React.Fragment>
         );
     }
@@ -271,6 +274,10 @@ class ComposeComment extends React.Component {
 
 ComposeComment.propTypes = {
     commenteeId: PropTypes.number,
+    muteStatus: PropTypes.shape({
+        offenses: PropTypes.array,
+        muteExpiresAt: PropTypes.number
+    }),
     onAddComment: PropTypes.func,
     onCancel: PropTypes.func,
     parentId: PropTypes.number,
@@ -284,6 +291,9 @@ ComposeComment.propTypes = {
 };
 
 const mapStateToProps = state => ({
+    muteStatus: state.session.session.permissions.mute_status ?
+        state.session.session.permissions.mute_status :
+        {muteExpiresAt: 0, offenses: []},
     user: state.session.session.user
 });
 

test/unit/components/compose-comment.test.jsx

@@ -26,9 +26,11 @@ describe('Compose Comment test', () => {
         store = mockStore({
             session: {
                 session: {
-                    user: {}
+                    user: {},
+                    permissions: {
+                        mute_status: {}
+                    }
                 }
-
             }
         });
     });
@@ -74,14 +76,15 @@ describe('Compose Comment test', () => {
         expect(component.find('FlexRow.compose-error-row').exists()).toEqual(false);
     });
 
-    test('Comment Status shows when mute expiration in the future ', () => {
+    test('Comment Status shows but compose box does not when mute expiration in the future ', () => {
         const realDateNow = Date.now.bind(global.Date);
         global.Date.now = () => 0;
         const component = getComposeCommentWrapper({});
         const commentInstance = component.instance();
         commentInstance.setState({muteExpiresAt: 100});
         component.update();
-        expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
+        // Compose box should be hidden if muted unless they got muted due to a comment they just posted.
+        expect(component.find('FlexRow.compose-comment').exists()).toEqual(false);
         expect(component.find('MuteModal').exists()).toEqual(false);
         expect(component.find('CommentingStatus').exists()).toEqual(true);
         global.Date.now = realDateNow;
@@ -99,7 +102,7 @@ describe('Compose Comment test', () => {
         expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
         expect(component.find('MuteModal').exists()).toEqual(false);
         expect(component.find('CommentingStatus').exists()).toEqual(true);
-        // Compose box is disabled
+        // Compose box exists but is disabled
         expect(component.find('InplaceInput.compose-input').exists()).toEqual(true);
         expect(component.find('InplaceInput.compose-input').props().disabled).toBe(true);
         global.Date.now = realDateNow;