Settings members UI

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 />}

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

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);

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;