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 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,

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

@@ -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"

4
app/index.js
View File

@@ -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

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

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

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

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

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