Split away the journal list item view from the jorunal view.

master
Tom Hacohen 7 years ago
parent e92a9c9961
commit 8c20687a72

@ -1,13 +1,13 @@
import * as React from 'react'; import * as React from 'react';
import { Route, Redirect } from 'react-router'; import { Route, Redirect } from 'react-router';
import * as ICAL from 'ical.js';
import { EteSyncContextType } from './EteSyncContext'; import { EteSyncContextType } from './EteSyncContext';
import * as EteSync from './api/EteSync'; import * as EteSync from './api/EteSync';
import { routeResolver } from './App'; import { routeResolver } from './App';
import { JournalViewEntries } from './JournalViewEntries';
export class JournalView extends React.Component { export class JournalView extends React.Component {
static defaultProps = { static defaultProps = {
prevUid: null, prevUid: null,
@ -54,24 +54,13 @@ export class JournalView extends React.Component {
const derived = this.props.etesync.encryptionKey; const derived = this.props.etesync.encryptionKey;
const journal = this.state.journal; const journal = this.state.journal;
let prevUid = this.props.prevUid || null; let prevUid = this.props.prevUid || null;
const journals = this.state.entries.map((entry) => { const syncEntries = this.state.entries.map((entry) => {
let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version); let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
let syncEntry = entry.getSyncEntry(cryptoManager, prevUid); let syncEntry = entry.getSyncEntry(cryptoManager, prevUid);
prevUid = entry.uid; prevUid = entry.uid;
const comp = new ICAL.Component(ICAL.parse(syncEntry.content));
if (comp.name === 'vcalendar') { return syncEntry;
const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent')); });
return (<li key={entry.uid}>{syncEntry.action}: {vevent.summary} ({vevent.uid})</li>);
} else if (comp.name === 'vcard') {
const vcard = comp;
const name = vcard.getFirstPropertyValue('fn');
const uid = vcard.getFirstPropertyValue('uid');
return (<li key={entry.uid}>{syncEntry.action}: {name} ({uid})</li>);
} else {
return (<li key={entry.uid}>{syncEntry.action}: {syncEntry.content}</li>);
}
}).reverse();
return ( return (
<div> <div>
@ -84,9 +73,7 @@ export class JournalView extends React.Component {
<Route <Route
path={routeResolver.getRoute('journals._id.entries')} path={routeResolver.getRoute('journals._id.entries')}
render={() => render={() =>
<ul> <JournalViewEntries journal={journal} entries={syncEntries} />
{journals}
</ul>
} }
/> />
</div> </div>

@ -0,0 +1,46 @@
import * as React from 'react';
import * as ICAL from 'ical.js';
import * as EteSync from './api/EteSync';
export class JournalViewEntries extends React.Component {
static defaultProps = {
prevUid: null,
};
props: {
journal: EteSync.Journal,
entries: Array<EteSync.SyncEntry>,
};
render() {
if (this.props.journal === undefined) {
return (<div>Loading</div>);
}
const entries = this.props.entries.map((syncEntry, idx) => {
const comp = new ICAL.Component(ICAL.parse(syncEntry.content));
if (comp.name === 'vcalendar') {
const vevent = new ICAL.Event(comp.getFirstSubcomponent('vevent'));
return (<li key={idx}>{syncEntry.action}: {vevent.summary} ({vevent.uid})</li>);
} else if (comp.name === 'vcard') {
const vcard = comp;
const name = vcard.getFirstPropertyValue('fn');
const uid = vcard.getFirstPropertyValue('uid');
return (<li key={idx}>{syncEntry.action}: {name} ({uid})</li>);
} else {
return (<li key={idx}>{syncEntry.action}: {syncEntry.content}</li>);
}
}).reverse();
return (
<div>
<ul>
{entries}
</ul>
</div>
);
}
}
Loading…
Cancel
Save