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 ( -
-
- Viewing Options - {this.state.open ? : } - -
- { - this.state.open ? ( -
- -
- ) : null - } + return ( +
+
+ Viewing Options + {props.open ? : } +
- ); - } -} + { + 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);