From 16d67e9a47ad7807f30a1625b39b41c6cccf366f Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Mon, 23 Jan 2017 15:47:45 +0000
Subject: [PATCH] adding in invite input module

---
 frontend/src/components/people-list/index.js  |   7 +-
 frontend/src/components/people-list/invite.js | 104 ++++++++++++++++++
 frontend/src/containers/org/people.js         |   6 +-
 frontend/src/mock-state.json                  |   2 +-
 frontend/src/state/reducers/orgs.js           |  16 ++-
 frontend/src/state/selectors.js               |   3 +-
 6 files changed, 131 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/people-list/invite.js

diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js
index 0d791a02..6d91b4b2 100644
--- a/frontend/src/components/people-list/index.js
+++ b/frontend/src/components/people-list/index.js
@@ -6,6 +6,7 @@ const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
 
 const PeopleTable = require('./table');
+const Invite = require('./invite');
 
 const buttonStyle = {
   float: 'right'
@@ -16,7 +17,7 @@ const People = (props) => {
   const {
     people = [],
     orgUI = {},
-    handleToggle
+    handleToggle,
   } = props;
 
   return (
@@ -33,6 +34,8 @@ const People = (props) => {
         </Column>
       </Row>
 
+      {orgUI.invite_toggled ? <Invite {...props} /> : null}
+
       <Row>
         <Column xs={12}>
           <PeopleTable
@@ -47,7 +50,7 @@ const People = (props) => {
 People.propTypes = {
   handleToggle: React.PropTypes.func,
   orgUI: React.PropTypes.obj,
-  people: React.PropTypes.arrayOf(PropTypes.person),
+  people: React.PropTypes.arrayOf(PropTypes.person)
 };
 
 module.exports = People;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js
new file mode 100644
index 00000000..c04af5e7
--- /dev/null
+++ b/frontend/src/components/people-list/invite.js
@@ -0,0 +1,104 @@
+const React = require('react');
+
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
+const SelectCustom = require('@ui/components/select-custom');
+
+const Invite = (props) => {
+
+  const {
+    people = [],
+    handleToggle,
+    platformMembers
+  } = props;
+
+  const InputStyle = {
+    float: 'left',
+    width: '75%'
+  };
+
+  const AddButtonStyle = {
+    float: 'right',
+    width: '20%'
+  };
+
+  const styleInline = {
+    display: 'inline-block'
+  };
+
+  const selectData = [
+    {
+      value: 'one',
+      label: 'One'
+    },
+    {
+      value: 'two',
+      label: 'Two'
+    },
+    {
+      value: 'three',
+      label: 'Three'
+    },
+    {
+      value: 'four',
+      label: 'Four'
+    },
+    {
+      value: 'five',
+      label: 'Five'
+    },
+    {
+      value: 'six',
+      label: 'Six'
+    }
+  ];
+
+  return (
+    <Row>
+      <Column xs={6}>
+        <p>Search for a person by name or email or enter an email address
+          to invite someone new.</p>
+
+        <Row>
+          <Column xs={12}>
+            <SelectCustom
+              placeholder="Enter an email address or password"
+              multi
+              onChange={function noop() {}}
+              options={selectData}
+            />
+            <Button
+              style={AddButtonStyle}
+              secondary
+            >
+              Add
+            </Button>
+          </Column>
+        </Row>
+
+        <Button
+          secondary
+          style={styleInline}
+          onClick={handleToggle}
+        >
+          Cancel
+        </Button>
+
+        <Button
+          style={styleInline}
+        >
+          Send Invitation(s)
+        </Button>
+      </Column>
+    </Row>
+  );
+};
+
+Invite.propTypes = {
+  handleToggle: React.PropTypes.func,
+  orgUI: React.PropTypes.obj,
+  people: React.PropTypes.arrayOf(PropTypes.person)
+};
+
+module.exports = Invite;
\ No newline at end of file
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index a9ca21b7..99e487a0 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -11,7 +11,8 @@ const {
 
 const {
   peopleByOrgIdSelector,
-  orgUISelector
+  orgUISelector,
+  membersSelector
 } = selectors;
 
 const {
@@ -31,7 +32,8 @@ const mapStateToProps = (state, {
   params = {}
 }) => ({
   people: peopleByOrgIdSelector(params.org)(state),
-  orgUI: orgUISelector(state)
+  orgUI: orgUISelector(state),
+  platformMembers: membersSelector(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index b2609be4..c942b5f0 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -198,7 +198,7 @@
   },
   "orgs": {
     "ui": {
-      "invite_toggled": false,
+      "invite_toggled": true,
       "sections": [
         "projects",
         "people",
diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js
index 7fec06fb..e0243100 100644
--- a/frontend/src/state/reducers/orgs.js
+++ b/frontend/src/state/reducers/orgs.js
@@ -1,9 +1,23 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  handleInviteToggle
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [handleInviteToggle.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        invite_toggled: !state.ui.invite_toggled
+      }
+    };
+  }
 }, {});
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index 894ccc42..69fba90f 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -143,5 +143,6 @@ module.exports = {
   metricsByServiceIdSelector: metricsByServiceId,
   instancesByProjectIdSelector: instancesByProjectId,
   metricTypeByUuidSelector: metricTypeByUuid,
-  peopleByOrgIdSelector: peopleByOrgId
+  peopleByOrgIdSelector: peopleByOrgId,
+  membersSelector: members,
 };