Journal: add a page for viewing members.

src/App.tsx

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

src/Journals/Journal.tsx

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

src/Journals/JournalMembers.tsx

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

src/Journals/index.tsx

@@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router';
 
 import Journal from './Journal';
 import JournalEdit from './JournalEdit';
+import JournalMembers from './JournalMembers';
 import JournalsList from './JournalsList';
 
 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
                   path={routeResolver.getRoute('journals._id')}
                   render={() => (

src/api/EteSync.ts

@@ -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 {
   constructor(credentials: Credentials, apiBase: string) {
     super(credentials, apiBase, ['user', '']);