From 835a271be4a184439361ac948674232fc31b48f5 Mon Sep 17 00:00:00 2001 From: picklesrus Date: Thu, 3 Dec 2020 15:29:34 -0500 Subject: [PATCH 1/2] 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. --- src/views/preview/comment/compose-comment.jsx | 164 +++++++++--------- test/unit/components/compose-comment.test.jsx | 13 +- 2 files changed, 94 insertions(+), 83 deletions(-) diff --git a/src/views/preview/comment/compose-comment.jsx b/src/views/preview/comment/compose-comment.jsx index df96b4773..e0df969c0 100644 --- a/src/views/preview/comment/compose-comment.jsx +++ b/src/views/preview/comment/compose-comment.jsx @@ -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 { ) : null } -
- - - - - {this.state.error && this.state.status !== ComposeStatus.REJECTED_MUTE ? ( - -
- -
- - ) : null} - - = 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} - /> - - - - + + + + + {this.state.error && this.state.status !== ComposeStatus.REJECTED_MUTE ? ( + +
+ +
+ + ) : null} + + = 0 ? 'compose-valid' : 'compose-invalid')} - > - - - - - - {this.state.muteOpen ? ( - - ) : null} -
+ disabled={this.state.status === ComposeStatus.REJECTED_MUTE} + handleUpdate={onUpdate} + name="compose-comment" + type="textarea" + value={this.state.message} + onInput={this.handleInput} + /> + + + + = 0 ? + 'compose-valid' : 'compose-invalid')} + > + + + + + + {this.state.muteOpen ? ( + + ) : null} + + ) : null } ); } @@ -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 }); diff --git a/test/unit/components/compose-comment.test.jsx b/test/unit/components/compose-comment.test.jsx index 051416218..f13d42168 100644 --- a/test/unit/components/compose-comment.test.jsx +++ b/test/unit/components/compose-comment.test.jsx @@ -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; From 2d5e9a637829f61be8ca51a70d154d74955b5af4 Mon Sep 17 00:00:00 2001 From: picklesrus Date: Tue, 8 Dec 2020 08:00:01 -0500 Subject: [PATCH 2/2] Fix merge conflicts and set default object for mute_status if props do not exist. --- src/views/preview/comment/compose-comment.jsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/views/preview/comment/compose-comment.jsx b/src/views/preview/comment/compose-comment.jsx index e0df969c0..099911da2 100644 --- a/src/views/preview/comment/compose-comment.jsx +++ b/src/views/preview/comment/compose-comment.jsx @@ -48,7 +48,7 @@ class ComposeComment extends React.Component { error: null, appealId: null, muteOpen: false, - muteExpiresAt: this.props.muteStatus.muteExpiresAt + muteExpiresAt: this.props.muteStatus.muteExpiresAt * 1000 // convert to ms }; } handleInput (event) { @@ -254,19 +254,19 @@ class ComposeComment extends React.Component { - {this.state.muteOpen ? ( - - ) : null} ) : null } + {this.state.muteOpen ? ( + + ) : null} ); } @@ -291,7 +291,9 @@ ComposeComment.propTypes = { }; const mapStateToProps = state => ({ - muteStatus: state.session.session.permissions.mute_status, + muteStatus: state.session.session.permissions.mute_status ? + state.session.session.permissions.mute_status : + {muteExpiresAt: 0, offenses: []}, user: state.session.session.user });