Containers and Components structure

client/coral-framework/reducers/index.js

@@ -3,7 +3,7 @@ import user from './user';
 import asset from './asset';
 import {reducer as commentBox} from '../../coral-plugin-commentbox';
 import {pluginReducers} from '../helpers/plugins';
-console.log(pluginReducers);
+
 export default {
   auth,
   user,

plugins/coral-plugin-offtopic/client/actions.js

@@ -2,4 +2,4 @@ import {TOGGLE_CHECKBOX} from './constants';
 
 export const toggleCheckbox = () => ({
   type: TOGGLE_CHECKBOX
-});
+});

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

@@ -1,12 +1,9 @@
 import React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
 import styles from './styles.css';
 
 import t from 'coral-framework/services/i18n';
 
-class OffTopicCheckbox extends React.Component {
+export default class OffTopicCheckbox extends React.Component {
 
   label = 'OFF_TOPIC';
 
@@ -34,10 +31,3 @@ class OffTopicCheckbox extends React.Component {
     );
   }
 }
-
-const mapStateToProps = ({commentBox}) => ({commentBox});
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({addTag, removeTag}, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);

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

@@ -1,12 +1,7 @@
 import React from 'react';
 import styles from './styles.css';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {toggleCheckbox} from '../actions';
-import {addClassName, removeClassName} from 'coral-embed-stream/src/actions/comment';
-import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
 
-class OffTopicFilter extends React.Component {
+export default class OffTopicFilter extends React.Component {
 
   tag = 'OFF_TOPIC';
   className = 'offTopicComment';
@@ -35,13 +30,3 @@ class OffTopicFilter extends React.Component {
     );
   }
 }
-
-const mapStateToProps = ({comment, offTopic}) => ({
-  classNames: comment.classNames,
-  checked: offTopic.checked
-});
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({addClassName, removeClassName, toggleCheckbox, closeViewingOptions}, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter);

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

@@ -1,39 +0,0 @@
-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);

plugins/coral-plugin-offtopic/client/constants.js

@@ -1 +1 @@
-export const TOGGLE_CHECKBOX = "TOGGLE_CHECKBOX";
+export const TOGGLE_CHECKBOX = 'TOGGLE_CHECKBOX';

plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js

@@ -0,0 +1,11 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
+import OffTopicCheckbox from '../components/OffTopicCheckbox';
+
+const mapStateToProps = ({commentBox}) => ({commentBox});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({addTag, removeTag}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);

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

@@ -0,0 +1,27 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {toggleCheckbox} from '../actions';
+import {
+  addClassName,
+  removeClassName
+} from 'coral-embed-stream/src/actions/comment';
+import OffTopicFilter from '../components/OffTopicFilter';
+import {closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
+
+const mapStateToProps = ({comment, offTopic}) => ({
+  classNames: comment.classNames,
+  checked: offTopic.checked
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      addClassName,
+      removeClassName,
+      toggleCheckbox,
+      closeViewingOptions
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter);

plugins/coral-plugin-offtopic/client/index.js

@@ -1,7 +1,7 @@
-import OffTopicCheckbox from './components/OffTopicCheckbox';
-import OffTopicTag from './components/OffTopicTag';
-import OffTopicFilter from './components/OffTopicFilter';
 import translations from './translations.json';
+import OffTopicTag from './components/OffTopicTag';
+import OffTopicFilter from './containers/OffTopicFilter';
+import OffTopicCheckbox from './containers/OffTopicCheckbox';
 import reducer from './reducer';
 
 export default {

plugins/coral-plugin-offtopic/client/reducer.js

@@ -6,12 +6,12 @@ const initialState = {
 
 export default function offTopic (state = initialState, action) {
   switch (action.type) {
-    case TOGGLE_CHECKBOX: {
-      return {
-        ...state,
-        checked: !state.checked
-      }
-    }
+  case TOGGLE_CHECKBOX: {
+    return {
+      ...state,
+      checked: !state.checked
+    };
+  }
   default :
     return state;
   }