First draft of toxic-comments

plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js

@@ -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;
+  }
+}

plugins/talk-plugin-toxic-comments/client/components/ToxicCommentAlert.js

@@ -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>
-    );
-  }
-
-}

plugins/talk-plugin-toxic-comments/client/components/styles.css

@@ -1,5 +0,0 @@
-.toxicComment {
-  color: red;
-  font-weight: bold;
-  padding: 12px 15px 10px 15px
-}