From 66e4f02a1a823b58e5c1453dcde2af6267620bd6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 8 Jun 2017 00:29:05 +0700
Subject: [PATCH] Selectors, resolving merge errors, better class names,
 removing comment reducer

---
 .../coral-embed-stream/src/actions/comment.js | 11 --------
 .../coral-embed-stream/src/actions/stream.js  | 10 ++++++++
 .../src/components/Comment.js                 |  3 +--
 .../src/components/Stream.js                  |  2 +-
 .../src/constants/comment.js                  |  2 --
 .../src/constants/stream.js                   |  2 ++
 .../src/containers/Stream.js                  |  2 +-
 .../src/reducers/comment.js                   | 25 -------------------
 .../coral-embed-stream/src/reducers/index.js  |  2 --
 .../coral-embed-stream/src/reducers/stream.js | 14 +++++++++++
 client/coral-embed-stream/style/default.css   |  4 +--
 plugin-api/alpha/client/actions/index.js      |  2 +-
 plugin-api/alpha/client/selectors/index.js    |  2 ++
 .../client/components/OffTopicCheckbox.js     |  4 +--
 .../client/containers/OffTopicCheckbox.js     |  5 +++-
 .../client/containers/OffTopicFilter.js       |  7 +++---
 plugins/coral-plugin-offtopic/client/index.js |  4 +--
 .../client/components/ViewingOptions.js       |  9 +++----
 18 files changed, 50 insertions(+), 60 deletions(-)
 delete mode 100644 client/coral-embed-stream/src/actions/comment.js
 delete mode 100644 client/coral-embed-stream/src/constants/comment.js
 delete mode 100644 client/coral-embed-stream/src/reducers/comment.js
 create mode 100644 plugin-api/alpha/client/selectors/index.js

diff --git a/client/coral-embed-stream/src/actions/comment.js b/client/coral-embed-stream/src/actions/comment.js
deleted file mode 100644
index b48e29798..000000000
--- a/client/coral-embed-stream/src/actions/comment.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment';
-
-export const addCommentClassName = (className) => ({
-  type: ADD_COMMENT_CLASSNAME,
-  className
-});
-
-export const removeCommentClassName = (idx) => ({
-  type: REMOVE_COMMENT_CLASSNAME,
-  idx
-});
diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js
index 6a9e47838..9b5d94a9b 100644
--- a/client/coral-embed-stream/src/actions/stream.js
+++ b/client/coral-embed-stream/src/actions/stream.js
@@ -37,3 +37,13 @@ export const viewAllComments = () => {
 
   return {type: actions.VIEW_ALL_COMMENTS};
 };
+
+export const addCommentClassName = (className) => ({
+  type: actions.ADD_COMMENT_CLASSNAME,
+  className
+});
+
+export const removeCommentClassName = (idx) => ({
+  type: actions.REMOVE_COMMENT_CLASSNAME,
+  idx
+});
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 53be600dc..b5eca4ff2 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -381,10 +381,9 @@ export default class Comment extends React.Component {
 
     return (
       <div
-        className={cn(commentClass, 'talk-stream-comment-wrapper', {[styles.enter]: this.state.animateEnter})}
+        className={cn(commentClass, 'talk-stream-comment-wrapper', classNamesToAdd, {[styles.enter]: this.state.animateEnter})}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}
-        className={cn([commentClass, classNamesToAdd])}
       >
         <hr aria-hidden={true} />
         <div
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 797aee1ae..586d28f23 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -241,7 +241,7 @@ class Stream extends React.Component {
               editComment={this.props.editComment}
               liveUpdates={true}
             />
-          : <div className="commentStreamContainer">
+          : <div className="talk-stream-comments-container">
               <NewCount
                 count={comments.nodes.length - view.length}
                 loadMore={this.viewNewComments}
diff --git a/client/coral-embed-stream/src/constants/comment.js b/client/coral-embed-stream/src/constants/comment.js
deleted file mode 100644
index 8aaa5e0e2..000000000
--- a/client/coral-embed-stream/src/constants/comment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
-export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
diff --git a/client/coral-embed-stream/src/constants/stream.js b/client/coral-embed-stream/src/constants/stream.js
index 4be4dc125..58004e877 100644
--- a/client/coral-embed-stream/src/constants/stream.js
+++ b/client/coral-embed-stream/src/constants/stream.js
@@ -1,3 +1,5 @@
 export const SET_ACTIVE_REPLY_BOX = 'SET_ACTIVE_REPLY_BOX';
 export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
 export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
+export const ADD_COMMENT_CLASSNAME = 'ADD_COMMENT_CLASSNAME';
+export const REMOVE_COMMENT_CLASSNAME = 'REMOVE_COMMENT_CLASSNAME';
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 823a7971d..fcca0c053 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -290,7 +290,7 @@ const mapStateToProps = (state) => ({
   assetUrl: state.stream.assetUrl,
   activeTab: state.embed.activeTab,
   previousTab: state.embed.previousTab,
-  commentClassNames: state.comment.commentClassNames
+  commentClassNames: state.stream.commentClassNames
 });
 
 const mapDispatchToProps = (dispatch) =>
diff --git a/client/coral-embed-stream/src/reducers/comment.js b/client/coral-embed-stream/src/reducers/comment.js
deleted file mode 100644
index 7cee8d3c8..000000000
--- a/client/coral-embed-stream/src/reducers/comment.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import {ADD_COMMENT_CLASSNAME, REMOVE_COMMENT_CLASSNAME} from '../constants/comment';
-
-const initialState = {
-  commentClassNames: []
-};
-
-export default function comment (state = initialState, action) {
-  switch (action.type) {
-  case ADD_COMMENT_CLASSNAME :
-    return {
-      ...state,
-      commentClassNames: [...state.commentClassNames, action.className]
-    };
-  case REMOVE_COMMENT_CLASSNAME :
-    return {
-      ...state,
-      commentClassNames: [
-        ...state.commentClassNames.slice(0, action.idx),
-        ...state.commentClassNames.slice(action.idx + 1)
-      ]
-    };
-  default :
-    return state;
-  }
-}
diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js
index 8366a64f5..61fe950c9 100644
--- a/client/coral-embed-stream/src/reducers/index.js
+++ b/client/coral-embed-stream/src/reducers/index.js
@@ -1,5 +1,4 @@
 import embed from './embed';
-import comment from './comment';
 import config from './config';
 import stream from './stream';
 
@@ -7,5 +6,4 @@ export default {
   embed,
   config,
   stream,
-  comment
 };
diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js
index 59f068530..9e03e3528 100644
--- a/client/coral-embed-stream/src/reducers/stream.js
+++ b/client/coral-embed-stream/src/reducers/stream.js
@@ -20,6 +20,7 @@ const initialState = {
   assetId: getQueryVariable('asset_id'),
   assetUrl: getQueryVariable('asset_url'),
   commentId: getQueryVariable('comment_id'),
+  commentClassNames: []
 };
 
 export default function stream(state = initialState, action) {
@@ -39,6 +40,19 @@ export default function stream(state = initialState, action) {
       ...state,
       commentId: '',
     };
+  case actions.ADD_COMMENT_CLASSNAME :
+    return {
+      ...state,
+      commentClassNames: [...state.commentClassNames, action.className]
+    };
+  case actions.REMOVE_COMMENT_CLASSNAME :
+    return {
+      ...state,
+      commentClassNames: [
+        ...state.commentClassNames.slice(0, action.idx),
+        ...state.commentClassNames.slice(action.idx + 1)
+      ]
+    };
   default:
     return state;
   }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index d132af6c5..c9304c0cf 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -182,7 +182,7 @@ hr {
   padding: 10px 0;
 }
 
-.commentStreamContainer {
+.talk-stream-comments-container {
   position: relative;
   z-index: 0;
 }
@@ -493,4 +493,4 @@ button.comment__action-button[disabled],
   .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
     visibility: visible;
   }
-}
\ No newline at end of file
+}
diff --git a/plugin-api/alpha/client/actions/index.js b/plugin-api/alpha/client/actions/index.js
index e523f2e35..8e8e11c0a 100644
--- a/plugin-api/alpha/client/actions/index.js
+++ b/plugin-api/alpha/client/actions/index.js
@@ -1,2 +1,2 @@
 export {addTag, removeTag} from 'coral-plugin-commentbox/actions';
-export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/comment';
+export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/stream';
diff --git a/plugin-api/alpha/client/selectors/index.js b/plugin-api/alpha/client/selectors/index.js
new file mode 100644
index 000000000..ad76326cf
--- /dev/null
+++ b/plugin-api/alpha/client/selectors/index.js
@@ -0,0 +1,2 @@
+export const commentBoxTagsSelector = (state) => state.commentBox.tags;
+export const commentClassNamesSelector = (state) => state.stream.commentClassNames;
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
index 4968dc8de..89d8224f8 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
+++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
@@ -9,7 +9,7 @@ export default class OffTopicCheckbox extends React.Component {
 
   componentDidMount() {
     this.clearTagsHook = this.props.registerHook('postSubmit', () => {
-      const idx = this.props.commentBox.tags.indexOf(this.label);
+      const idx = this.props.tags.indexOf(this.label);
       this.props.removeTag(idx);
     });
   }
@@ -23,7 +23,7 @@ export default class OffTopicCheckbox extends React.Component {
     if (e.target.checked) {
       addTag(this.label);
     } else {
-      const idx = this.props.commentBox.tags.indexOf(this.label);
+      const idx = this.props.tags.indexOf(this.label);
       removeTag(idx);
     }
   }
diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js
index 2241f0510..286fa8d9d 100644
--- a/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js
+++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js
@@ -1,9 +1,12 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
+import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors';
 import OffTopicCheckbox from '../components/OffTopicCheckbox';
 
-const mapStateToProps = ({commentBox}) => ({commentBox});
+const mapStateToProps = (state) => ({
+  tags: commentBoxTagsSelector(state)
+});
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({addTag, removeTag}, dispatch);
diff --git a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js
index a55562a37..98f5f7aea 100644
--- a/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js
+++ b/plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js
@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {toggleCheckbox} from '../actions';
+import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors';
 import OffTopicFilter from '../components/OffTopicFilter';
 import {
   closeViewingOptions
@@ -10,9 +11,9 @@ import {
   removeCommentClassName
 } from 'plugin-api/alpha/client/actions';
 
-const mapStateToProps = ({comment, coralPluginOfftopic: offTopic}) => ({
-  commentClassNames: comment.commentClassNames,
-  checked: offTopic.checked
+const mapStateToProps = (state) => ({
+  commentClassNames: commentClassNamesSelector(state),
+  checked: state.coralPluginOfftopic.checked
 });
 
 const mapDispatchToProps = (dispatch) =>
diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js
index ff65f3351..383c7351e 100644
--- a/plugins/coral-plugin-offtopic/client/index.js
+++ b/plugins/coral-plugin-offtopic/client/index.js
@@ -14,7 +14,7 @@ export default {
   reducer,
   slots: {
     commentInputDetailArea: [OffTopicCheckbox],
-    streamViewingOptions: [OffTopicFilter],
-    commentInfoBar: [OffTopicTag]
+    commentInfoBar: [OffTopicTag],
+    viewingOptions: [OffTopicFilter]
   }
 };
diff --git a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
index 5effa156b..9a562dac2 100644
--- a/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
+++ b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
@@ -12,9 +12,8 @@ const ViewingOptions = (props) => {
       props.closeViewingOptions();
     }
   };
-
   return (
-    <div className={cn([styles.viewingOptions, 'streamViewingOptions'])}>
+    <div className={cn([styles.viewingOptions, 'coral-plugin-viewing-options'])}>
       <div>
         <a onClick={toggleOpen}>Viewing Options
           {props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
@@ -22,12 +21,12 @@ const ViewingOptions = (props) => {
       </div>
       {
         props.open ? (
-          <div className={cn([styles.streamViewingOptionsList, 'streamViewingOptionsList'])}>
+          <div className={cn([styles.streamViewingOptionsList, 'coral-plugin-viewing-options-list'])}>
             <ul>
               {
-                React.Children.map(<Slot fill="streamViewingOptions" />, (component) => {
+                React.Children.map(<Slot fill="viewingOptions" />, (component) => {
                   return React.createElement('li', {
-                    className: 'viewingOption'
+                    className: 'coral-plugin-viewing-options-item'
                   }, component);
                 })
               }