Plugins renaming

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from './styles.css';
+
+import {t} from 'plugin-api/beta/client/services';
+
+export default class OffTopicCheckbox extends React.Component {
+
+  label = 'OFF_TOPIC';
+
+  componentDidMount() {
+    this.clearTagsHook = this.props.registerHook('postSubmit', () => {
+      const idx = this.props.tags.indexOf(this.label);
+      this.props.removeTag(idx);
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterHook(this.clearTagsHook);
+  }
+
+  handleChange = (e) => {
+    const {addTag, removeTag} = this.props;
+    if (e.target.checked) {
+      addTag(this.label);
+    } else {
+      const idx = this.props.tags.indexOf(this.label);
+      removeTag(idx);
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.offTopic}>
+        {
+          !this.props.isReply ? (
+            <label className={styles.offTopicLabel}>
+              <input type="checkbox" onChange={this.handleChange}/>
+              {t('off_topic')}
+            </label>
+          ) : null
+        }
+      </div>
+    );
+  }
+}

plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './styles.css';
+
+export default class OffTopicFilter extends React.Component {
+
+  tag = 'OFF_TOPIC';
+  className = 'talk-plugin-off-topic-comment';
+  cn = {[this.className] : {tags: [this.tag]}};
+
+  handleChange = (e) => {
+    if (e.target.checked) {
+      this.props.addCommentClassName(this.cn);
+      this.props.toggleCheckbox();
+    } else {
+      const idx = this.props.commentClassNames.findIndex((i) => i[this.className]);
+      this.props.removeCommentClassName(idx);
+      this.props.toggleCheckbox();
+    }
+    this.props.closeViewingOptions();
+  }
+
+  render() {
+    return (
+      <div className={styles.viewingOption}>
+        <label>
+          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
+          Hide Off-Topic Comments
+        </label>
+      </div>
+    );
+  }
+}

plugins/talk-plugin-offtopic/client/components/OffTopicTag.js

@@ -0,0 +1,16 @@
+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 (props) => (
+  <span>
+    {
+      isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
+        <span className={styles.tag}>
+          {t('off_topic')}
+        </span>
+      ) : null
+    }
+  </span>
+);

plugins/talk-plugin-offtopic/client/components/styles.css

@@ -0,0 +1,27 @@
+.offTopic {
+  height: 100%;
+}
+
+.offTopicLabel {
+  padding: 10px 20px;
+  display: block;
+}
+
+.tag {
+  background: #3D73D5;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
+}
+
+.viewingOption {
+  padding: 5px 0;
+}
+
+:global(.talk-plugin-off-topic-comment) {
+  display: none;
+}