Add a basic journal list view.

master
Tom Hacohen 7 years ago
parent 9fd1b31299
commit bba3282def

@ -2,24 +2,16 @@ import * as React from 'react';
import { Router } from 'react-router'; import { Router } from 'react-router';
import './App.css'; import './App.css';
import { JournalList } from './JournalList';
import createBrowserHistory from 'history/createBrowserHistory'; import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory(); const customHistory = createBrowserHistory();
const logo = require('./logo.svg');
class App extends React.Component { class App extends React.Component {
render() { render() {
return ( return (
<Router history={customHistory}> <Router history={customHistory}>
<div className="App"> <JournalList />
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
</div>
</Router> </Router>
); );
} }

@ -0,0 +1,57 @@
import * as React from 'react';
import * as EteSync from './api/EteSync';
const SERVICE_API = 'http://localhost:8000';
const USER = 'test@localhost';
const PASSWORD = 'SomePassword';
const derived = EteSync.deriveKey(USER, PASSWORD);
export class JournalList extends React.Component {
state: {
journals: Array<EteSync.Journal>,
};
constructor(props: any) {
super(props);
this.state = {
journals: [],
};
}
componentDidMount() {
let authenticator = new EteSync.Authenticator(SERVICE_API);
authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
const credentials = new EteSync.Credentials(USER, authToken);
let journalManager = new EteSync.JournalManager(credentials, SERVICE_API);
journalManager.list().then((journals) => {
journals = journals.filter((x) => (
// Skip shared journals for now.
!x.key
));
this.setState({ journals });
});
});
}
render() {
const journals = this.state.journals.map((journal, idx) => {
let cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
let info = journal.getInfo(cryptoManager);
return (<li key={journal.uid}>{info.displayName}: {info.type} ({journal.uid})</li>);
});
return (
<div>
<div className="App-header">
<h2>Welcome to React</h2>
</div>
<ul>
{journals}
</ul>
</div>
);
}
}

@ -7,7 +7,7 @@ import * as fetch from 'isomorphic-fetch';
import { byte, base64, stringToByteArray } from './Helpers'; import { byte, base64, stringToByteArray } from './Helpers';
import { CryptoManager, HMAC_SIZE_BYTES } from './Crypto'; import { CryptoManager, HMAC_SIZE_BYTES } from './Crypto';
export { CryptoManager } from './Crypto'; export { CryptoManager, deriveKey } from './Crypto';
class ExtendableError extends Error { class ExtendableError extends Error {
constructor(message: any) { constructor(message: any) {
@ -121,6 +121,10 @@ export class Journal extends BaseJournal<JournalJson> {
this._json.version = version; this._json.version = version;
} }
get key(): base64 | undefined {
return this._json.key;
}
get version(): number { get version(): number {
return this._json.version; return this._json.version;
} }

Loading…
Cancel
Save