From 019ecd4d9639197b28755924947e371df4007294 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 24 Jan 2017 11:01:48 +0000
Subject: [PATCH] updating toggle to take person uuid instead of bool

---
 .../components/people-list/person-status.js   | 50 ++++++++++++++++---
 frontend/src/components/people-list/table.js  |  2 +-
 frontend/src/containers/org/people.js         |  2 +-
 frontend/src/state/reducers/orgs.js           |  3 +-
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/people-list/person-status.js b/frontend/src/components/people-list/person-status.js
index ebb8cb0b..3a91a2de 100644
--- a/frontend/src/components/people-list/person-status.js
+++ b/frontend/src/components/people-list/person-status.js
@@ -1,6 +1,7 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const Tooltip = require('@ui/components/tooltip');
 const fns = require('@ui/shared/functions');
 const composers = require('@ui/shared/composers');
 
@@ -35,23 +36,56 @@ const StyledWrapper = styled.div`
   }
 `;
 
+const arrowPosition = {
+  bottom: '100%',
+  right: '10%'
+};
+
+const tooltipStyle = {
+  position: 'absolute',
+  top: 0,
+  'z-index': 1
+};
+
+const PlainButton = styled.button`
+  background: transparent;
+  font-size: inherit;
+  border: none;
+  z-index: 0;
+  font-family: inherit;
+  color: inherit;
+`;
+
+const tooltip = (person) => (
+  <Tooltip
+    arrowPosition={arrowPosition}
+    key={person.uuid}
+    style={tooltipStyle}
+  >
+    <li>Admin</li>
+    <li>Read Only</li>
+    <li>Unassigned</li>
+  </Tooltip>
+);
+
 const PersonStatus = (props) => {
 
   const {
-    toggled,
+    toggledID,
     person,
     handleStatusTooltip
   } = props;
 
+  const toggled = toggledID;
+  const handleClick = () => handleStatusTooltip(person.uuid);
+
   return (
     <StyledWrapper toggled={toggled}>
-      <a
-        onClick={handleStatusTooltip}
-        role="tooltip"
-        tabIndex="0"
-      >
+      <PlainButton onClick={handleClick} >
         {person.status}
-      </a>
+      </PlainButton>
+
+      {toggledID === person.uuid ? tooltip(person) : null}
     </StyledWrapper>
   );
 };
@@ -59,7 +93,7 @@ const PersonStatus = (props) => {
 PersonStatus.propTypes = {
   handleStatusTooltip: React.PropTypes.func,
   person: React.PropTypes.object,
-  toggled: React.PropTypes.bool,
+  toggledID: React.PropTypes.string,
 };
 
 module.exports = PersonStatus;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/table.js b/frontend/src/components/people-list/table.js
index 2c9140f5..2060258b 100644
--- a/frontend/src/components/people-list/table.js
+++ b/frontend/src/components/people-list/table.js
@@ -36,7 +36,7 @@ const PeopleTable = (props) => {
       <PersonStatus
         handleStatusTooltip={handleStatusTooltip}
         person={person}
-        toggled={orgUI.member_role_tooltip}
+        toggledID={orgUI.member_role_tooltip}
       />
     );
 
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index 461208ac..32e348e6 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -39,7 +39,7 @@ const mapStateToProps = (state, {
 
 const mapDispatchToProps = (dispatch) => ({
   handleToggle: () => dispatch(handleInviteToggle()),
-  handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
+  handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
 });
 
 module.exports = connect(
diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js
index 7332b38d..52181e4c 100644
--- a/frontend/src/state/reducers/orgs.js
+++ b/frontend/src/state/reducers/orgs.js
@@ -26,7 +26,8 @@ module.exports = handleActions({
       ...state,
       ui: {
         ...state.ui,
-        member_role_tooltip: !state.ui.member_role_tooltip
+        member_role_tooltip:
+          action.payload === state.ui.member_role_tooltip ? '' : action.payload
       }
     };
   }