From d0a6ce6d7f6dbe00eba659d62cb02196cee92dfc Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 23 Apr 2017 16:32:12 -0700
Subject: [PATCH] Handle toggle in action creators.

---
 js/actionTypes.js       |  4 ++--
 js/components/EqAuto.js | 30 ++++++++++++------------------
 js/components/EqOn.js   | 30 ++++++++++++------------------
 js/reducers.js          | 12 ++++++------
 4 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/js/actionTypes.js b/js/actionTypes.js
index 86679a73..6d17ec72 100644
--- a/js/actionTypes.js
+++ b/js/actionTypes.js
@@ -24,8 +24,8 @@ export const STOP_WORKING = "STOP_WORKING";
 export const TOGGLE_CONTEXT_MENU = "TOGGLE_CONTEXT_MENU";
 export const TOGGLE_DOUBLESIZE_MODE = "TOGGLE_DOUBLESIZE_MODE";
 export const TOGGLE_EQUALIZER_WINDOW = "TOGGLE_EQUALIZER_WINDOW";
-export const TOGGLE_EQ_AUTO = "TOGGLE_EQ_AUTO";
-export const TOGGLE_EQ_ON = "TOGGLE_EQ_ON";
+export const SET_EQ_AUTO = "SET_EQ_AUTO";
+export const SET_EQ_ON = "SET_EQ_ON";
 export const TOGGLE_LLAMA_MODE = "TOGGLE_LLAMA_MODE";
 export const TOGGLE_REPEAT = "TOGGLE_REPEAT";
 export const TOGGLE_SHADE_MODE = "TOGGLE_SHADE_MODE";
diff --git a/js/components/EqAuto.js b/js/components/EqAuto.js
index d3e77c4d..d1b26b4c 100644
--- a/js/components/EqAuto.js
+++ b/js/components/EqAuto.js
@@ -2,24 +2,18 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
-import { TOGGLE_EQ_AUTO } from "../actionTypes";
+import { SET_EQ_AUTO } from "../actionTypes";
 
-class EqAuto extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
+const EqAuto = props => {
+  const className = classnames({
+    selected: props.auto
+  });
+  return <div id="auto" className={className} onClick={props.toggleAuto} />;
+};
 
-  handleClick() {
-    this.props.dispatch({ type: TOGGLE_EQ_AUTO });
-  }
+const toggleAuto = () => (dispatch, getState) => {
+  dispatch({ type: SET_EQ_AUTO, value: !getState().equalizer.auto });
+};
 
-  render() {
-    const className = classnames({
-      selected: this.props.auto
-    });
-    return <div id="auto" className={className} onClick={this.handleClick} />;
-  }
-}
-
-export default connect(state => state.equalizer)(EqAuto);
+const mapDispatchToProps = { toggleAuto };
+export default connect(state => state.equalizer, mapDispatchToProps)(EqAuto);
diff --git a/js/components/EqOn.js b/js/components/EqOn.js
index e526b8a9..ab3e1cea 100644
--- a/js/components/EqOn.js
+++ b/js/components/EqOn.js
@@ -2,24 +2,18 @@ import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
 
-import { TOGGLE_EQ_ON } from "../actionTypes";
+import { SET_EQ_ON } from "../actionTypes";
 
-class EqOn extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
+const EqOn = props => {
+  const className = classnames({
+    selected: props.on
+  });
+  return <div id="on" className={className} onClick={props.toggleOn} />;
+};
 
-  handleClick() {
-    this.props.dispatch({ type: TOGGLE_EQ_ON });
-  }
+const toggleOn = () => (dispatch, getState) => {
+  dispatch({ type: SET_EQ_ON, value: !getState().equalizer.on });
+};
 
-  render() {
-    const className = classnames({
-      selected: this.props.on
-    });
-    return <div id="on" className={className} onClick={this.handleClick} />;
-  }
-}
-
-export default connect(state => state.equalizer)(EqOn);
+const mapDispatchToProps = { toggleOn };
+export default connect(state => state.equalizer, mapDispatchToProps)(EqOn);
diff --git a/js/reducers.js b/js/reducers.js
index a3eabf83..998152b0 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -18,8 +18,8 @@ import {
   TOGGLE_CONTEXT_MENU,
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_EQUALIZER_WINDOW,
-  TOGGLE_EQ_AUTO,
-  TOGGLE_EQ_ON,
+  SET_EQ_AUTO,
+  SET_EQ_ON,
   TOGGLE_LLAMA_MODE,
   TOGGLE_REPEAT,
   TOGGLE_SHADE_MODE,
@@ -153,10 +153,10 @@ const equalizer = (state, action) => {
       const newSliders = { ...state.sliders };
       newSliders[action.band] = action.value;
       return { ...state, sliders: newSliders };
-    case TOGGLE_EQ_ON:
-      return { ...state, on: !state.on };
-    case TOGGLE_EQ_AUTO:
-      return { ...state, auto: !state.auto };
+    case SET_EQ_ON:
+      return { ...state, on: action.value };
+    case SET_EQ_AUTO:
+      return { ...state, auto: action.value };
     default:
       return state;
   }