Merge pull request #4982 from seotts/send-automod-feedback

Save automod feedback

src/components/modal/mute/modal.jsx

@@ -14,6 +14,8 @@ const FeedbackForm = require('./feedback-form.jsx');
 const classNames = require('classnames');
 require('./modal.scss');
 
+const api = require('../../../lib/api');
+
 const steps = {
     COMMENT_ISSUE: 0,
     MUTE_INFO: 1,
@@ -59,9 +61,26 @@ class MuteModal extends React.Component {
     }
 
     handleFeedbackSubmit (feedback) {
-        /* eslint-disable no-console */
-        console.log(feedback);
-        /* eslint-enable no-console */
+        api({
+            uri: `/comments/feedback`,
+            authentication: this.props.user.token,
+            withCredentials: true,
+            method: 'POST',
+            useCsrf: true,
+            json: {
+                timestamp: Date.now(),
+                feedback: feedback,
+                comment: this.props.commentContent,
+                userId: this.props.user.id,
+                username: this.props.user.username,
+                language: window._locale,
+                typeOfMessage: this.props.muteModalMessages.name
+            }
+        }, (err, body, res) => {
+            if (err || res.statusCode !== 200) {
+                body = {rejected: 'error'};
+            }
+        });
 
         this.setState({
             step: steps.FEEDBACK_SENT
@@ -126,7 +145,7 @@ class MuteModal extends React.Component {
                                     )}}
                                 />
                             </p>
-                            {this.state.step === this.numSteps ? feedbackPrompt : null}
+                            {this.state.step === this.numSteps && this.props.showFeedback ? feedbackPrompt : null}
                         </MuteStep>
                         <MuteStep
                             bottomImg="/svgs/commenting/warning.svg"
@@ -232,16 +251,25 @@ class MuteModal extends React.Component {
 }
 
 MuteModal.propTypes = {
+    commentContent: PropTypes.string,
     intl: intlShape,
     muteModalMessages: PropTypes.shape({
+        name: PropTypes.string,
         commentType: PropTypes.string,
         muteStepHeader: PropTypes.string,
         muteStepContent: PropTypes.array
     }),
     onRequestClose: PropTypes.func,
+    showFeedback: PropTypes.bool,
     showWarning: PropTypes.bool,
-    startStep: PropTypes.oneOf(Object.keys(steps)),
-    timeMuted: PropTypes.string
+    startStep: PropTypes.number,
+    timeMuted: PropTypes.string,
+    user: PropTypes.shape({
+        id: PropTypes.number,
+        username: PropTypes.string,
+        token: PropTypes.string,
+        thumbnailUrl: PropTypes.string
+    })
 };
 MuteModal.steps = steps;
 module.exports = injectIntl(MuteModal);

src/views/preview/comment/compose-comment.jsx

@@ -207,21 +207,25 @@ class ComposeComment extends React.Component {
         // If mute modals have more than one unique "step" we could pass an array of steps
         const messageInfo = {
             pii: {
+                name: 'pii',
                 commentType: 'comment.type.pii',
                 muteStepHeader: 'comment.pii.header',
                 muteStepContent: ['comment.pii.content1', 'comment.pii.content2', 'comment.pii.content3']
             },
             unconstructive: {
+                name: 'unconstructive',
                 commentType: 'comment.type.unconstructive',
                 muteStepHeader: 'comment.unconstructive.header',
                 muteStepContent: ['comment.unconstructive.content1', 'comment.unconstructive.content2']
             },
             vulgarity: {
+                name: 'vulgarity',
                 commentType: 'comment.type.vulgarity',
                 muteStepHeader: 'comment.vulgarity.header',
                 muteStepContent: ['comment.vulgarity.content1', 'comment.vulgarity.content2']
             },
             general: {
+                name: 'general',
                 commentType: 'comment.type.general',
                 muteStepHeader: 'comment.general.header',
                 muteStepContent: ['comment.general.content1']
@@ -356,11 +360,14 @@ class ComposeComment extends React.Component {
                         showCloseButton
                         useStandardSizes
                         className="mod-mute"
+                        commentContent={this.state.message}
                         muteModalMessages={this.getMuteMessageInfo()}
                         shouldCloseOnOverlayClick={false}
+                        showFeedback={this.state.status === ComposeStatus.REJECTED_MUTE}
                         showWarning={this.state.showWarning}
                         startStep={this.getMuteModalStartStep()}
                         timeMuted={formatTime.formatRelativeTime(this.state.muteExpiresAtMs, window._locale)}
+                        user={this.props.user}
                         onRequestClose={this.handleMuteClose}
                     />
                 ) : null}

test/unit/components/mute-modal.test.jsx

@@ -117,9 +117,12 @@ describe('MuteModalTest', () => {
         expect(component.instance().state.step).toBe(0);
     });
 
-    test('Mute modal asks for feedback', () => {
+    test('Mute modal asks for feedback if showFeedback', () => {
         const component = mountWithIntl(
-            <MuteModal muteModalMessages={defaultMessages} />
+            <MuteModal
+                showFeedback
+                muteModalMessages={defaultMessages}
+            />
         );
         component.find('MuteModal').instance()
             .setState({step: 1});
@@ -127,9 +130,22 @@ describe('MuteModalTest', () => {
         expect(component.find('p.feedback-prompt').exists()).toEqual(true);
     });
 
-    test('Mute modal asks for feedback on extra showWarning step', () => {
+    test('Mute modal do not ask for feedback if not showFeedback', () => {
         const component = mountWithIntl(
             <MuteModal
+                muteModalMessages={defaultMessages}
+            />
+        );
+        component.find('MuteModal').instance()
+            .setState({step: 1});
+        component.update();
+        expect(component.find('p.feedback-prompt').exists()).toEqual(false);
+    });
+
+    test('Mute modal asks for feedback on extra showWarning step if showFeedback', () => {
+        const component = mountWithIntl(
+            <MuteModal
+                showFeedback
                 showWarning
                 muteModalMessages={defaultMessages}
             />
@@ -158,6 +174,12 @@ describe('MuteModalTest', () => {
         const component = shallowWithIntl(
             <MuteModal
                 muteModalMessages={defaultMessages}
+                user={{
+                    id: 12345,
+                    username: 'myusername',
+                    token: 'mytoken',
+                    thumbnailUrl: 'mythumbnail'
+                }}
             />
         ).dive();
         component.instance().handleFeedbackSubmit('something');