From 5460e06ffed13bec1b796db525de7f8f5fe7ee17 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Thu, 28 Dec 2017 12:59:36 +0200
Subject: [PATCH 1/4] added members view

---
 app/scenes/Settings/Members.js | 95 ++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 app/scenes/Settings/Members.js

diff --git a/app/scenes/Settings/Members.js b/app/scenes/Settings/Members.js
new file mode 100644
index 000000000..6224156b2
--- /dev/null
+++ b/app/scenes/Settings/Members.js
@@ -0,0 +1,95 @@
+// @flow
+import React, { Component } from 'react';
+import { observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import invariant from 'invariant';
+import styled from 'styled-components';
+import Flex from 'shared/components/Flex';
+import Avatar from 'components/Avatar';
+import { color, layout } from 'shared/styles/constants';
+
+import { client } from 'utils/ApiClient';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
+
+@observer
+class Members extends Component {
+  @observable members;
+  @observable isLoaded: boolean = false;
+
+  componentDidMount() {
+    this.fetchMembers();
+  }
+
+  async fetchMembers() {
+    try {
+      const res = await client.post(`/team.users`);
+      invariant(res && res.data, 'Unable ');
+      const { data } = res;
+      runInAction('Members#fetchMembers', () => {
+        this.members = data;
+      });
+    } catch (e) {
+      // show error
+    }
+  }
+
+  render() {
+    return (
+      <CenteredContent>
+        <PageTitle title="Members" />
+        <h1>Members</h1>
+        {this.members && (
+          <MemberList>
+            {this.members.map(member => (
+              <Member auto justify="space-between">
+                <Flex>
+                  <Avatar src={member.avatarUrl} />
+                  <UserName>
+                    {member.name} &middot; {member.email}
+                    {member.isAdmin && <AdminBadge>Admin</AdminBadge>}
+                  </UserName>
+                </Flex>
+                <Flex>
+                  <Action onClick={() => { }}>Make admin</Action>
+                </Flex>
+              </Member>
+            ))}
+          </MemberList>
+        )}
+      </CenteredContent>
+    );
+  }
+}
+
+const MemberList = styled(Flex) `
+  border: 1px solid ${color.smoke};
+  border-radius: 4px;
+`;
+
+const Member = styled(Flex) `
+  padding: 4px 10px;
+  border-bottom: 1px solid ${color.smoke};
+  font-size: 15px;
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const UserName = styled.span`
+  padding-left: 8px;
+`;
+
+const AdminBadge = styled.span`
+  margin-left: 10px;
+  color: #777;
+  font-size: 13px;
+  text-transform: uppercase;
+  font-weight: normal;
+`;
+
+const Action = styled.span``;
+
+export default Members;

From bbd160053946b86a18d69ef08fa40bc3e69355ee Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Wed, 17 Jan 2018 20:49:43 -0800
Subject: [PATCH 2/4] Settings members UI

---
 app/components/Sidebar/Settings.js |  3 +
 app/index.js                       |  2 +
 app/scenes/Settings/Members.js     | 90 ++++++++++++++++--------------
 app/stores/SettingsStore.js        | 21 ++++++-
 4 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index 1d0767a6a..e08885e77 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -56,6 +56,9 @@ class Sidebar extends Component {
             </Section>
             <Section>
               <Header>Team</Header>
+              <SidebarLink to="/settings/members" icon={<CodeIcon />}>
+                Members
+              </SidebarLink>
               <SidebarLink
                 to="/settings/integrations/slack"
                 icon={<SettingsIcon />}
diff --git a/app/index.js b/app/index.js
index 66c04691f..d9e6b54f4 100644
--- a/app/index.js
+++ b/app/index.js
@@ -20,6 +20,7 @@ import Collection from 'scenes/Collection';
 import Document from 'scenes/Document';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
+import Members from 'scenes/Settings/Members';
 import Slack from 'scenes/Settings/Slack';
 import Tokens from 'scenes/Settings/Tokens';
 import SlackAuth from 'scenes/SlackAuth';
@@ -65,6 +66,7 @@ render(
                     <Route exact path="/dashboard" component={Dashboard} />
                     <Route exact path="/starred" component={Starred} />
                     <Route exact path="/settings" component={Settings} />
+                    <Route exact path="/settings/members" component={Members} />
                     <Route exact path="/settings/tokens" component={Tokens} />
                     <Route
                       exact
diff --git a/app/scenes/Settings/Members.js b/app/scenes/Settings/Members.js
index 6224156b2..ab551c733 100644
--- a/app/scenes/Settings/Members.js
+++ b/app/scenes/Settings/Members.js
@@ -1,75 +1,83 @@
 // @flow
 import React, { Component } from 'react';
-import { observable, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import invariant from 'invariant';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import Avatar from 'components/Avatar';
-import { color, layout } from 'shared/styles/constants';
+import { color } from 'shared/styles/constants';
 
-import { client } from 'utils/ApiClient';
+import ErrorsStore from 'stores/ErrorsStore';
+import SettingsStore from 'stores/SettingsStore';
 import CenteredContent from 'components/CenteredContent';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
 
 @observer
 class Members extends Component {
+  props: {
+    errors: ErrorsStore,
+    settings: SettingsStore,
+  };
+
   @observable members;
   @observable isLoaded: boolean = false;
 
+  @observable inviteEmails: string = '';
+  @observable isInviting: boolean = false;
+
   componentDidMount() {
-    this.fetchMembers();
+    this.props.settings.fetchMembers();
   }
 
-  async fetchMembers() {
-    try {
-      const res = await client.post(`/team.users`);
-      invariant(res && res.data, 'Unable ');
-      const { data } = res;
-      runInAction('Members#fetchMembers', () => {
-        this.members = data;
-      });
-    } catch (e) {
-      // show error
-    }
-  }
+  handleUserInvite = async () => {};
+
+  handleInviteEmailChange = e => {
+    this.inviteEmails = e.target.value;
+  };
 
   render() {
     return (
       <CenteredContent>
         <PageTitle title="Members" />
         <h1>Members</h1>
-        {this.members && (
-          <MemberList>
-            {this.members.map(member => (
-              <Member auto justify="space-between">
-                <Flex>
-                  <Avatar src={member.avatarUrl} />
-                  <UserName>
-                    {member.name} &middot; {member.email}
-                    {member.isAdmin && <AdminBadge>Admin</AdminBadge>}
-                  </UserName>
-                </Flex>
-                <Flex>
-                  <Action onClick={() => { }}>Make admin</Action>
-                </Flex>
-              </Member>
-            ))}
-          </MemberList>
+
+        {!this.props.settings.isFetching ? (
+          <Flex column>
+            {this.props.settings.members && (
+              <MemberList>
+                {this.props.settings.members.map(member => (
+                  <Member auto justify="space-between">
+                    <Flex>
+                      <Avatar src={member.avatarUrl} />
+                      <UserName>
+                        {member.name} {member.email && `(${member.email})`}
+                        {member.isAdmin && <AdminBadge>Admin</AdminBadge>}
+                      </UserName>
+                    </Flex>
+                  </Member>
+                ))}
+              </MemberList>
+            )}
+          </Flex>
+        ) : (
+          <LoadingPlaceholder />
         )}
       </CenteredContent>
     );
   }
 }
 
-const MemberList = styled(Flex) `
+const MemberList = styled(Flex)`
   border: 1px solid ${color.smoke};
   border-radius: 4px;
+
+  margin-top: 20px;
+  margin-bottom: 40px;
 `;
 
-const Member = styled(Flex) `
-  padding: 4px 10px;
+const Member = styled(Flex)`
+  padding: 10px;
   border-bottom: 1px solid ${color.smoke};
   font-size: 15px;
 
@@ -90,6 +98,4 @@ const AdminBadge = styled.span`
   font-weight: normal;
 `;
 
-const Action = styled.span``;
-
-export default Members;
+export default inject('errors', 'settings')(Members);
diff --git a/app/stores/SettingsStore.js b/app/stores/SettingsStore.js
index a59105e0d..87521d287 100644
--- a/app/stores/SettingsStore.js
+++ b/app/stores/SettingsStore.js
@@ -2,10 +2,11 @@
 import { observable, action, runInAction } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import type { ApiKey } from 'types';
+import type { ApiKey, User } from 'types';
 
 class SettingsStore {
   @observable apiKeys: ApiKey[] = [];
+  @observable members: User[] = [];
   @observable isFetching: boolean = false;
   @observable isSaving: boolean = false;
 
@@ -55,6 +56,24 @@ class SettingsStore {
       console.error('Something went wrong');
     }
   };
+
+  @action
+  fetchMembers = async () => {
+    this.isFetching = true;
+
+    try {
+      const res = await client.post('/team.users');
+      invariant(res && res.data, 'Data should be available');
+      const { data } = res;
+
+      runInAction('fetchMembers', () => {
+        this.members = data;
+      });
+    } catch (e) {
+      console.error('Something went wrong');
+    }
+    this.isFetching = false;
+  };
 }
 
 export default SettingsStore;

From 0121f22eede2e183fa3e17df18d8d23f3c353bb6 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Wed, 17 Jan 2018 20:52:27 -0800
Subject: [PATCH 3/4] Removed unused code

---
 app/scenes/Settings/Members.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/scenes/Settings/Members.js b/app/scenes/Settings/Members.js
index ab551c733..0510bb16c 100644
--- a/app/scenes/Settings/Members.js
+++ b/app/scenes/Settings/Members.js
@@ -30,12 +30,6 @@ class Members extends Component {
     this.props.settings.fetchMembers();
   }
 
-  handleUserInvite = async () => {};
-
-  handleInviteEmailChange = e => {
-    this.inviteEmails = e.target.value;
-  };
-
   render() {
     return (
       <CenteredContent>

From 46791109e39ff5723c453199c2b31a61a9d37af6 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 21 Jan 2018 16:17:21 -0800
Subject: [PATCH 4/4] Added user icon

---
 app/components/Icon/UserIcon.js    | 12 ++++++++++++
 app/components/Sidebar/Settings.js |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Icon/UserIcon.js

diff --git a/app/components/Icon/UserIcon.js b/app/components/Icon/UserIcon.js
new file mode 100644
index 000000000..c9341428c
--- /dev/null
+++ b/app/components/Icon/UserIcon.js
@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function UserIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <path d="M12,11 C10,11 9,9.43299662 9,7.5 C9,5.56700338 9.5,4 12,4 C14.5,4 15,5.56700338 15,7.5 C15,9.43299662 14,11 12,11 Z M8.0085302,19 C6.8992496,19 6,18.1052949 6,17 C6,15 7,12 12,12 C17,12 18,15 18,17 C18,18.1045695 17.0980496,19 15.9914698,19 L8.0085302,19 Z" />
+    </Icon>
+  );
+}
diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index e08885e77..b8ab1e7c4 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -11,6 +11,7 @@ import Scrollable from 'components/Scrollable';
 import ProfileIcon from 'components/Icon/ProfileIcon';
 import SettingsIcon from 'components/Icon/SettingsIcon';
 import CodeIcon from 'components/Icon/CodeIcon';
+import UserIcon from 'components/Icon/UserIcon';
 import Header from './components/Header';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
@@ -56,7 +57,7 @@ class Sidebar extends Component {
             </Section>
             <Section>
               <Header>Team</Header>
-              <SidebarLink to="/settings/members" icon={<CodeIcon />}>
+              <SidebarLink to="/settings/members" icon={<UserIcon />}>
                 Members
               </SidebarLink>
               <SidebarLink