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

Merge pull request #4655 from picklesrus/use-minutes

Browse source 
Disable comment box functionality when you've just been muted.
This commit is contained in:
picklesrus 2020-11-25 10:18:41 -05:00 committed by GitHub
commit 0f83b0c7c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 98 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/preview/comment/comment.scss
View file

@ -275,6 +275,10 @@
}
}
.compose-disabled {
opacity: .5;
}
.comments-root-reply {
margin-bottom: 1.5rem;
}

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

@ -38,8 +38,8 @@ class ComposeComment extends React.Component {
'handleCancel',
'handleInput',
'handleMuteClose',
'handleMuteOpen'
'handleMuteOpen',
'isMuted'
]);
this.state = {
message: '',
@ -115,6 +115,10 @@ class ComposeComment extends React.Component {
return Math.ceil(((timeStampInSec * 1000) - Date.now()) / (60 * 1000));
}
isMuted () {
return this.state.muteExpiresAt * 1000 > Date.now();
}
handleMuteClose () {
this.setState({
muteOpen: false
@ -163,10 +167,10 @@ class ComposeComment extends React.Component {
render () {
return (
<React.Fragment>
{this.state.status === ComposeStatus.REJECTED_MUTE ? (
{this.isMuted() ? (
<FlexRow className="comment">
<CommentingStatus>
<p>Scratch thinks your comment was disrespectful.</p>
<p>Scratch thinks your most recent comment was disrespectful.</p>
<p>
For the next {this.convertToMinutesFromNow(this.state.muteExpiresAt)} minutes you
won&apos;t be able to post comments.
@ -182,7 +186,10 @@ class ComposeComment extends React.Component {
</FlexRow>
) : null }
<div
className="flex-row comment"
className={classNames('flex-row',
'comment',
this.state.status === ComposeStatus.REJECTED_MUTE ?
'compose-disabled' : '')}
>
<a href={`/users/${this.props.user.username}`}>
<Avatar src={this.props.user.thumbnailUrl} />
@ -205,6 +212,7 @@ class ComposeComment extends React.Component {
className={classNames('compose-input',
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
'compose-valid' : 'compose-invalid')}
disabled={this.state.status === ComposeStatus.REJECTED_MUTE}
handleUpdate={onUpdate}
name="compose-comment"
type="textarea"

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

@ -66,23 +66,73 @@ describe('Compose Comment test', () => {
expect(component.find('FlexRow.compose-error-row').exists()).toEqual(false);
});
test('Comment Status shows when state is REJECTED_MUTE ', () => {
test('Comment Status shows when mute expiration in the future ', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0;
const component = getComposeCommentWrapper({});
const commentInstance = component.instance();
commentInstance.setState({status: 'REJECTED_MUTE'});
commentInstance.setState({muteExpiresAt: 100});
component.update();
expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
expect(component.find('MuteModal').exists()).toEqual(false);
expect(component.find('CommentingStatus').exists()).toEqual(true);
global.Date.now = realDateNow;
});
test('Comment Status shows when user just submitted a comment that got them muted', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0;
const component = getComposeCommentWrapper({});
const commentInstance = component.instance();
commentInstance.setState({
status: 'REJECTED_MUTE',
muteExpiresAt: 100
});
component.update();
expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
expect(component.find('MuteModal').exists()).toEqual(false);
expect(component.find('CommentingStatus').exists()).toEqual(true);
// Compose box is disabled
expect(component.find('InplaceInput.compose-input').exists()).toEqual(true);
expect(component.find('InplaceInput.compose-input').props().disabled).toBe(true);
global.Date.now = realDateNow;
});
test('Comment Error does not show for mutes', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0;
const component = getComposeCommentWrapper({});
const commentInstance = component.instance();
commentInstance.setState({
status: 'REJECTED_MUTE',
error: 'a mute error'
});
component.update();
expect(component.find('FlexRow.compose-error-row').exists()).toEqual(false);
expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
global.Date.now = realDateNow;
});
test('Comment Error does show for non-mute errors', () => {
const component = getComposeCommentWrapper({});
const commentInstance = component.instance();
commentInstance.setState({
error: 'some error',
status: 'FLOOD'
});
component.update();
expect(component.find('FlexRow.compose-error-row').exists()).toEqual(true);
expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
expect(component.find('InplaceInput.compose-input').exists()).toEqual(true);
expect(component.find('InplaceInput.compose-input').props().disabled).toBe(false);
});
test('Mute Modal shows when muteOpen is true ', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0;
const component = getComposeCommentWrapper({});
const commentInstance = component.instance();
commentInstance.setState({muteOpen: true});
component.update();
expect(component.find('FlexRow.compose-comment').exists()).toEqual(true);
expect(component.find('MuteModal').exists()).toEqual(true);
global.Date.now = realDateNow;
});
test('shouldShowMuteModal is false when list is undefined ', () => {
@ -130,4 +180,32 @@ describe('Compose Comment test', () => {
global.Date.now = realDateNow;
});
test('isMuted: expiration is in the future ', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0; // Set "now" to 0 for easier testing.
const commentInstance = getComposeCommentWrapper({}).instance();
commentInstance.setState({muteExpiresAt: 100});
expect(commentInstance.isMuted()).toBe(true);
global.Date.now = realDateNow;
});
test('isMuted: expiration is in the past ', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0;
const commentInstance = getComposeCommentWrapper({}).instance();
commentInstance.setState({muteExpiresAt: -100});
expect(commentInstance.isMuted()).toBe(false);
global.Date.now = realDateNow;
});
test('isMuted: expiration is not set ', () => {
const realDateNow = Date.now.bind(global.Date);
global.Date.now = () => 0;
const commentInstance = getComposeCommentWrapper({}).instance();
expect(commentInstance.isMuted()).toBe(false);
global.Date.now = realDateNow;
});
});