scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 10:58:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source
This commit is contained in:
picklesrus 2020-12-15 14:49:35 -05:00
parent 90ed44d6a8
commit 19b260a4a5
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/views/preview/comment/compose-comment.jsx
View file

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

3
test/unit/components/compose-comment.test.jsx
View file

@ -95,6 +95,7 @@ describe('Compose Comment test', () => {
}); });
test('Comment Status initialized properly when muted', () => { test('Comment Status initialized properly when muted', () => {
jest.useFakeTimers();
const realDateNow = Date.now.bind(global.Date); const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0; global.Date.now = () => 0;
const mutedStore = mockStore({ const mutedStore = mockStore({
@ -114,6 +115,8 @@ describe('Compose Comment test', () => {
const commentInstance = component.instance(); const commentInstance = component.instance();
// Check conversion to ms from seconds is done at init time. // Check conversion to ms from seconds is done at init time.
expect(commentInstance.state.muteExpiresAtMs).toEqual(5 * 1000); 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. // 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('FlexRow.compose-comment').exists()).toEqual(false);
expect(component.find('MuteModal').exists()).toEqual(false); expect(component.find('MuteModal').exists()).toEqual(false);