Journal: add a page for viewing members.

master
Tom Hacohen 6 years ago
parent 8b438a81f6
commit b24070883a

@ -74,6 +74,8 @@ export const routeResolver = new RouteResolver({
_base: ':entryUid', _base: ':entryUid',
}, },
}, },
members: {
},
}, },
new: 'new', new: 'new',
}, },

@ -4,6 +4,7 @@ import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs'; import Tabs from '@material-ui/core/Tabs';
import { Theme, withTheme } from '@material-ui/core/styles'; import { Theme, withTheme } from '@material-ui/core/styles';
import IconEdit from '@material-ui/icons/Edit'; import IconEdit from '@material-ui/icons/Edit';
import IconMembers from '@material-ui/icons/People';
import SearchableAddressBook from '../components/SearchableAddressBook'; import SearchableAddressBook from '../components/SearchableAddressBook';
import Contact from '../components/Contact'; import Contact from '../components/Contact';
@ -87,6 +88,7 @@ class Journal extends React.PureComponent<PropsTypeInner> {
<React.Fragment> <React.Fragment>
<AppBarOverride title={collectionInfo.displayName}> <AppBarOverride title={collectionInfo.displayName}>
{ isOwner && { isOwner &&
<>
<IconButton <IconButton
component={Link} component={Link}
title="Edit" title="Edit"
@ -94,6 +96,14 @@ class Journal extends React.PureComponent<PropsTypeInner> {
> >
<IconEdit /> <IconEdit />
</IconButton> </IconButton>
<IconButton
component={Link}
title="Members"
{...{to: routeResolver.getRoute('journals._id.members', { journalUid: journal.uid })}}
>
<IconMembers />
</IconButton>
</>
} }
</AppBarOverride> </AppBarOverride>
<Tabs <Tabs

@ -0,0 +1,74 @@
import * as React from 'react';
import { List, ListItem } from '../widgets/List';
import { Theme, withTheme } from '@material-ui/core/styles';
import AppBarOverride from '../widgets/AppBarOverride';
import Container from '../widgets/Container';
import LoadingIndicator from '../widgets/LoadingIndicator';
import * as EteSync from '../api/EteSync';
import { CredentialsData } from '../store';
interface PropsType {
etesync: CredentialsData;
info: EteSync.CollectionInfo;
}
interface PropsTypeInner extends PropsType {
theme: Theme;
}
class JournalMembers extends React.PureComponent<PropsTypeInner> {
state = {
members: null as EteSync.JournalMemberJson[] | null,
};
constructor(props: PropsTypeInner) {
super(props);
}
render() {
const { info } = this.props;
const { members } = this.state;
return (
<>
<AppBarOverride title={`${info.displayName} - Members`} />
<Container style={{maxWidth: 400}}>
{ members ?
<List>
{ members.map((member) => (
<ListItem key={member.user} onClick={undefined}>
{member.user}
</ListItem>
))}
</List>
:
<LoadingIndicator />
}
</Container>
</>
);
}
componentDidMount() {
this.fetchMembers();
}
private fetchMembers() {
const { etesync, info } = this.props;
const creds = etesync.credentials;
const apiBase = etesync.serviceApiUrl;
const journalMembersManager = new EteSync.JournalMembersManager(creds, apiBase, info.uid);
journalMembersManager.list().then((members) => {
this.setState({
members,
});
});
}
}
export default withTheme()(JournalMembers);

@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router';
import Journal from './Journal'; import Journal from './Journal';
import JournalEdit from './JournalEdit'; import JournalEdit from './JournalEdit';
import JournalMembers from './JournalMembers';
import JournalsList from './JournalsList'; import JournalsList from './JournalsList';
import { routeResolver } from '../App'; import { routeResolver } from '../App';
@ -86,6 +87,15 @@ class Journals extends React.PureComponent {
/> />
)} )}
/> />
<Route
path={routeResolver.getRoute('journals._id.members')}
render={() => (
<JournalMembers
etesync={this.props.etesync}
info={collectionInfo}
/>
)}
/>
<Route <Route
path={routeResolver.getRoute('journals._id')} path={routeResolver.getRoute('journals._id')}
render={() => ( render={() => (

@ -503,6 +503,29 @@ export class EntryManager extends BaseManager {
} }
} }
export interface JournalMemberJson {
user: string;
key: base64;
}
export class JournalMembersManager extends BaseManager {
constructor(credentials: Credentials, apiBase: string, journalId: string) {
super(credentials, apiBase, ['journals', journalId, 'members', '']);
}
list(): Promise<JournalMemberJson[]> {
return new Promise((resolve, reject) => {
this.newCall().then((json: Array<{}>) => {
resolve(json.map((val: JournalMemberJson) => {
return val;
}));
}).catch((error: Error) => {
reject(error);
});
});
}
}
export class UserInfoManager extends BaseManager { export class UserInfoManager extends BaseManager {
constructor(credentials: Credentials, apiBase: string) { constructor(credentials: Credentials, apiBase: string) {
super(credentials, apiBase, ['user', '']); super(credentials, apiBase, ['user', '']);

Loading…
Cancel
Save