Move the journals to their own page.

master
Tom Hacohen 6 years ago
parent ebb2649078
commit 20b409ffe8

@ -1,21 +1,25 @@
import * as React from 'react'; import * as React from 'react';
import { History } from 'history';
import { ListItem } from '../widgets/List'; import { List, ListItem } from './widgets/List';
import * as EteSync from '../api/EteSync'; import * as EteSync from './api/EteSync';
import { JournalsData, UserInfoData, CredentialsData } from '../store'; import { routeResolver } from './App';
class SideMenuJournals extends React.PureComponent { import { JournalsData, UserInfoData, CredentialsData } from './store';
class Journals extends React.PureComponent {
props: { props: {
etesync: CredentialsData; etesync: CredentialsData;
journals: JournalsData; journals: JournalsData;
userInfo: UserInfoData; userInfo: UserInfoData;
onItemClick: (journalUid: string) => void; history: History;
}; };
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.journalClicked = this.journalClicked.bind(this);
} }
render() { render() {
@ -38,7 +42,7 @@ class SideMenuJournals extends React.PureComponent {
let info = journal.getInfo(cryptoManager); let info = journal.getInfo(cryptoManager);
ret[info.type] = ret[info.type] || []; ret[info.type] = ret[info.type] || [];
ret[info.type].push( ret[info.type].push(
<ListItem key={journal.uid} onClick={() => this.props.onItemClick(journal.uid)}> <ListItem key={journal.uid} onClick={() => this.journalClicked(journal.uid)}>
{info.displayName} ({journal.uid.slice(0, 5)}) {info.displayName} ({journal.uid.slice(0, 5)})
</ListItem> </ListItem>
); );
@ -51,7 +55,7 @@ class SideMenuJournals extends React.PureComponent {
}); });
return ( return (
<React.Fragment> <List>
<ListItem <ListItem
primaryText="Address Books" primaryText="Address Books"
nestedItems={journalMap.ADDRESS_BOOK} nestedItems={journalMap.ADDRESS_BOOK}
@ -66,9 +70,13 @@ class SideMenuJournals extends React.PureComponent {
primaryText="Tasks" primaryText="Tasks"
nestedItems={journalMap.TASKS} nestedItems={journalMap.TASKS}
/> />
</React.Fragment> </List>
); );
} }
private journalClicked(journalUid: string) {
this.props.history.push(routeResolver.getRoute('journals._id', { journalUid: journalUid }));
}
} }
export default SideMenuJournals; export default Journals;

@ -5,15 +5,13 @@ import { List, ListItem, ListSubheader, ListDivider } from '../widgets/List';
import { Theme, withTheme } from '@material-ui/core/styles'; import { Theme, withTheme } from '@material-ui/core/styles';
import ActionCode from '@material-ui/icons/Code'; import ActionCode from '@material-ui/icons/Code';
import ActionHome from '@material-ui/icons/Home'; import ActionHome from '@material-ui/icons/Home';
import ActionJournals from '@material-ui/icons/LibraryBooks';
import ActionBugReport from '@material-ui/icons/BugReport'; import ActionBugReport from '@material-ui/icons/BugReport';
import ActionQuestionAnswer from '@material-ui/icons/QuestionAnswer'; import ActionQuestionAnswer from '@material-ui/icons/QuestionAnswer';
import LogoutIcon from '@material-ui/icons/PowerSettingsNew'; import LogoutIcon from '@material-ui/icons/PowerSettingsNew';
const logo = require('../images/logo.svg'); const logo = require('../images/logo.svg');
import SideMenuJournals from './SideMenuJournals';
import ErrorBoundary from '../components/ErrorBoundary';
import { routeResolver } from '../App'; import { routeResolver } from '../App';
import { store, JournalsType, UserInfoData, StoreState, CredentialsData } from '../store'; import { store, JournalsType, UserInfoData, StoreState, CredentialsData } from '../store';
@ -36,7 +34,6 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
constructor(props: PropsTypeInner) { constructor(props: PropsTypeInner) {
super(props); super(props);
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
this.journalClicked = this.journalClicked.bind(this);
} }
logout() { logout() {
@ -44,11 +41,6 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
this.props.onCloseDrawerRequest(); this.props.onCloseDrawerRequest();
} }
journalClicked(journalUid: string) {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute('journals._id', { journalUid: journalUid }));
}
render() { render() {
const { theme } = this.props; const { theme } = this.props;
const username = (this.props.etesync && this.props.etesync.credentials.email) ? const username = (this.props.etesync && this.props.etesync.credentials.email) ?
@ -57,27 +49,17 @@ class SideMenu extends React.PureComponent<PropsTypeInner> {
let loggedInItems; let loggedInItems;
if (this.props.etesync) { if (this.props.etesync) {
const journals = (this.props.etesync.encryptionKey && this.props.journals && this.props.journals.value
&& this.props.userInfo) && (
<React.Fragment>
<ListDivider />
<ListSubheader>Journals</ListSubheader>
<ErrorBoundary>
<SideMenuJournals
etesync={this.props.etesync}
journals={this.props.journals.value}
userInfo={this.props.userInfo}
onItemClick={this.journalClicked}
/>
</ErrorBoundary>
</React.Fragment>
);
loggedInItems = ( loggedInItems = (
<React.Fragment> <React.Fragment>
<ListItem
primaryText="Journals"
leftIcon={<ActionJournals />}
onClick={() => {
this.props.onCloseDrawerRequest();
this.props.history.push(routeResolver.getRoute('journals'));
}}
/>
<ListItem primaryText="Log Out" leftIcon={<LogoutIcon/>} onClick={this.logout} /> <ListItem primaryText="Log Out" leftIcon={<LogoutIcon/>} onClick={this.logout} />
{journals}
</React.Fragment> </React.Fragment>
); );
} }

@ -11,6 +11,7 @@ import { routeResolver } from './App';
import LoadingIndicator from './widgets/LoadingIndicator'; import LoadingIndicator from './widgets/LoadingIndicator';
import PrettyError from './widgets/PrettyError'; import PrettyError from './widgets/PrettyError';
import Journals from './Journals';
import Journal from './Journal'; import Journal from './Journal';
import Pim from './Pim'; import Pim from './Pim';
@ -201,6 +202,18 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
/> />
)} )}
/> />
<Route
path={routeResolver.getRoute('journals')}
exact={true}
render={({ history }) => (
<Journals
userInfo={this.props.userInfo.value!}
etesync={this.props.etesync}
journals={journals}
history={history}
/>
)}
/>
<Route <Route
path={routeResolver.getRoute('journals._id')} path={routeResolver.getRoute('journals._id')}
render={({match}) => ( render={({match}) => (

Loading…
Cancel
Save