yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Members -> Users

Browse Source
This commit is contained in:
Jori Lallo
2018-03-04 22:34:06 -08:00
parent 7ef3110a6d
commit 71270bcb93
6 changed files with 55 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Auth.js
View File

@@ -3,7 +3,7 @@ import React from 'react';
import { Provider } from 'mobx-react'; import { Provider } from 'mobx-react';
import stores from 'stores'; import stores from 'stores';
import ApiKeysStore from 'stores/ApiKeysStore'; import ApiKeysStore from 'stores/ApiKeysStore';
import MemberSettingsStore from 'stores/MemberSettingsStore'; import UsersStore from 'stores/UsersStore';
import DocumentsStore from 'stores/DocumentsStore'; import DocumentsStore from 'stores/DocumentsStore';
import CollectionsStore from 'stores/CollectionsStore'; import CollectionsStore from 'stores/CollectionsStore';
import CacheStore from 'stores/CacheStore'; import CacheStore from 'stores/CacheStore';
@@ -24,7 +24,7 @@ const Auth = ({ children }: Props) => {
const cache = new CacheStore(user.id); const cache = new CacheStore(user.id);
authenticatedStores = { authenticatedStores = {
apiKeys: new ApiKeysStore(), apiKeys: new ApiKeysStore(),
memberSettings: new MemberSettingsStore(), users: new UsersStore(),
documents: new DocumentsStore({ documents: new DocumentsStore({
ui: stores.ui, ui: stores.ui,
cache, cache,

4
app/components/Sidebar/Settings.js
View File

@@ -53,8 +53,8 @@ class SettingsSidebar extends Component {
</Section> </Section>
<Section> <Section>
<Header>Team</Header> <Header>Team</Header>
<SidebarLink to="/settings/members" icon={<UserIcon />}> <SidebarLink to="/settings/users" icon={<UserIcon />}>
Members Users
</SidebarLink> </SidebarLink>
<SidebarLink <SidebarLink
to="/settings/integrations/slack" to="/settings/integrations/slack"

4
app/index.js
View File

@@ -21,7 +21,7 @@ import Collection from 'scenes/Collection';
import Document from 'scenes/Document'; import Document from 'scenes/Document';
import Search from 'scenes/Search'; import Search from 'scenes/Search';
import Settings from 'scenes/Settings'; import Settings from 'scenes/Settings';
import Members from 'scenes/Settings/Members'; import Users from 'scenes/Settings/Users';
import Slack from 'scenes/Settings/Slack'; import Slack from 'scenes/Settings/Slack';
import Tokens from 'scenes/Settings/Tokens'; import Tokens from 'scenes/Settings/Tokens';
import SlackAuth from 'scenes/SlackAuth'; import SlackAuth from 'scenes/SlackAuth';
@@ -68,7 +68,7 @@ render(
<Route exact path="/starred" component={Starred} /> <Route exact path="/starred" component={Starred} />
<Route exact path="/drafts" component={Drafts} /> <Route exact path="/drafts" component={Drafts} />
<Route exact path="/settings" component={Settings} /> <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 path="/settings/tokens" component={Tokens} />
<Route <Route
exact exact

63
app/scenes/Settings/Members.js → app/scenes/Settings/Users.js
View File

@@ -1,7 +1,6 @@
// @flow // @flow
import React, { Component } from 'react'; import React, { Component } from 'react';
import invariant from 'invariant'; import invariant from 'invariant';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import styled from 'styled-components'; import styled from 'styled-components';
import Flex from 'shared/components/Flex'; import Flex from 'shared/components/Flex';
@@ -10,61 +9,55 @@ import { color } from 'shared/styles/constants';
import AuthStore from 'stores/AuthStore'; import AuthStore from 'stores/AuthStore';
import ErrorsStore from 'stores/ErrorsStore'; import ErrorsStore from 'stores/ErrorsStore';
import MemberSettingsStore from 'stores/MemberSettingsStore'; import UsersStore from 'stores/UsersStore';
import CenteredContent from 'components/CenteredContent'; import CenteredContent from 'components/CenteredContent';
import LoadingPlaceholder from 'components/LoadingPlaceholder'; import LoadingPlaceholder from 'components/LoadingPlaceholder';
import PageTitle from 'components/PageTitle'; import PageTitle from 'components/PageTitle';
import MemberMenu from './components/MemberMenu'; import UserMenu from './components/UserMenu';
@observer @observer
class Members extends Component { class Users extends Component {
props: { props: {
auth: AuthStore, auth: AuthStore,
errors: ErrorsStore, errors: ErrorsStore,
memberSettings: MemberSettingsStore, users: UsersStore,
}; };
@observable members;
@observable isLoaded: boolean = false;
@observable inviteEmails: string = '';
@observable isInviting: boolean = false;
componentDidMount() { componentDidMount() {
this.props.memberSettings.fetchUsers(); this.props.users.fetchPage({ limit: 100 });
} }
render() { render() {
const user = this.props.auth.user; const currentUser = this.props.auth.user;
invariant(user, 'User should exist'); invariant(currentUser, 'User should exist');
return ( return (
<CenteredContent> <CenteredContent>
<PageTitle title="Members" /> <PageTitle title="Users" />
<h1>Members</h1> <h1>Users</h1>
{!this.props.memberSettings.isLoaded ? ( {!this.props.users.isLoaded ? (
<Flex column> <Flex column>
{this.props.memberSettings.users && ( {this.props.users.data && (
<MemberList column> <UserList column>
{this.props.memberSettings.users.map(member => ( {this.props.users.data.map(user => (
<Member key={member.id} justify="space-between" auto> <User key={user.id} justify="space-between" auto>
<MemberDetails suspended={member.isSuspended}> <UserDetails suspended={user.isSuspended}>
<Avatar src={member.avatarUrl} /> <Avatar src={user.avatarUrl} />
<UserName> <UserName>
{member.name} {member.email && `(${member.email})`} {user.name} {user.email && `(${user.email})`}
{member.isAdmin && ( {user.isAdmin && (
<Badge admin={member.isAdmin}>Admin</Badge> <Badge admin={user.isAdmin}>Admin</Badge>
)} )}
{member.isSuspended && <Badge>Suspended</Badge>} {user.isSuspended && <Badge>Suspended</Badge>}
</UserName> </UserName>
</MemberDetails> </UserDetails>
<Flex> <Flex>
{user.id !== member.id && <MemberMenu user={member} />} {currentUser.id !== user.id && <UserMenu user={user} />}
</Flex> </Flex>
</Member> </User>
))} ))}
</MemberList> </UserList>
)} )}
</Flex> </Flex>
) : ( ) : (
@@ -75,7 +68,7 @@ class Members extends Component {
} }
} }
const MemberList = styled(Flex)` const UserList = styled(Flex)`
border: 1px solid ${color.smoke}; border: 1px solid ${color.smoke};
border-radius: 4px; border-radius: 4px;
@@ -83,7 +76,7 @@ const MemberList = styled(Flex)`
margin-bottom: 40px; margin-bottom: 40px;
`; `;
const Member = styled(Flex)` const User = styled(Flex)`
padding: 10px; padding: 10px;
border-bottom: 1px solid ${color.smoke}; border-bottom: 1px solid ${color.smoke};
font-size: 15px; 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)}; opacity: ${({ suspended }) => (suspended ? 0.5 : 1)};
`; `;
@@ -112,4 +105,4 @@ const Badge = styled.span`
font-weight: normal; font-weight: normal;
`; `;
export default inject('auth', 'errors', 'memberSettings')(Members); export default inject('auth', 'errors', 'users')(Users);

24
app/scenes/Settings/components/MemberMenu.js → app/scenes/Settings/components/UserMenu.js
View File

@@ -2,23 +2,23 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import MemberSettingsStore from 'stores/MemberSettingsStore'; import UsersStore from 'stores/UsersStore';
import MoreIcon from 'components/Icon/MoreIcon'; import MoreIcon from 'components/Icon/MoreIcon';
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
import type { User } from 'types'; import type { User } from 'types';
type Props = { type Props = {
user: User, user: User,
memberSettings: MemberSettingsStore, users: UsersStore,
}; };
@observer @observer
class MemberMenu extends Component { class UserMenu extends Component {
props: Props; props: Props;
handlePromote = (ev: SyntheticEvent) => { handlePromote = (ev: SyntheticEvent) => {
ev.preventDefault(); ev.preventDefault();
const { user, memberSettings } = this.props; const { user, users } = this.props;
if ( if (
!window.confirm( !window.confirm(
`Are you want to make ${ `Are you want to make ${
@@ -28,21 +28,21 @@ class MemberMenu extends Component {
) { ) {
return; return;
} }
memberSettings.promote(user); users.promote(user);
}; };
handleDemote = (ev: SyntheticEvent) => { handleDemote = (ev: SyntheticEvent) => {
ev.preventDefault(); ev.preventDefault();
const { user, memberSettings } = this.props; const { user, users } = this.props;
if (!window.confirm(`Are you want to make ${user.name} a member?`)) { if (!window.confirm(`Are you want to make ${user.name} a member?`)) {
return; return;
} }
memberSettings.demote(user); users.demote(user);
}; };
handleSuspend = (ev: SyntheticEvent) => { handleSuspend = (ev: SyntheticEvent) => {
ev.preventDefault(); ev.preventDefault();
const { user, memberSettings } = this.props; const { user, users } = this.props;
if ( if (
!window.confirm( !window.confirm(
"Are you want to suspend this account? Suspended users won't be able to access Outline." "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; return;
} }
memberSettings.suspend(user); users.suspend(user);
}; };
handleActivate = (ev: SyntheticEvent) => { handleActivate = (ev: SyntheticEvent) => {
ev.preventDefault(); ev.preventDefault();
const { user, memberSettings } = this.props; const { user, users } = this.props;
memberSettings.activate(user); users.activate(user);
}; };
render() { render() {
@@ -90,4 +90,4 @@ class MemberMenu extends Component {
} }
} }
export default inject('memberSettings')(MemberMenu); export default inject('users')(UserMenu);

20
app/stores/MemberSettingsStore.js → app/stores/UsersStore.js
View File

@@ -2,22 +2,22 @@
import { observable, action, runInAction } from 'mobx'; import { observable, action, runInAction } from 'mobx';
import invariant from 'invariant'; import invariant from 'invariant';
import { client } from 'utils/ApiClient'; import { client } from 'utils/ApiClient';
import type { User } from 'types'; import type { User, PaginationParams } from 'types';
class MemberSettingsStore { class UsersStore {
@observable users: User[] = []; @observable data: User[] = [];
@observable isLoaded: boolean = false; @observable isLoaded: boolean = false;
@observable isSaving: boolean = false; @observable isSaving: boolean = false;
@action @action
fetchUsers = async () => { fetchPage = async (options: ?PaginationParams): Promise<*> => {
try { try {
const res = await client.post('/team.users'); const res = await client.post('/team.users', options);
invariant(res && res.data, 'Data should be available'); invariant(res && res.data, 'Data should be available');
const { data } = res; const { data } = res;
runInAction('fetchUsers', () => { runInAction('fetchUsers', () => {
this.users = data.reverse(); this.data = data.reverse();
}); });
} catch (e) { } catch (e) {
console.error('Something went wrong'); console.error('Something went wrong');
@@ -53,10 +53,8 @@ class MemberSettingsStore {
invariant(res && res.data, 'Data should be available'); invariant(res && res.data, 'Data should be available');
const { data } = res; const { data } = res;
runInAction(`MemberSettingsStore#${action}`, () => { runInAction(`UsersStore#${action}`, () => {
this.users = this.users.map( this.data = this.data.map(user => (user.id === data.id ? data : user));
user => (user.id === data.id ? data : user)
);
}); });
} catch (e) { } catch (e) {
console.error('Something went wrong'); console.error('Something went wrong');
@@ -64,4 +62,4 @@ class MemberSettingsStore {
}; };
} }
export default MemberSettingsStore; export default UsersStore;