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 ( + + + + ); +} diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index 1d0767a6a..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,6 +57,9 @@ class Sidebar extends Component {
Team
+ }> + Members + } 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( + + +

Members

+ + {!this.props.settings.isFetching ? ( + + {this.props.settings.members && ( + + {this.props.settings.members.map(member => ( + + + + + {member.name} {member.email && `(${member.email})`} + {member.isAdmin && Admin} + + + + ))} + + )} + + ) : ( + + )} + + ); + } +} + +const MemberList = styled(Flex)` + border: 1px solid ${color.smoke}; + border-radius: 4px; + + margin-top: 20px; + margin-bottom: 40px; +`; + +const Member = styled(Flex)` + padding: 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; +`; + +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;