Continued work

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

@@ -49,7 +49,7 @@ class ComposeComment extends React.Component {
             this.props.muteStatus.muteExpiresAt * 1000 : 0; // convert to ms
         this.state = {
             message: '',
-            status: muteExpiresAtMs > 0 ? ComposeStatus.COMPOSE_DISALLOWED : ComposeStatus.EDITING,
+            status: muteExpiresAtMs > Date.now() ? ComposeStatus.COMPOSE_DISALLOWED : ComposeStatus.EDITING,
             error: null,
             appealId: null,
             muteOpen: muteExpiresAtMs > Date.now() && this.props.isReply,
@@ -162,7 +162,7 @@ class ComposeComment extends React.Component {
         // Cancel (i.e. complete) the reply action if the user clicked on the reply button while
         // alreay muted. This "closes" the reply.  If they just got muted, we want to leave it open
         // so the blue CommentingStatus box shows.
-        if (this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE) {
+        if (this.props.isReply && this.state.status === ComposeStatus.COMPOSE_DISALLOWED) {
             this.handleCancel();
         }
     }
@@ -186,6 +186,11 @@ class ComposeComment extends React.Component {
             return false;
         }
 
+        // TODO: Check with Kathy, but we think you should always see the modal when you reply?
+        if (this.props.isReply) {
+            return true;
+        }
+
         // If the user is already muted (for example, in a different tab),
         // do not show modal because it would be confusing
         if (!justMuted) {
@@ -215,7 +220,7 @@ class ComposeComment extends React.Component {
         // Decides which step of the mute modal to start on. If this was a reply button click,
         // we show them the step that tells them how much time is left on their mute, otherwise
         // they start at the beginning of the progression.
-        return this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE ?
+        return this.props.isReply && this.state.status === ComposeStatus.COMPOSE_DISALLOWED ?
             MuteModal.steps.MUTE_INFO : MuteModal.steps.COMMENT_ISSUE;
     }
 
@@ -282,7 +287,15 @@ class ComposeComment extends React.Component {
                 {(this.isMuted() && !(this.props.isReply && this.state.status !== ComposeStatus.REJECTED_MUTE)) ? (
                     <FlexRow className="comment">
                         <CommentingStatus>
-                            <p><FormattedMessage id={this.state.status === ComposeStatus.REJECTED_MUTE ? this.getMuteMessageInfo().commentType : this.getMuteMessageInfo().commentTypePast} /></p>
+                            <p>
+                                <FormattedMessage 
+                                    id={
+                                        this.state.status === ComposeStatus.REJECTED_MUTE ?
+                                            this.getMuteMessageInfo().commentType :
+                                            this.getMuteMessageInfo().commentTypePast
+                                    }
+                                />
+                            </p>
                             <p>
                                 <FormattedMessage
                                     id="comments.muted.duration"

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

@@ -90,13 +90,14 @@ describe('Compose Comment test', () => {
         expect(component.find('FlexRow.compose-error-row').exists()).toEqual(false);
     });
 
-    test('Comment Status shows but compose box does not when mute expiration in the future ', () => {
+    test('Comment Status shows but compose box does not when you load the page and you are already muted', () => {
         const realDateNow = Date.now.bind(global.Date);
         global.Date.now = () => 0;
         const component = getComposeCommentWrapper({});
         const commentInstance = component.instance();
-        commentInstance.setState({muteExpiresAtMs: 100});
+        commentInstance.setState({muteExpiresAtMs: 100, status: 'COMPOSE_DISALLOWED'});
         component.update();
+        
         // 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);
@@ -236,7 +237,7 @@ describe('Compose Comment test', () => {
         const commentInstance = component.instance();
         commentInstance.setState({
             error: 'some error',
-            status: 'FLOOD'
+            status: 'REJECTED'
         });
         component.update();
         expect(component.find('FlexRow.compose-error-row').exists()).toEqual(true);
@@ -338,7 +339,7 @@ describe('Compose Comment test', () => {
         expect(component.find('MuteModal').props().showFeedback).toBe(true);
 
         commentInstance.setState({
-            status: 'REJECTED_MUTE',
+            status: 'COMPOSE_DISALLOWED',
             error: 'isMute',
             showWarning: true,
             muteOpen: true
@@ -392,7 +393,7 @@ describe('Compose Comment test', () => {
             offenses: [offense]
         };
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(true);
+        expect(commentInstance.shouldShowMuteModal(muteStatus, true)).toBe(true);
         global.Date.now = realDateNow;
     });
 
@@ -413,7 +414,7 @@ describe('Compose Comment test', () => {
             offenses: offenses
         };
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(false);
+        expect(commentInstance.shouldShowMuteModal(muteStatus, true)).toBe(false);
         global.Date.now = realDateNow;
     });
 
@@ -435,7 +436,25 @@ describe('Compose Comment test', () => {
             showWarning: true
         };
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(true);
+        expect(commentInstance.shouldShowMuteModal(muteStatus, true)).toBe(true);
+        global.Date.now = realDateNow;
+    });
+
+    test('shouldShowMuteModal is false when the user is already muted, even when only 1 recent offesnse ', () => {
+        const realDateNow = Date.now.bind(global.Date);
+        global.Date.now = () => 0;
+        // Since Date.now mocked to 0 above, we just need a small number to make
+        // it look like it was created < 2 minutes ago.
+        const offense = {
+            expiresAt: '1000',
+            createdAt: '-60' // ~1 ago min given shouldShowMuteModal's conversions,
+        };
+        const muteStatus = {
+            offenses: [offense]
+        };
+        const justMuted = false;
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        expect(commentInstance.shouldShowMuteModal(muteStatus, justMuted)).toBe(false);
         global.Date.now = realDateNow;
     });
 
@@ -455,7 +474,7 @@ describe('Compose Comment test', () => {
     test('getMuteModalStartStep: A reply click when already muted ', () => {
         const commentInstance = getComposeCommentWrapper({isReply: true}).instance();
         commentInstance.setState({
-            status: 'EDITING'
+            status: 'COMPOSE_DISALLOWED'
         });
         expect(commentInstance.getMuteModalStartStep()).toBe(1);
     });