From 835a271be4a184439361ac948674232fc31b48f5 Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Thu, 3 Dec 2020 15:29:34 -0500
Subject: [PATCH] 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 {
                         </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
 });
 
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;