Make it possible to navigate between collection items and journal entries.

master
Tom Hacohen 7 years ago
parent 6c96d7994f
commit 2a6220e6d4

@ -1,5 +1,7 @@
import * as React from 'react';
import { Route, Redirect } from 'react-router';
import { Link } from 'react-router-dom';
import { Tabs, Tab } from 'material-ui/Tabs';
import { EteSyncContextType } from './EteSyncContext';
import * as EteSync from './api/EteSync';
@ -66,30 +68,48 @@ export class JournalView extends React.Component {
return syncEntry;
});
let itemsTitle: string;
let itemsView: JSX.Element;
if (collectionInfo.type === 'CALENDAR') {
itemsView = <JournalViewCalendar journal={journal} entries={syncEntries} />;
itemsTitle = 'Events';
} else if (collectionInfo.type === 'ADDRESS_BOOK') {
itemsView = <JournalViewAddressBook journal={journal} entries={syncEntries} />;
itemsTitle = 'Contacts';
} else {
itemsView = <div>Unsupported type</div>;
itemsTitle = 'Items';
}
return (
<div>
<Tabs>
<Tab
label={itemsTitle}
containerElement={<Link to={routeResolver.getRoute('journals._id.items', {journalUid: journal.uid})} />}
/>
<Tab
label="Journal Entries"
containerElement={<Link to={routeResolver.getRoute('journals._id.entries', {journalUid: journal.uid})} />}
/>
</Tabs>
<Route
path={routeResolver.getRoute('journals._id')}
exact={true}
render={() => <Redirect to={routeResolver.getRoute('journals._id.entries', {journalUid: journal.uid})} />}
render={() => <Redirect to={routeResolver.getRoute('journals._id.items', {journalUid: journal.uid})} />}
/>
<h2>Welcome to Journal!</h2>
<h2>{collectionInfo.displayName}</h2>
<Route
path={routeResolver.getRoute('journals._id.entries')}
render={() =>
<JournalViewEntries journal={journal} entries={syncEntries} />
render={() => {
return <JournalViewEntries journal={journal} entries={syncEntries} />;
}
}
/>
<Route
path={routeResolver.getRoute('journals._id.items')}
render={() => {
if (collectionInfo.type === 'CALENDAR') {
return <JournalViewCalendar journal={journal} entries={syncEntries} />;
} else if (collectionInfo.type === 'ADDRESS_BOOK') {
return <JournalViewAddressBook journal={journal} entries={syncEntries} />;
} else {
return <div>Unsupported type</div>;
}
return itemsView;
}
}
/>

Loading…
Cancel
Save