First draft of toxic-comments

2026-09-09 11:38:08 +08:00 · 2017-09-06 22:11:48 +07:00
parent fea5f75aa6
commit 6f82fd76f5
32 changed files with 298 additions and 491 deletions
@@ -1,5 +0,0 @@
-import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants';
-
-export const toggleCheckbox = () => ({
-  type: OFFTOPIC_TOGGLE_CHECKBOX
-});
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default class CheckToxicityHook extends React.Component {
+  checked = false;
+
+  componentDidMount() {
+    this.toxicityPreHook = this.props.registerHook('preSubmit', (input) => {
+      if (!this.checked) {
+        input.checkToxicity = true;
+        this.checked = true;
+      }
+    });
+
+    this.toxicityPostHook = this.props.registerHook('postSubmit', () => {
+      this.checked = false;
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.toxicityPreHook);
+    this.props.unregisterHook(this.toxicityPostHook);
+  }
+
+  render() {
+    return null;
+  }
+}
@@ -1,62 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-import {t} from 'plugin-api/beta/client/services';
-import {isTagged} from 'plugin-api/beta/client/utils';
-
-export default class ToxicCommentAlert extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      toxic: false
-    };
-  }
-
-  componentDidMount() {
-    this.toxicityHook = this.props.registerHook('preSubmit', (data) => {
-      const comment = data.body;
-      (async() => {
-        var toxicity = await fetch('/api/v1/toxicity/score', {
-          method: 'POST',
-          body: comment
-        })
-        .then(response => response.json())
-        .then(function(json) {
-          return json.score;
-        })
-        .catch(function(err) {
-          console.log(err);
-          return 0;
-        });
-        console.log(toxicity);
-        if(toxicity > 0.3){
-          this.setState({
-            toxic: true
-          });
-        }
-        else {
-          this.setState({
-            toxic: false
-          });
-        }
-      })();
-    });
-  }
-
-  componentWillUnmount() {
-    this.props.unregisterHook(this.toxicityHook);
-  }
-
-  render() {
-    return(
-      <div className={styles.toxicComment}>
-      {
-        this.state.toxic ? (
-          <span> Are you sure you want to post this? Other members of the community my view your comment as toxic, so please take a moment to reconsider.</span>
-        ) : null
-      }
-      </div>
-    );
-  }
-
-}
@@ -1,5 +0,0 @@
-.toxicComment {
-  color: red;
-  font-weight: bold;
-  padding: 12px 15px 10px 15px
-}
@@ -1 +0,0 @@
-export const OFFTOPIC_TOGGLE_CHECKBOX = 'OFFTOPIC_TOGGLE_CHECKBOX';
@@ -1,5 +1,5 @@
 import translations from './translations.yml';
-import ToxicCommentAlert from './components/ToxicCommentAlert';
+import CheckToxicityHook from './components/CheckToxicityHook';

 /**
 * coral-plugin-offtopic depends on coral-plugin-viewing-options
@@ -9,6 +9,6 @@ import ToxicCommentAlert from './components/ToxicCommentAlert';
 export default {
  translations,
  slots: {
-    commentInputDetailArea: [ToxicCommentAlert],
-  }
+    commentInputDetailArea: [CheckToxicityHook],
+  },
 };
@@ -1,18 +0,0 @@
-import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants';
-
-const initialState = {
-  checked: false
-};
-
-export default function offTopic (state = initialState, action) {
-  switch (action.type) {
-  case OFFTOPIC_TOGGLE_CHECKBOX: {
-    return {
-      ...state,
-      checked: !state.checked
-    };
-  }
-  default :
-    return state;
-  }
-}
@@ -1,4 +1,8 @@
 en:
+  error:
+    COMMENT_IS_TOXIC: |
+      Are you sure? The language in this comment might violate our community guidelines.
+      You can edit the comment or submit it for moderator review.
  talk-plugin-featured-comments:
    featured: Featured
    go_to_conversation: Go to conversation
				`@@ -1 +0,0 @@`
				`export const OFFTOPIC_TOGGLE_CHECKBOX = 'OFFTOPIC_TOGGLE_CHECKBOX';`