Merge pull request #4764 from picklesrus/timeout-mute

Add a timeout to stop displaying the mute status when a mute expires.

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

@@ -40,19 +40,31 @@ class ComposeComment extends React.Component {
             'handleInput',
             'handleMuteClose',
             'handleMuteOpen',
-            'isMuted'
+            'isMuted',
+            'setupMuteExpirationTimeout'
         ]);
+        const muteExpiresAtMs = this.props.muteStatus.muteExpiresAt ?
+            this.props.muteStatus.muteExpiresAt * 1000 : 0; // convert to ms
         this.state = {
             message: '',
             status: ComposeStatus.EDITING,
             error: null,
             appealId: null,
             muteOpen: false,
-            muteExpiresAtMs: this.props.muteStatus.muteExpiresAt ?
-                this.props.muteStatus.muteExpiresAt * 1000 : 0, // convert to ms
+            muteExpiresAtMs: muteExpiresAtMs,
             muteType: this.props.muteStatus.currentMessageType,
             showWarning: this.props.muteStatus.showWarning ? this.props.muteStatus.showWarning : false
         };
+        if (this.isMuted()) {
+            this.setupMuteExpirationTimeout(muteExpiresAtMs);
+        }
+    }
+    setupMuteExpirationTimeout (muteExpiresAtMs) {
+        // Change state when the mute expiration fires if the user is still on the page.
+        setTimeout(() => {
+            this.setState(
+                {message: '', muteExpiresAtMs: 0, muteOpen: false, status: ComposeStatus.EDITING, error: null});
+        }, muteExpiresAtMs - Date.now());
     }
     handleInput (event) {
         this.setState({
@@ -93,6 +105,7 @@ class ComposeComment extends React.Component {
                     }
                     showWarning = body.status.mute_status.showWarning;
                     muteType = body.status.mute_status.muteType;
+                    this.setupMuteExpirationTimeout(muteExpiresAtMs);
                 }
                 // Note: does not reset the message state
                 this.setState({

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

@@ -95,6 +95,7 @@ describe('Compose Comment test', () => {
     });
 
     test('Comment Status initialized properly when muted', () => {
+        jest.useFakeTimers();
         const realDateNow = Date.now.bind(global.Date);
         global.Date.now = () => 0;
         const mutedStore = mockStore({
@@ -115,6 +116,8 @@ describe('Compose Comment test', () => {
         const commentInstance = component.instance();
         // Check conversion to ms from seconds is done at init time.
         expect(commentInstance.state.muteExpiresAtMs).toEqual(5 * 1000);
+        // Check we setup a timeout to expire the widget when timeout reached.
+        expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 5 * 1000);
         expect(commentInstance.state.showWarning).toBe(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);