diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js
index 81b57a0fe..29e6948a0 100644
--- a/client/coral-embed-stream/src/actions/stream.js
+++ b/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
+});
\ No newline at end of file
diff --git a/client/coral-embed-stream/src/components/ViewingOptions.css b/client/coral-embed-stream/src/components/ViewingOptions.css
index ba9de723b..3759295c8 100644
--- a/client/coral-embed-stream/src/components/ViewingOptions.css
+++ b/client/coral-embed-stream/src/components/ViewingOptions.css
@@ -6,6 +6,10 @@
min-width: 220px;
}
+.viewingOptions {
+ cursor: pointer;
+}
+
.streamViewingOptionsList {
background: white;
position: absolute;
diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/client/coral-embed-stream/src/components/ViewingOptions.js
index c40b23d39..48cc10c5d 100644
--- a/client/coral-embed-stream/src/components/ViewingOptions.js
+++ b/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 (
-
-
- {
- this.state.open ? (
-
-
- {
- React.Children.map(, (component) => {
- return React.createElement('li', {
- className: 'viewingOption'
- }, component);
- })
- }
-
-
- ) : null
- }
+ return (
+
+
- );
- }
-}
+ {
+ props.open ? (
+
+
+ {
+ React.Children.map(, (component) => {
+ return React.createElement('li', {
+ className: 'viewingOption'
+ }, component);
+ })
+ }
+
+
+ ) : null
+ }
+
+ );
+};
+
+const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open});
+
+const mapDispatchToProps = (dispatch) =>
+ bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);
diff --git a/client/coral-embed-stream/src/constants/stream.js b/client/coral-embed-stream/src/constants/stream.js
index cb17edb2f..558e0ddd3 100644
--- a/client/coral-embed-stream/src/constants/stream.js
+++ b/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';
diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js
index 59f068530..6756ad4a8 100644
--- a/client/coral-embed-stream/src/reducers/stream.js
+++ b/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,
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
index a73bcc183..e91320b4b 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
+++ b/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);
diff --git a/plugins/coral-plugin-offtopic/client/components/StaffFilter.js b/plugins/coral-plugin-offtopic/client/components/StaffFilter.js
new file mode 100644
index 000000000..9e9a2a62a
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = ({comment}) => ({comment});
+
+const mapDispatchToProps = (dispatch) =>
+ bindActionCreators({addClassName, removeClassName}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(StaffFilter);