diff --git a/src/views/preview/comment/compose-comment.jsx b/src/views/preview/comment/compose-comment.jsx index 20fd9100e..cef1695d0 100644 --- a/src/views/preview/comment/compose-comment.jsx +++ b/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({ diff --git a/test/unit/components/compose-comment.test.jsx b/test/unit/components/compose-comment.test.jsx index c49e9dd75..725b17a07 100644 --- a/test/unit/components/compose-comment.test.jsx +++ b/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);