Filter State

client/coral-embed-stream/src/actions/stream.js

@@ -38,3 +38,11 @@ export const viewAllComments = () => {
 
   return {type: actions.VIEW_ALL_COMMENTS};
 };
+
+export const openViewingOptions = () => ({
+  type: actions.OPEN_VIEWING_OPTIONS
+});
+
+export const closeViewingOptions = () => ({
+  type: actions.CLOSE_VIEWING_OPTIONS
+});

client/coral-embed-stream/src/components/ViewingOptions.css

@@ -6,6 +6,10 @@
     min-width: 220px;
 }
 
+.viewingOptions {
+    cursor: pointer;
+}
+
 .streamViewingOptionsList {
     background: white;
     position: absolute;

client/coral-embed-stream/src/components/ViewingOptions.js

@@ -1,47 +1,50 @@
 import React from 'react';
 import cn from 'classnames';
+import {Icon} from 'coral-ui';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import styles from './ViewingOptions.css';
 import Slot from 'coral-framework/components/Slot';
-import {Icon} from 'coral-ui';
+import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
 
-export default class ViewingOptions extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      open: false
-    };
-  }
+const ViewingOptions = (props) => {
+  const toggleOpen = () => {
+    if (!props.open) {
+      props.openViewingOptions();
+    } else {
+      props.closeViewingOptions();
+    }
+  };
 
-  toggleOpen = () => {
-    this.setState((state) => ({
-      open: !state.open
-    }));
-  }
-
-  render() {
-    return (
-      <div className={cn([styles.viewingOptions, 'streamViewingOptions'])}>
-        <div>
-          <a onClick={this.toggleOpen}>Viewing Options
-            {this.state.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
-          </a>
-        </div>
-        {
-          this.state.open ? (
-            <div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
-              <ul>
-                {
-                  React.Children.map(<Slot fill="streamViewingOptions" />, (component) => {
-                    return React.createElement('li', {
-                      className: 'viewingOption'
-                    }, component);
-                  })
-                }
-              </ul>
-            </div>
-          ) : null
-        }
+  return (
+    <div className={cn([styles.viewingOptions, 'streamViewingOptions'])}>
+      <div>
+        <a onClick={toggleOpen}>Viewing Options
+          {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
+        </a>
       </div>
-    );
-  }
-}
+      {
+        props.open ? (
+          <div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
+            <ul>
+              {
+                React.Children.map(<Slot fill="streamViewingOptions" />, (component) => {
+                  return React.createElement('li', {
+                    className: 'viewingOption'
+                  }, component);
+                })
+              }
+            </ul>
+          </div>
+        ) : null
+      }
+    </div>
+  );
+};
+
+const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);

client/coral-embed-stream/src/constants/stream.js

@@ -3,3 +3,5 @@ export const SET_COMMENT_COUNT_CACHE = 'SET_COMMENT_COUNT_CACHE';
 export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
 export const NEW_COMMENT_COUNT_POLL_INTERVAL = 20000;
 export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
+export const OPEN_VIEWING_OPTIONS = 'OPEN_VIEWING_OPTIONS';
+export const CLOSE_VIEWING_OPTIONS = 'CLOSE_VIEWING_OPTIONS';

client/coral-embed-stream/src/reducers/stream.js

@@ -20,10 +20,27 @@ const initialState = {
   assetId: getQueryVariable('asset_id'),
   assetUrl: getQueryVariable('asset_url'),
   commentId: getQueryVariable('comment_id'),
+  viewingOption: {
+    open: false
+  }
 };
 
 export default function stream(state = initialState, action) {
   switch (action.type) {
+  case actions.OPEN_VIEWING_OPTIONS:
+    return {
+      ...state,
+      viewingOption: {
+        open: true
+      }
+    };
+  case actions.CLOSE_VIEWING_OPTIONS:
+    return {
+      ...state,
+      viewingOption: {
+        open: false
+      }
+    };
   case actions.SET_ACTIVE_REPLY_BOX:
     return {
       ...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);