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

Don't show the compose box if they're muted, but do show it, but greyed 
out, if they just posted a comment that resulted in a mute.

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
         };
     }
     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',
@@ -264,6 +266,7 @@ class ComposeComment extends React.Component {
                             />
                         ) : null}
                     </div>
+                ) : null }
             </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,7 @@ ComposeComment.propTypes = {
 };
 
 const mapStateToProps = state => ({
+    muteStatus: state.session.session.permissions.mute_status,
     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;