From 017f133611badd81ff330906e695aff95d1563d7 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 28 Feb 2017 17:54:33 +0000
Subject: [PATCH] adding in off-click of element handler

---
 frontend/src/components/header/index.js | 26 ++++++++++++++++++-------
 frontend/src/containers/header/index.js |  2 +-
 frontend/src/state/reducers/account.js  | 16 +++++++--------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
index 03fabd4f..a600eb1f 100644
--- a/frontend/src/components/header/index.js
+++ b/frontend/src/components/header/index.js
@@ -76,14 +76,22 @@ const arrowPosition = {
   right: '10%'
 };
 
-const Header = ({
-  account = {},
-  tooltip = false,
-  handleToggle
-}) => {
+const Header = (props) => {
+
+  const {
+    account,
+    handleToggle,
+    tooltip
+  } = props;
+
   const handleToggleClick = (ev) => {
     ev.preventDefault();
-    handleToggle();
+    handleToggle(!tooltip);
+  };
+
+  const handleHideToggle = (ev) => {
+    ev.preventDefault();
+    handleToggle(false);
   };
 
   const tooltipComponent = !tooltip ? null : (
@@ -103,7 +111,11 @@ const Header = ({
   );
 
   return (
-    <StyledHeader name='application-header'>
+    <StyledHeader
+      name='application-header'
+      onBlur={handleHideToggle}
+      onFocus={handleHideToggle}
+    >
       <Row>
         <Column lg={10} xs={8}>
           <Link to='/'>
diff --git a/frontend/src/containers/header/index.js b/frontend/src/containers/header/index.js
index 91a06a94..89ec923d 100644
--- a/frontend/src/containers/header/index.js
+++ b/frontend/src/containers/header/index.js
@@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  handleToggle: () => dispatch(toggleHeaderTooltip())
+  handleToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
 });
 
 export default connect(
diff --git a/frontend/src/state/reducers/account.js b/frontend/src/state/reducers/account.js
index 204773cb..e87bf8c0 100644
--- a/frontend/src/state/reducers/account.js
+++ b/frontend/src/state/reducers/account.js
@@ -2,13 +2,11 @@ import { handleActions } from 'redux-actions';
 import { toggleHeaderTooltip } from '@state/actions';
 
 export default handleActions({
-  [toggleHeaderTooltip.toString()]: (state, action) => {
-    return {
-      ...state,
-      ui: {
-        ...state.ui,
-        tooltip: !state.ui.tooltip
-      }
-    };
-  }
+  [toggleHeaderTooltip.toString()]: (state, action) => ({
+    ...state,
+    ui: {
+      ...state.ui,
+      tooltip: action.payload
+    }
+  })
 }, {});