From 71270bcb930024241b0e1d5575babeed204fabc2 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 4 Mar 2018 22:34:06 -0800
Subject: [PATCH] Members -> Users

---
 app/components/Auth.js                        |  4 +-
 app/components/Sidebar/Settings.js            |  4 +-
 app/index.js                                  |  4 +-
 app/scenes/Settings/{Members.js => Users.js}  | 63 +++++++++----------
 .../components/{MemberMenu.js => UserMenu.js} | 24 +++----
 .../{MemberSettingsStore.js => UsersStore.js} | 20 +++---
 6 files changed, 55 insertions(+), 64 deletions(-)
 rename app/scenes/Settings/{Members.js => Users.js} (52%)
 rename app/scenes/Settings/components/{MemberMenu.js => UserMenu.js} (78%)
 rename app/stores/{MemberSettingsStore.js => UsersStore.js} (74%)

diff --git a/app/components/Auth.js b/app/components/Auth.js
index d17cb9b8e..93a5dcd60 100644
--- a/app/components/Auth.js
+++ b/app/components/Auth.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { Provider } from 'mobx-react';
 import stores from 'stores';
 import ApiKeysStore from 'stores/ApiKeysStore';
-import MemberSettingsStore from 'stores/MemberSettingsStore';
+import UsersStore from 'stores/UsersStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import CollectionsStore from 'stores/CollectionsStore';
 import CacheStore from 'stores/CacheStore';
@@ -24,7 +24,7 @@ const Auth = ({ children }: Props) => {
       const cache = new CacheStore(user.id);
       authenticatedStores = {
         apiKeys: new ApiKeysStore(),
-        memberSettings: new MemberSettingsStore(),
+        users: new UsersStore(),
         documents: new DocumentsStore({
           ui: stores.ui,
           cache,
diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index 90995ffc0..8f9534eb2 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -53,8 +53,8 @@ class SettingsSidebar extends Component {
             </Section>
             <Section>
               <Header>Team</Header>
-              <SidebarLink to="/settings/members" icon={<UserIcon />}>
-                Members
+              <SidebarLink to="/settings/users" icon={<UserIcon />}>
+                Users
               </SidebarLink>
               <SidebarLink
                 to="/settings/integrations/slack"
diff --git a/app/index.js b/app/index.js
index 5e02d74c8..7b89d8bf7 100644
--- a/app/index.js
+++ b/app/index.js
@@ -21,7 +21,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 Users from 'scenes/Settings/Users';
 import Slack from 'scenes/Settings/Slack';
 import Tokens from 'scenes/Settings/Tokens';
 import SlackAuth from 'scenes/SlackAuth';
@@ -68,7 +68,7 @@ render(
                     <Route exact path="/starred" component={Starred} />
                     <Route exact path="/drafts" component={Drafts} />
                     <Route exact path="/settings" component={Settings} />
-                    <Route exact path="/settings/members" component={Members} />
+                    <Route exact path="/settings/users" component={Users} />
                     <Route exact path="/settings/tokens" component={Tokens} />
                     <Route
                       exact
diff --git a/app/scenes/Settings/Members.js b/app/scenes/Settings/Users.js
similarity index 52%
rename from app/scenes/Settings/Members.js
rename to app/scenes/Settings/Users.js
index 58e20084b..4e6613baf 100644
--- a/app/scenes/Settings/Members.js
+++ b/app/scenes/Settings/Users.js
@@ -1,7 +1,6 @@
 // @flow
 import React, { Component } from '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';
@@ -10,61 +9,55 @@ import { color } from 'shared/styles/constants';
 
 import AuthStore from 'stores/AuthStore';
 import ErrorsStore from 'stores/ErrorsStore';
-import MemberSettingsStore from 'stores/MemberSettingsStore';
+import UsersStore from 'stores/UsersStore';
 import CenteredContent from 'components/CenteredContent';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import PageTitle from 'components/PageTitle';
-import MemberMenu from './components/MemberMenu';
+import UserMenu from './components/UserMenu';
 
 @observer
-class Members extends Component {
+class Users extends Component {
   props: {
     auth: AuthStore,
     errors: ErrorsStore,
-    memberSettings: MemberSettingsStore,
+    users: UsersStore,
   };
 
-  @observable members;
-  @observable isLoaded: boolean = false;
-
-  @observable inviteEmails: string = '';
-  @observable isInviting: boolean = false;
-
   componentDidMount() {
-    this.props.memberSettings.fetchUsers();
+    this.props.users.fetchPage({ limit: 100 });
   }
 
   render() {
-    const user = this.props.auth.user;
-    invariant(user, 'User should exist');
+    const currentUser = this.props.auth.user;
+    invariant(currentUser, 'User should exist');
 
     return (
       <CenteredContent>
-        <PageTitle title="Members" />
-        <h1>Members</h1>
+        <PageTitle title="Users" />
+        <h1>Users</h1>
 
-        {!this.props.memberSettings.isLoaded ? (
+        {!this.props.users.isLoaded ? (
           <Flex column>
-            {this.props.memberSettings.users && (
-              <MemberList column>
-                {this.props.memberSettings.users.map(member => (
-                  <Member key={member.id} justify="space-between" auto>
-                    <MemberDetails suspended={member.isSuspended}>
-                      <Avatar src={member.avatarUrl} />
+            {this.props.users.data && (
+              <UserList column>
+                {this.props.users.data.map(user => (
+                  <User key={user.id} justify="space-between" auto>
+                    <UserDetails suspended={user.isSuspended}>
+                      <Avatar src={user.avatarUrl} />
                       <UserName>
-                        {member.name} {member.email && `(${member.email})`}
-                        {member.isAdmin && (
-                          <Badge admin={member.isAdmin}>Admin</Badge>
+                        {user.name} {user.email && `(${user.email})`}
+                        {user.isAdmin && (
+                          <Badge admin={user.isAdmin}>Admin</Badge>
                         )}
-                        {member.isSuspended && <Badge>Suspended</Badge>}
+                        {user.isSuspended && <Badge>Suspended</Badge>}
                       </UserName>
-                    </MemberDetails>
+                    </UserDetails>
                     <Flex>
-                      {user.id !== member.id && <MemberMenu user={member} />}
+                      {currentUser.id !== user.id && <UserMenu user={user} />}
                     </Flex>
-                  </Member>
+                  </User>
                 ))}
-              </MemberList>
+              </UserList>
             )}
           </Flex>
         ) : (
@@ -75,7 +68,7 @@ class Members extends Component {
   }
 }
 
-const MemberList = styled(Flex)`
+const UserList = styled(Flex)`
   border: 1px solid ${color.smoke};
   border-radius: 4px;
 
@@ -83,7 +76,7 @@ const MemberList = styled(Flex)`
   margin-bottom: 40px;
 `;
 
-const Member = styled(Flex)`
+const User = styled(Flex)`
   padding: 10px;
   border-bottom: 1px solid ${color.smoke};
   font-size: 15px;
@@ -93,7 +86,7 @@ const Member = styled(Flex)`
   }
 `;
 
-const MemberDetails = styled(Flex)`
+const UserDetails = styled(Flex)`
   opacity: ${({ suspended }) => (suspended ? 0.5 : 1)};
 `;
 
@@ -112,4 +105,4 @@ const Badge = styled.span`
   font-weight: normal;
 `;
 
-export default inject('auth', 'errors', 'memberSettings')(Members);
+export default inject('auth', 'errors', 'users')(Users);
diff --git a/app/scenes/Settings/components/MemberMenu.js b/app/scenes/Settings/components/UserMenu.js
similarity index 78%
rename from app/scenes/Settings/components/MemberMenu.js
rename to app/scenes/Settings/components/UserMenu.js
index d5664e6e8..70402b2c8 100644
--- a/app/scenes/Settings/components/MemberMenu.js
+++ b/app/scenes/Settings/components/UserMenu.js
@@ -2,23 +2,23 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 
-import MemberSettingsStore from 'stores/MemberSettingsStore';
+import UsersStore from 'stores/UsersStore';
 import MoreIcon from 'components/Icon/MoreIcon';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import type { User } from 'types';
 
 type Props = {
   user: User,
-  memberSettings: MemberSettingsStore,
+  users: UsersStore,
 };
 
 @observer
-class MemberMenu extends Component {
+class UserMenu extends Component {
   props: Props;
 
   handlePromote = (ev: SyntheticEvent) => {
     ev.preventDefault();
-    const { user, memberSettings } = this.props;
+    const { user, users } = this.props;
     if (
       !window.confirm(
         `Are you want to make ${
@@ -28,21 +28,21 @@ class MemberMenu extends Component {
     ) {
       return;
     }
-    memberSettings.promote(user);
+    users.promote(user);
   };
 
   handleDemote = (ev: SyntheticEvent) => {
     ev.preventDefault();
-    const { user, memberSettings } = this.props;
+    const { user, users } = this.props;
     if (!window.confirm(`Are you want to make ${user.name} a member?`)) {
       return;
     }
-    memberSettings.demote(user);
+    users.demote(user);
   };
 
   handleSuspend = (ev: SyntheticEvent) => {
     ev.preventDefault();
-    const { user, memberSettings } = this.props;
+    const { user, users } = this.props;
     if (
       !window.confirm(
         "Are you want to suspend this account? Suspended users won't be able to access Outline."
@@ -50,13 +50,13 @@ class MemberMenu extends Component {
     ) {
       return;
     }
-    memberSettings.suspend(user);
+    users.suspend(user);
   };
 
   handleActivate = (ev: SyntheticEvent) => {
     ev.preventDefault();
-    const { user, memberSettings } = this.props;
-    memberSettings.activate(user);
+    const { user, users } = this.props;
+    users.activate(user);
   };
 
   render() {
@@ -90,4 +90,4 @@ class MemberMenu extends Component {
   }
 }
 
-export default inject('memberSettings')(MemberMenu);
+export default inject('users')(UserMenu);
diff --git a/app/stores/MemberSettingsStore.js b/app/stores/UsersStore.js
similarity index 74%
rename from app/stores/MemberSettingsStore.js
rename to app/stores/UsersStore.js
index 9a22fe9c2..d9df0b832 100644
--- a/app/stores/MemberSettingsStore.js
+++ b/app/stores/UsersStore.js
@@ -2,22 +2,22 @@
 import { observable, action, runInAction } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import type { User } from 'types';
+import type { User, PaginationParams } from 'types';
 
-class MemberSettingsStore {
-  @observable users: User[] = [];
+class UsersStore {
+  @observable data: User[] = [];
   @observable isLoaded: boolean = false;
   @observable isSaving: boolean = false;
 
   @action
-  fetchUsers = async () => {
+  fetchPage = async (options: ?PaginationParams): Promise<*> => {
     try {
-      const res = await client.post('/team.users');
+      const res = await client.post('/team.users', options);
       invariant(res && res.data, 'Data should be available');
       const { data } = res;
 
       runInAction('fetchUsers', () => {
-        this.users = data.reverse();
+        this.data = data.reverse();
       });
     } catch (e) {
       console.error('Something went wrong');
@@ -53,10 +53,8 @@ class MemberSettingsStore {
       invariant(res && res.data, 'Data should be available');
       const { data } = res;
 
-      runInAction(`MemberSettingsStore#${action}`, () => {
-        this.users = this.users.map(
-          user => (user.id === data.id ? data : user)
-        );
+      runInAction(`UsersStore#${action}`, () => {
+        this.data = this.data.map(user => (user.id === data.id ? data : user));
       });
     } catch (e) {
       console.error('Something went wrong');
@@ -64,4 +62,4 @@ class MemberSettingsStore {
   };
 }
 
-export default MemberSettingsStore;
+export default UsersStore;