starting work on impliment people/members module

frontend/src/components/people-item/index.js

@@ -0,0 +1,31 @@
+const React = require('react');
+
+const PropTypes = require('@root/prop-types');
+// const List = require('@ui/components/list');
+
+// const {
+//   ListItem,
+//   ListItemView,
+//   ListItemMeta,
+//   ListItemTitle,
+//   ListItemOptions
+// } = List;
+
+const PersonItem = ({
+  person = {},
+}) => {
+
+  return (
+    <tr>
+      <td>{person.uuid}</td>
+      <td>{person.uuid}</td>
+      <td>{person.uuid}</td>
+    </tr>
+  );
+};
+
+PersonItem.propTypes = {
+  person: PropTypes.person,
+};
+
+module.exports = PersonItem;

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

@@ -0,0 +1,39 @@
+const React = require('react');
+
+const PersonItem = require('@components/people-item');
+const PropTypes = require('@root/prop-types');
+
+const PeopleList = ({
+  people = []
+}) => {
+
+  const peopleList = people.map((person) => (
+    <PersonItem
+      key={person.uuid}
+      person={person}
+    />
+  ));
+
+  return (
+    <div>
+      <table>
+        <thead>
+          <tr>
+            <th>Member</th>
+            <th>Status</th>
+            <th>Role</th>
+          </tr>
+        </thead>
+        <tbody>
+          {peopleList}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+PeopleList.propTypes = {
+  people: React.PropTypes.arrayOf(PropTypes.person),
+};
+
+module.exports = PeopleList;

frontend/src/containers/org/people.js

@@ -3,6 +3,13 @@ const React = require('react');
 const ReactRedux = require('react-redux');
 // const ReactRouter = require('react-router');
 
+const Row = require('@ui/components/row');
+const Column= require('@ui/components/column');
+const Button= require('@ui/components/button');
+const PropTypes = require('@root/prop-types');
+const PeopleList = require('@components/people-list');
+const selectors = require('@state/selectors');
+
 const Section = require('./section');
 
 // const {
@@ -13,23 +20,53 @@ const {
   connect
 } = ReactRedux;
 
-// const {
+const {
-//   Link,
+  peopleByOrgIdSelector
-//   Match,
+} = selectors;
-//   Miss,
+
-//   Redirect
+const buttonStyle = {
-// } = ReactRouter;
+  float: 'right'
+};
 
 const People = (props) => {
+
+  const {
+    people = []
+  } = props;
+
   return (
     <Section {...props}>
-      <p>people</p>
+      <Row>
+        <Column smOffset={9} xs={2}>
+          <Button style={buttonStyle}>Invite</Button>
+        </Column>
+      </Row>
+
+      <Row>
+        <Column>
+          <PeopleList
+            people={people}
+          />
+        </Column>
+      </Row>
     </Section>
   );
 };
 
-People.propTypes = {};
+People.propTypes = {
+  people: React.PropTypes.arrayOf(PropTypes.person)
+  // toggleCollapsed: React.PropTypes.func
+};
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  people: peopleByOrgIdSelector(params.org)(state)
+});
 
-module.exports = connect(mapStateToProps)(People);
+const mapDispatchToProps = (dispatch) => ({});
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(People);

frontend/src/mock-state.json

@@ -211,18 +211,23 @@
       "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
       "id": "nicola",
       "name": "Your dashboard",
-      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg"
+      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
+      "members": {}
     }, {
       "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
       "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
       "id": "biz-tech",
-      "name": "BizTech"
+      "name": "BizTech",
+      "members": [{
+        "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f"
+      }]
     }, {
       "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
       "uuid": "551f316d-e414-480f-9787-b4c408db3edd",
       "id": "make-us-proud",
       "name": "Make Us Proud",
-      "image": "/static/images/make-us-proud.svg"
+      "image": "/static/images/make-us-proud.svg",
+      "members": {}
     }]
   },
   "projects": {

frontend/src/prop-types.js

@@ -61,6 +61,10 @@ const Sections = React.PropTypes.arrayOf(
   React.PropTypes.string
 );
 
+const Person = React.PropTypes.shape({
+  ...BaseObject
+});
+
 module.exports = {
   account: Account,
   link: Link,
@@ -71,5 +75,6 @@ module.exports = {
   instance: Instance,
   metric: Metric,
   metricType: MetricType,
-  dataset: Dataset
+  dataset: Dataset,
+  person: Person
 };

frontend/src/state/selectors.js

@@ -18,6 +18,7 @@ const services = (state) => get(state, 'services.data', []);
 const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
 const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
+const members = (state) => get(state, 'members.data', []);
 const metricTypes = (state) => get(state, 'metrics.data.types', []);
 const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
 
@@ -110,6 +111,12 @@ const instancesByProjectId = (projectId) => createSelector(
     }))
 );
 
+const peopleByOrgId = (orgId) => createSelector(
+  // [members, orgById(orgId)], (members, org) => org.members
+
+  [members, orgById(orgId)], (members, org) => org.members
+);
+
 module.exports = {
   accountSelector: account,
   accountUISelector: accountUi,
@@ -126,5 +133,6 @@ module.exports = {
   instancesByServiceIdSelector: instancesByServiceId,
   metricsByServiceIdSelector: metricsByServiceId,
   instancesByProjectIdSelector: instancesByProjectId,
-  metricTypeByUuidSelector: metricTypeByUuid
+  metricTypeByUuidSelector: metricTypeByUuid,
+  peopleByOrgIdSelector: peopleByOrgId
 };

ui/src/components/button/index.js

@@ -130,6 +130,7 @@ const style = css`
 `;
 
 const StyledButton = styled.button`
+  min-width: ${remcalc(120)};
   ${style}
 `;