implimenting assinging status update to team memember

frontend/src/components/people-list/table/index.js

@@ -12,6 +12,7 @@ const PeopleTable = (props) => {
     handleRoleTooltip,
     handleRoleUpdate,
     handleStatusTooltip,
+    handleStatusUpdate,
     people = [],
     orgUI = {},
     orgIndex
@@ -38,7 +39,9 @@ const PeopleTable = (props) => {
     const status = (person) => (
       <PersonStatus
         handleStatusTooltip={handleStatusTooltip}
+        handleStatusUpdate={handleStatusUpdate}
         membersStatusOptions={orgUI.members_status}
+        orgIndex={orgIndex}
         person={person}
         personIndex={index}
         toggledID={orgUI.member_status_tooltip}
@@ -78,6 +81,7 @@ PeopleTable.propTypes = {
   handleRoleTooltip: React.PropTypes.func,
   handleRoleUpdate: React.PropTypes.func,
   handleStatusTooltip: React.PropTypes.func,
+  handleStatusUpdate: React.PropTypes.func,
   orgIndex: React.PropTypes.number,
   orgUI: React.PropTypes.object,
   people: React.PropTypes.array,

frontend/src/components/people-list/table/person-role.js

@@ -81,6 +81,7 @@ const PersonRole = (props) => {
           options={membersRolesOptions}
           orgIndex={orgIndex}
           person={_person}
+          personAttr="role"
           personIndex={personIndex}
           />
         : null }

frontend/src/components/people-list/table/person-status.js

@@ -49,14 +49,26 @@ const PlainButton = styled.button`
 const PersonStatus = (props) => {
 
   const {
-    handleStatusTooltip,
     toggledID,
     membersStatusOptions,
     person,
+    personIndex,
+    handleStatusTooltip,
+    handleStatusUpdate,
+    orgIndex
   } = props;
 
   const toggled = toggledID;
   const handleClick = () => handleStatusTooltip(person.uuid);
+  const handleOptionSelect = (updatedMember) =>
+    handleStatusUpdate(updatedMember);
+
+  // Only send relevent info as props
+  const _person =  {
+    uuid: person.uuid,
+    status: person.status,
+    role: person.role
+  };
 
   return (
     <StyledWrapper toggled={toggled}>
@@ -65,7 +77,14 @@ const PersonStatus = (props) => {
       </PlainButton>
 
       { toggledID === person.uuid
-        ? <Tooltip options={membersStatusOptions} person={person} />
+        ? <Tooltip
+          handleSelect={handleOptionSelect}
+          options={membersStatusOptions}
+          orgIndex={orgIndex}
+          person={_person}
+          personAttr="status"
+          personIndex={personIndex}
+          />
         : null }
     </StyledWrapper>
   );
@@ -73,8 +92,11 @@ const PersonStatus = (props) => {
 
 PersonStatus.propTypes = {
   handleStatusTooltip: React.PropTypes.func,
+  handleStatusUpdate: React.PropTypes.func,
   membersStatusOptions: React.PropTypes.array,
+  orgIndex: React.PropTypes.number,
   person: React.PropTypes.object,
+  personIndex: React.PropTypes.number,
   toggledID: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.bool,

frontend/src/components/people-list/table/tooltip.js

@@ -16,6 +16,7 @@ const arrowPosition = {
 module.exports = ({
   handleSelect,
   person = {},
+  personAttr,
   personIndex,
   options = [],
   orgIndex,
@@ -27,7 +28,8 @@ module.exports = ({
       person: {
         uuid: person.uuid,
         status: person.status,
-        role: option
+        role: person.role,
+        [`${personAttr}`]: option
       },
       personIndex,
       orgIndex,
@@ -63,5 +65,6 @@ module.exports.propTypes = {
   options: React.PropTypes.array,
   orgIndex: React.PropTypes.number,
   person: React.PropTypes.object,
+  personAttr: React.PropTypes.string,
   personIndex: React.PropTypes.number,
 };

frontend/src/containers/org/people.js

@@ -20,7 +20,8 @@ const {
   handleInviteToggle,
   handlePeopleRoleTooltip,
   handlePeopleStatusTooltip,
-  handleRoleUpdate
+  handleRoleUpdate,
+  handleStatusUpdate,
 } = actions;
 
 const People = (props) => {
@@ -47,6 +48,8 @@ const mapDispatchToProps = (dispatch) => ({
   handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
   handleRoleUpdate: (updatedMember) =>
       dispatch(handleRoleUpdate(updatedMember)),
+  handleStatusUpdate: (updatedMember) =>
+    dispatch(handleStatusUpdate(updatedMember)),
 });
 
 module.exports = connect(

frontend/src/state/actions.js

@@ -22,5 +22,6 @@ module.exports = {
       createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
   handlePeopleRoleTooltip:
     createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
-  handleRoleUpdate: createAction(`${APP}/HANDLE_PERSON_ROLE_UPDATE`),
+  handleMemberUpdate: createAction(`${APP}/HANDLE_PERSON_ROLE_UPDATE`),
+  handleStatusUpdate: createAction(`${APP}/HANDLE_PERSON_STATUS_UPDATE`),
 };

frontend/src/state/reducers/orgs.js

@@ -10,7 +10,8 @@ const {
   handleInviteToggle,
   handlePeopleRoleTooltip,
   handlePeopleStatusTooltip,
-  handleRoleUpdate
+  handleRoleUpdate,
+  handleStatusUpdate,
 } = actions;
 
 module.exports = handleActions({
@@ -75,5 +76,35 @@ module.exports = handleActions({
         ...state.data.slice(orgIndex + 1),
       ]
     };
+  },
+  [handleStatusUpdate.toString()]: (state, action) => {
+    const {
+      orgIndex,
+      person,
+      personIndex,
+    } = action.payload;
+
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_status_tooltip: false,
+        member_role_tooltip: false
+      },
+      data: [
+        ...state.data.slice(0, orgIndex),
+        {
+          ...state.data[orgIndex],
+          members: [
+            ...state.data[orgIndex].members.slice(0, personIndex),
+            {
+              ...person,
+            },
+            ...state.data[orgIndex].members.slice(personIndex + 1)
+          ]
+        },
+        ...state.data.slice(orgIndex + 1),
+      ]
+    };
   }
 }, {});