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

Merge pull request #4721 from picklesrus/comment-status

Browse source 
Show the comment status box on project page loads if the user is muted.
This commit is contained in:
picklesrus 2020-12-09 11:40:38 -05:00 committed by GitHub
commit 287426c379
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,7 +47,8 @@ class ComposeComment extends React.Component {
status: ComposeStatus.EDITING,
error: null,
appealId: null,
muteOpen: false
muteOpen: false,
muteExpiresAt: this.props.muteStatus.muteExpiresAt * 1000 // convert to ms
};
}
handleInput (event) {
@ -185,85 +186,87 @@ class ComposeComment extends React.Component {
</CommentingStatus>
</FlexRow>
) : null }
<div
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} />
</a>
<FlexRow className="compose-comment column">
{this.state.error && this.state.status !== ComposeStatus.REJECTED_MUTE ? (
<FlexRow className="compose-error-row">
<div className="compose-error-tip">
<FormattedMessage
id={`comments.${this.state.error}`}
values={{
appealId: this.state.appealId
}}
/>
</div>
</FlexRow>
) : null}
<Formsy className="full-width-form">
<InplaceInput
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"
value={this.state.message}
onInput={this.handleInput}
/>
<FlexRow className="compose-bottom-row">
<Button
className="compose-post"
disabled={this.state.status === ComposeStatus.SUBMITTING}
onClick={this.handlePost}
>
{this.state.status === ComposeStatus.SUBMITTING ? (
<FormattedMessage id="comments.posting" />
) : (
<FormattedMessage id="comments.post" />
)}
</Button>
<Button
className="compose-cancel"
onClick={this.handleCancel}
>
<FormattedMessage id="comments.cancel" />
</Button>
<span
className={classNames('compose-limit',
{!this.isMuted() || (this.isMuted() && this.state.status === ComposeStatus.REJECTED_MUTE) ? (
<div
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} />
</a>
<FlexRow className="compose-comment column">
{this.state.error && this.state.status !== ComposeStatus.REJECTED_MUTE ? (
<FlexRow className="compose-error-row">
<div className="compose-error-tip">
<FormattedMessage
id={`comments.${this.state.error}`}
values={{
appealId: this.state.appealId
}}
/>
</div>
</FlexRow>
) : null}
<Formsy className="full-width-form">
<InplaceInput
className={classNames('compose-input',
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
'compose-valid' : 'compose-invalid')}
>
<FormattedMessage
id="comments.lengthWarning"
values={{
remainingCharacters: MAX_COMMENT_LENGTH - this.state.message.length
}}
/>
</span>
</FlexRow>
</Formsy>
</FlexRow>
{this.state.muteOpen ? (
<MuteModal
isOpen
showCloseButton
useStandardSizes
className="mod-mute"
shouldCloseOnOverlayClick={false}
timeMuted={formatTime.formatRelativeTime(this.state.muteExpiresAt, window._locale)}
onRequestClose={this.handleMuteClose}
/>
) : null}
</div>
disabled={this.state.status === ComposeStatus.REJECTED_MUTE}
handleUpdate={onUpdate}
name="compose-comment"
type="textarea"
value={this.state.message}
onInput={this.handleInput}
/>
<FlexRow className="compose-bottom-row">
<Button
className="compose-post"
disabled={this.state.status === ComposeStatus.SUBMITTING}
onClick={this.handlePost}
>
{this.state.status === ComposeStatus.SUBMITTING ? (
<FormattedMessage id="comments.posting" />
) : (
<FormattedMessage id="comments.post" />
)}
</Button>
<Button
className="compose-cancel"
onClick={this.handleCancel}
>
<FormattedMessage id="comments.cancel" />
</Button>
<span
className={classNames('compose-limit',
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
'compose-valid' : 'compose-invalid')}
>
<FormattedMessage
id="comments.lengthWarning"
values={{
remainingCharacters: MAX_COMMENT_LENGTH - this.state.message.length
}}
/>
</span>
</FlexRow>
</Formsy>
</FlexRow>
</div>
) : null }
{this.state.muteOpen ? (
<MuteModal
isOpen
showCloseButton
useStandardSizes
className="mod-mute"
shouldCloseOnOverlayClick={false}
timeMuted={formatTime.formatRelativeTime(this.state.muteExpiresAt, window._locale)}
onRequestClose={this.handleMuteClose}
/>
) : null}
</React.Fragment>
);
}
@ -271,6 +274,10 @@ class ComposeComment extends React.Component {
ComposeComment.propTypes = {
commenteeId: PropTypes.number,
muteStatus: PropTypes.shape({
offenses: PropTypes.array,
muteExpiresAt: PropTypes.number
}),
onAddComment: PropTypes.func,
onCancel: PropTypes.func,
parentId: PropTypes.number,
@ -284,6 +291,9 @@ ComposeComment.propTypes = {
};
const mapStateToProps = state => ({
muteStatus: state.session.session.permissions.mute_status ?
state.session.session.permissions.mute_status :
{muteExpiresAt: 0, offenses: []},
user: state.session.session.user
});

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

@ -26,9 +26,11 @@ describe('Compose Comment test', () => {
store = mockStore({
session: {
session: {
user: {}
user: {},
permissions: {
mute_status: {}
}
}
}
});
});
@ -74,14 +76,15 @@ describe('Compose Comment test', () => {
expect(component.find('FlexRow.compose-error-row').exists()).toEqual(false);
});
test('Comment Status shows when mute expiration in the future ', () => {
test('Comment Status shows but compose box does not 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({muteExpiresAt: 100});
component.update();
expect(component.find('FlexRow.compose-comment').exists()).toEqual(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);
expect(component.find('MuteModal').exists()).toEqual(false);
expect(component.find('CommentingStatus').exists()).toEqual(true);
global.Date.now = realDateNow;
@ -99,7 +102,7 @@ describe('Compose Comment test', () => {
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
// Compose box exists but 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;