addClassNames, removeClassNames, reducers and actions for Comment Component

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

@@ -0,0 +1,11 @@
+import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment';
+
+export const addClassName = (className) => ({
+  type: ADD_CLASSNAME,
+  className
+});
+
+export const removeClassName = (idx) => ({
+  type: REMOVE_CLASSNAME,
+  idx
+});

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

@@ -1,4 +1,6 @@
 import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
+import cn from 'classnames';
 import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 
 import AuthorName from 'coral-plugin-author-name/AuthorName';
@@ -19,7 +21,6 @@ import Slot from 'coral-framework/components/Slot';
 import LoadMore from './LoadMore';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {TopRightMenu} from './TopRightMenu';
-import classnames from 'classnames';
 import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
 import {getEditableUntilDate} from './util';
@@ -151,28 +152,29 @@ class Comment extends React.Component {
   }
   render () {
     const {
-      comment,
-      parentId,
-      currentUser,
       asset,
       depth,
-      postComment,
-      addNotification,
-      showSignInDialog,
-      highlighted,
+      comment,
       postFlag,
-      postDontAgree,
+      parentId,
       loadMore,
-      setActiveReplyBox,
-      activeReplyBox,
-      deleteAction,
-      addCommentTag,
-      removeCommentTag,
       ignoreUser,
+      highlighted,
+      postComment,
+      currentUser,
+      deleteAction,
       disableReply,
-      commentIsIgnored,
       maxCharCount,
-      charCountEnable
+      postDontAgree,
+      addCommentTag,
+      activeReplyBox,
+      addNotification,
+      charCountEnable,
+      classNames = [],
+      showSignInDialog,
+      removeCommentTag,
+      commentIsIgnored,
+      setActiveReplyBox,
     } = this.props;
 
     const flagSummary = getActionSummary('FlagActionSummary', comment);
@@ -226,7 +228,7 @@ class Comment extends React.Component {
 
     return (
       <div
-        className={commentClass}
+        className={cn([commentClass, classNames])}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}
       >
@@ -265,17 +267,17 @@ class Comment extends React.Component {
               (comment.user.id === currentUser.id))
 
               /* User can edit/delete their own comment for a short window after posting */
-              ? <span className={classnames(styles.topRight)}>
+              ? <span className={cn(styles.topRight)}>
                   {
                     commentIsStillEditable(comment) &&
                     <a
-                      className={classnames(styles.link, {[styles.active]: this.state.isEditing})}
+                      className={cn(styles.link, {[styles.active]: this.state.isEditing})}
                       onClick={this.onClickEdit}>Edit</a>
                   }
                 </span>
 
               /* TopRightMenu allows currentUser to ignore other users' comments */
-              : <span className={classnames(styles.topRight, styles.topRightMenu)}>
+              : <span className={cn(styles.topRight, styles.topRightMenu)}>
                   <TopRightMenu
                     comment={comment}
                     ignoreUser={ignoreUser}
@@ -416,7 +418,9 @@ class Comment extends React.Component {
   }
 }
 
-export default Comment;
+const mapStateToProps = ({comment}) => ({classNames: comment.classNames});
+
+export default connect(mapStateToProps, null)(Comment);
 
 // return whether the comment is editable
 function commentIsStillEditable (comment) {

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

@@ -10,6 +10,8 @@
     background: white;
     position: absolute;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+    right: 3px;
+    top: 20px;
 }
 
 .streamViewingOptionsList ul, .streamViewingOptionsList li {

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

@@ -24,7 +24,7 @@ export default class ViewingOptions extends React.Component {
           <a onClick={this.toggleOpen}>Viewing Options</a>
         </div>
         {
-          this.state.open ? (
+          true ? (
             <div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
               <ul>
                 {

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

@@ -0,0 +1,2 @@
+export const ADD_CLASSNAME = 'ADD_CLASSNAME';
+export const REMOVE_CLASSNAME = 'REMOVE_CLASSNAME';

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

@@ -0,0 +1,25 @@
+import {ADD_CLASSNAME, REMOVE_CLASSNAME} from '../constants/comment';
+
+const initialState = {
+  classNames: []
+};
+
+export default function comment (state = initialState, action) {
+  switch (action.type) {
+  case ADD_CLASSNAME :
+    return {
+      ...state,
+      classNames: [...state.classNames, action.className]
+    };
+  case REMOVE_CLASSNAME :
+    return {
+      ...state,
+      classNames: [
+        ...state.classNames.slice(0, action.idx),
+        ...state.classNames.slice(action.idx + 1)
+      ]
+    };
+  default :
+    return state;
+  }
+}

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

@@ -1,9 +1,11 @@
 import embed from './embed';
+import comment from './comment';
 import config from './config';
 import stream from './stream';
 
 export default {
   embed,
+  config,
   stream,
-  config
+  comment
 };

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

@@ -1,5 +1,37 @@
 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';
 
-export default () => (
-  <span><input type="checkbox"/>Hide Off-Topic Comments</span>
-);
+class OffTopicFilter extends React.Component {
+
+  className = 'OFF_TOPIC';
+
+  handleChange = (e) => {
+    if (e.target.checked) {
+      this.props.addClassName(this.className);
+    } else {
+      const idx = this.props.comment.classNames.indexOf(this.className);
+      this.props.removeClassName(idx);
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.viewingOption}>
+        <label>
+          <input type="checkbox" onChange={this.handleChange}/>
+          Hide Off-Topic Comments
+        </label>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({comment}) => ({comment});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({addClassName, removeClassName}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter);

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

@@ -18,4 +18,8 @@
   border-radius: 2px;
 }
 
+.viewingOption {
+  padding: 5px 0;
+}
+