Added a hacky journal view.

A lot of code duplication.
master
Tom Hacohen 7 years ago
parent 557e5ec0b4
commit 7dd8248aab

@ -4,6 +4,7 @@ import { Switch, Route } from 'react-router';
import './App.css'; import './App.css';
import { JournalList } from './JournalList'; import { JournalList } from './JournalList';
import { JournalView } from './JournalView';
import { RouteResolver, RouteKeysType } from './routes'; import { RouteResolver, RouteKeysType } from './routes';
interface RouteItem { interface RouteItem {
@ -25,8 +26,7 @@ const navigationRoutes: RouteItem[] = [
path: 'journals._id', path: 'journals._id',
exact: true, exact: true,
name: 'Journal', name: 'Journal',
keys: {journalUid: 1}, component: JournalView,
component: JournalList,
}, },
]; ];

@ -1,4 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Link } from 'react-router-dom';
import * as EteSync from './api/EteSync'; import * as EteSync from './api/EteSync';
@ -7,6 +8,17 @@ const USER = 'test@localhost';
const PASSWORD = 'SomePassword'; const PASSWORD = 'SomePassword';
const derived = EteSync.deriveKey(USER, PASSWORD); const derived = EteSync.deriveKey(USER, PASSWORD);
import { RouteResolver } from './routes';
const routeResolver = new RouteResolver({
home: '',
journals: {
_base: 'journals',
_id: {
_base: ':journalUid',
},
},
});
export class JournalList extends React.Component { export class JournalList extends React.Component {
state: { state: {
journals: Array<EteSync.Journal>, journals: Array<EteSync.Journal>,
@ -40,7 +52,16 @@ export class JournalList extends React.Component {
const journals = this.state.journals.map((journal, idx) => { const journals = this.state.journals.map((journal, idx) => {
let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version); let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
let info = journal.getInfo(cryptoManager); let info = journal.getInfo(cryptoManager);
return (<li key={journal.uid}>{info.displayName}: {info.type} ({journal.uid})</li>); return (
<li key={journal.uid}>
<Link
to={routeResolver.getRoute('journals._id', { journalUid: journal.uid })}
className="Drawer-navlink"
>
{info.displayName}: {info.type} ({journal.uid})
</Link>
</li>
);
}); });
return ( return (

@ -0,0 +1,66 @@
import * as React from 'react';
import * as EteSync from './api/EteSync';
const SERVICE_API = 'http://localhost:8000';
const USER = 'hacj';
const PASSWORD = 'hack';
const derived = EteSync.deriveKey(USER, PASSWORD);
export class JournalView extends React.Component {
static defaultProps = {
prevUid: null,
};
state: {
entries: Array<EteSync.Entry>,
};
props: {
match: any,
prevUid: string | null,
};
constructor(props: any) {
super(props);
this.state = {
entries: [],
};
}
componentDidMount() {
const journal = this.props.match.params.journalUid;
let authenticator = new EteSync.Authenticator(SERVICE_API);
authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
const credentials = new EteSync.Credentials(USER, authToken);
let entryManager = new EteSync.EntryManager(credentials, SERVICE_API, journal);
entryManager.list(this.props.prevUid).then((entries) => {
this.setState({ entries });
});
});
}
render() {
const journal = this.props.match.params.journalUid;
let prevUid = this.props.prevUid;
const journals = this.state.entries.map((entry) => {
// FIXME: actually get the correct version!
let cryptoManager = new EteSync.CryptoManager(derived, journal, 1);
let syncEntry = entry.getSyncEntry(cryptoManager, prevUid);
prevUid = entry.uid;
return (<li key={entry.uid}>{syncEntry.type}: {syncEntry.content}</li>);
});
return (
<div>
<div className="App-header">
<h2>Welcome to React</h2>
</div>
<ul>
{journals}
</ul>
</div>
);
}
}
Loading…
Cancel
Save