From 2202c8ae5bc3ecbe4ac8831026b8746917dae559 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 6 Jun 2017 18:08:13 -0300
Subject: [PATCH] Fully working filter

---
 plugins/coral-plugin-offtopic/client/actions.js    |  5 +++++
 .../client/components/OffTopicFilter.js            | 14 ++++++++++----
 plugins/coral-plugin-offtopic/client/constants.js  |  1 +
 plugins/coral-plugin-offtopic/client/reducer.js    | 10 +++++++++-
 4 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 plugins/coral-plugin-offtopic/client/actions.js
 create mode 100644 plugins/coral-plugin-offtopic/client/constants.js

diff --git a/plugins/coral-plugin-offtopic/client/actions.js b/plugins/coral-plugin-offtopic/client/actions.js
new file mode 100644
index 000000000..6a4ef98d5
--- /dev/null
+++ b/plugins/coral-plugin-offtopic/client/actions.js
@@ -0,0 +1,5 @@
+import {TOGGLE_CHECKBOX} from './constants';
+
+export const toggleCheckbox = () => ({
+  type: TOGGLE_CHECKBOX
+});
\ No newline at end of file
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
index f8c588316..7122bc20f 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
+++ b/plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js
@@ -2,6 +2,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';
 
@@ -14,9 +15,11 @@ class OffTopicFilter extends React.Component {
   handleChange = (e) => {
     if (e.target.checked) {
       this.props.addClassName(this.cn);
+      this.props.toggleCheckbox();
     } else {
-      const idx = this.props.comment.classNames.indexOf(this.cn);
+      const idx = this.props.classNames.findIndex((i) => i[this.className]);
       this.props.removeClassName(idx);
+      this.props.toggleCheckbox();
     }
     this.props.closeViewingOptions();
   }
@@ -25,7 +28,7 @@ class OffTopicFilter extends React.Component {
     return (
       <div className={styles.viewingOption}>
         <label>
-          <input type="checkbox" onChange={this.handleChange} checked={true}/>
+          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
           Hide Off-Topic Comments
         </label>
       </div>
@@ -33,9 +36,12 @@ class OffTopicFilter extends React.Component {
   }
 }
 
-const mapStateToProps = ({comment, offTopicFilter}) => ({comment, offTopicFilter});
+const mapStateToProps = ({comment, offTopic}) => ({
+  classNames: comment.classNames,
+  checked: offTopic.checked
+});
 
 const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({addClassName, removeClassName, closeViewingOptions}, dispatch);
+  bindActionCreators({addClassName, removeClassName, toggleCheckbox, closeViewingOptions}, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(OffTopicFilter);
diff --git a/plugins/coral-plugin-offtopic/client/constants.js b/plugins/coral-plugin-offtopic/client/constants.js
new file mode 100644
index 000000000..bbb4a5899
--- /dev/null
+++ b/plugins/coral-plugin-offtopic/client/constants.js
@@ -0,0 +1 @@
+export const TOGGLE_CHECKBOX = "TOGGLE_CHECKBOX";
\ No newline at end of file
diff --git a/plugins/coral-plugin-offtopic/client/reducer.js b/plugins/coral-plugin-offtopic/client/reducer.js
index df5612a25..55639f601 100644
--- a/plugins/coral-plugin-offtopic/client/reducer.js
+++ b/plugins/coral-plugin-offtopic/client/reducer.js
@@ -1,9 +1,17 @@
+import {TOGGLE_CHECKBOX} from './constants';
+
 const initialState = {
-  filter: true
+  checked: false
 };
 
 export default function offTopic (state = initialState, action) {
   switch (action.type) {
+    case TOGGLE_CHECKBOX: {
+      return {
+        ...state,
+        checked: !state.checked
+      }
+    }
   default :
     return state;
   }