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

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

@@ -40,16 +40,27 @@ class ComposeComment extends React.Component {
             'handleInput',
             'handleMuteClose',
             'handleMuteOpen',
-            'isMuted'
+            'isMuted',
+            'setupMuteExpirationTimeout'
         ]);
+        const muteExpiresAtMs = this.props.muteStatus.muteExpiresAt * 1000; // convert to ms
         this.state = {
             message: '',
             status: ComposeStatus.EDITING,
             error: null,
             appealId: null,
             muteOpen: false,
-            muteExpiresAtMs: this.props.muteStatus.muteExpiresAt * 1000 // convert to ms
+            muteExpiresAtMs: muteExpiresAtMs
         };
+        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({muteExpiresAtMs: 0, muteOpen: false});
+        }, muteExpiresAtMs - Date.now());
     }
     handleInput (event) {
         this.setState({
@@ -86,6 +97,7 @@ class ComposeComment extends React.Component {
                     if (this.shouldShowMuteModal(body.status.mute_status.offenses)) {
                         muteOpen = true;
                     }
+                    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({
@@ -114,6 +115,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);
         // 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);