deleting member from org

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

@@ -5,6 +5,7 @@ const Checkbox  = require('@ui/components/checkbox');
 
 const PersonStatus = require('./person-status');
 const PersonRole = require('./person-role');
+const PersonDelete = require('./person-delete');
 
 const PeopleTable = (props) => {
 
@@ -14,7 +15,8 @@ const PeopleTable = (props) => {
     handleMemberUpdate,
     people = [],
     orgUI = {},
-    orgIndex
+    orgIndex,
+    removeMember
   } = props;
 
   const columns = [{
@@ -59,12 +61,20 @@ const PeopleTable = (props) => {
       />
     );
 
+    const remove = (person) => (
+      <PersonDelete
+        orgIndex={orgIndex}
+        personIndex={index}
+        removeMember={removeMember}
+      />
+    );
+
     return {
       checkbox: <Checkbox />,
       name: person.name,
       status: status(person),
       role: role(person),
-      bin: ''
+      bin: people.length > 1 ? remove(person) : null
     };
   });
 
@@ -83,6 +93,7 @@ PeopleTable.propTypes = {
   orgIndex: React.PropTypes.number,
   orgUI: React.PropTypes.object,
   people: React.PropTypes.array,
+  removeMember: React.PropTypes.func,
 };
 
 module.exports = PeopleTable;

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

@@ -0,0 +1,43 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const PlainButton = styled.button`
+  background: transparent;
+  font-size: inherit;
+  border: none;
+  zIndex: 0;
+  font-family: inherit;
+  color: inherit;
+`;
+
+const PersonDelete = (props) => {
+
+  const {
+    personIndex,
+    orgIndex,
+    removeMember
+  } = props;
+
+  const _onClick = () => removeMember({
+    personIndex,
+    orgIndex
+  });
+
+  return (
+    <PlainButton onClick={_onClick} >
+      Delete
+    </PlainButton>
+  );
+};
+
+PersonDelete.propTypes = {
+  orgIndex: React.PropTypes.number,
+  personIndex: React.PropTypes.number,
+  removeMember: React.PropTypes.func,
+};
+
+module.exports = PersonDelete;

frontend/src/containers/org/people.js

@@ -20,7 +20,8 @@ const {
   handleInviteToggle,
   handlePeopleRoleTooltip,
   handlePeopleStatusTooltip,
-  handleMemberUpdate
+  handleMemberUpdate,
+  removeMember,
 } = actions;
 
 const People = (props) => {
@@ -47,6 +48,8 @@ const mapDispatchToProps = (dispatch) => ({
   handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
   handleMemberUpdate: (updatedMember) =>
       dispatch(handleMemberUpdate(updatedMember)),
+  removeMember: (removeData) =>
+    dispatch(removeMember(removeData)),
 
 });
 

frontend/src/state/actions.js

@@ -23,4 +23,5 @@ module.exports = {
   handlePeopleRoleTooltip:
     createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
   handleMemberUpdate: createAction(`${APP}/HANDLE_MEMBER_UPDATE`),
+  removeMember: createAction(`${APP}/REMOVE_MEMBER_FROM_ROLE`),
 };

frontend/src/state/reducers/orgs.js

@@ -11,6 +11,7 @@ const {
   handlePeopleRoleTooltip,
   handlePeopleStatusTooltip,
   handleMemberUpdate,
+  removeMember,
 } = actions;
 
 module.exports = handleActions({
@@ -76,5 +77,26 @@ module.exports = handleActions({
         ...state.data.slice(orgIndex + 1),
       ]
     };
-  }
+  },
+  [removeMember.toString()]: (state, action) => {
+    const {
+      orgIndex,
+      personIndex,
+    } = action.payload;
+
+    return {
+      ...state,
+      data: [
+        ...state.data.slice(0, orgIndex),
+        {
+          ...state.data[orgIndex],
+          members: [
+            ...state.data[orgIndex].members.slice(0, personIndex),
+            ...state.data[orgIndex].members.slice(personIndex + 1)
+          ]
+        },
+        ...state.data.slice(orgIndex + 1),
+      ]
+    };
+  },
 }, {});