Filter State

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

@@ -3,6 +3,7 @@ import styles from './styles.css';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment';
+import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
 
 class OffTopicFilter extends React.Component {
 
@@ -17,6 +18,7 @@ class OffTopicFilter extends React.Component {
       const idx = this.props.comment.classNames.indexOf(this.cn);
       this.props.removeClassName(idx);
     }
+    props.closeViewingOptions();
   }
 
   render() {
@@ -34,6 +36,6 @@ class OffTopicFilter extends React.Component {
 const mapStateToProps = ({comment}) => ({comment});
 
 const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({addClassName, removeClassName}, dispatch);
+  bindActionCreators({addClassName, removeClassName, closeViewingOptions}, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter);

plugins/coral-plugin-offtopic/client/components/StaffFilter.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styles from './styles.css';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment';
+
+class StaffFilter extends React.Component {
+
+  tag = 'STAFF';
+  className = 'offTopicComment';
+  cn = {[this.className] : {tags: [this.tag]}};
+
+  handleChange = (e) => {
+    if (e.target.checked) {
+      this.props.addClassName(this.cn);
+    } else {
+      const idx = this.props.comment.classNames.indexOf(this.cn);
+      this.props.removeClassName(idx);
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.viewingOption}>
+        <label>
+          <input type="checkbox" onChange={this.handleChange}/>
+          Hide Staff Comments
+        </label>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({comment}) => ({comment});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({addClassName, removeClassName}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(StaffFilter);