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

import React from 'react';
import PropTypes from 'prop-types';
import { t } from 'plugin-api/beta/client/services';

/**
 * CheckToxicityHook adds hooks to the `commentBox`
 * that handles checking a comment for toxicity.
 */
export default class CheckToxicityHook extends React.Component {
  // checked signifies if we already sent a request with the `checkToxicity` set to true.
  checked = false;

  componentDidMount() {
    this.toxicityPreHook = this.props.registerHook('preSubmit', input => {
      // If we haven't check the toxicity yet, make sure to include `checkToxicity=true` in the mutation.
      // Otherwise post comment without checking the toxicity.
      if (!this.checked) {
        input.checkToxicity = true;
        this.checked = true;
      }
    });

    this.toxicityPostHook = this.props.registerHook('postSubmit', result => {
      const actions = result.createComment.actions;
      if (
        actions &&
        actions.some(
          ({ __typename, reason }) =>
            __typename === 'FlagAction' && reason === 'TOXIC_COMMENT'
        )
      ) {
        this.props.notify('error', t('talk-plugin-toxic-comments.still_toxic'));
      }

      // Reset `checked` after comment was successfully posted.
      this.checked = false;
    });
  }

  componentWillUnmount() {
    this.props.unregisterHook(this.toxicityPreHook);
    this.props.unregisterHook(this.toxicityPostHook);
  }

  render() {
    return null;
  }
}

CheckToxicityHook.propTypes = {
  notify: PropTypes.func.isRequired,
  registerHook: PropTypes.func.isRequired,
  unregisterHook: PropTypes.func.isRequired,
};