mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
Show the comment status box on project page loads if the user is muted.
Don't show the compose box if they're muted, but do show it, but greyed out, if they just posted a comment that resulted in a mute.
This commit is contained in:
picklesrus
parent
5af560690c
commit
835a271be4
2 changed files with 94 additions and 83 deletions
|
|
@ -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
|
||||
};
|
||||
}
|
||||
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>
|
||||
{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>
|
||||
) : 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,7 @@ ComposeComment.propTypes = {
|
|||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
muteStatus: state.session.session.permissions.mute_status,
|
||||
user: state.session.session.user
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue