Move all of the etesync context to a separate place.

This means that encryption key derivation and token access
are not called as often.
master
Tom Hacohen 7 years ago
parent 6f9c783159
commit 132f63e2a6

@ -1,34 +1,9 @@
import * as React from 'react'; import * as React from 'react';
import { HashRouter } from 'react-router-dom'; import { HashRouter } from 'react-router-dom';
import { Switch, Route } from 'react-router';
import './App.css'; import './App.css';
import { JournalList } from './JournalList'; import { EteSyncContext } from './EteSyncContext';
import { JournalView } from './JournalView'; import { RouteResolver } from './routes';
import { RouteResolver, RouteKeysType } from './routes';
interface RouteItem {
path: string;
exact?: boolean;
keys?: RouteKeysType;
name: string;
component: React.ComponentType<any>;
}
const navigationRoutes: RouteItem[] = [
{
path: 'home',
exact: true,
name: 'Home',
component: JournalList,
},
{
path: 'journals._id',
exact: true,
name: 'Journal',
component: JournalView,
},
];
export const routeResolver = new RouteResolver({ export const routeResolver = new RouteResolver({
home: '', home: '',
@ -44,16 +19,7 @@ class App extends React.Component {
render() { render() {
return ( return (
<HashRouter> <HashRouter>
<Switch> <EteSyncContext />
{navigationRoutes.map((route, index) => (
<Route
key={index}
path={routeResolver.getRoute(route.path)}
exact={route.exact}
component={route.component}
/>
))}
</Switch>
</HashRouter> </HashRouter>
); );
} }

@ -0,0 +1,61 @@
import * as React from 'react';
import { Switch, Route } from 'react-router';
import { JournalList } from './JournalList';
import { JournalView } from './JournalView';
import * as EteSync from './api/EteSync';
import { routeResolver } from './App';
const SERVICE_API = 'http://localhost:8000';
const USER = 'me@etesync.com';
const PASSWORD = '';
const derived = EteSync.deriveKey(USER, PASSWORD);
export interface EteSyncContextType {
serviceApiUrl: string;
credentials: EteSync.Credentials;
encryptionKey: string;
}
export class EteSyncContext extends React.Component {
static state: EteSyncContextType;
componentDidMount() {
let authenticator = new EteSync.Authenticator(SERVICE_API);
authenticator.getAuthToken(USER, PASSWORD).then((authToken) => {
const credentials = new EteSync.Credentials(USER, authToken);
const context = {
serviceApiUrl: SERVICE_API,
credentials,
encryptionKey: derived,
};
this.setState(context);
});
}
render() {
if (this.state === null) {
return (<div>loading</div>);
}
return (
<Switch>
<Route
path={routeResolver.getRoute('home')}
exact={true}
render={() => <JournalList etesync={this.state as EteSyncContextType} />}
/>
<Route
path={routeResolver.getRoute('journals._id')}
exact={true}
render={({match}) => <JournalView match={match} etesync={this.state as EteSyncContextType} />}
/>
</Switch>
);
}
}

@ -1,16 +1,16 @@
import * as React from 'react'; import * as React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { EteSyncContextType } from './EteSyncContext';
import * as EteSync from './api/EteSync'; 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);
import { routeResolver } from './App'; import { routeResolver } from './App';
export class JournalList extends React.Component { export class JournalList extends React.Component {
props: {
etesync: EteSyncContextType
};
state: { state: {
journals: Array<EteSync.Journal>, journals: Array<EteSync.Journal>,
}; };
@ -23,12 +23,10 @@ export class JournalList extends React.Component {
} }
componentDidMount() { componentDidMount() {
let authenticator = new EteSync.Authenticator(SERVICE_API); const credentials = this.props.etesync.credentials;
const apiBase = this.props.etesync.serviceApiUrl;
authenticator.getAuthToken(USER, PASSWORD).then((authToken) => { let journalManager = new EteSync.JournalManager(credentials, apiBase);
const credentials = new EteSync.Credentials(USER, authToken);
let journalManager = new EteSync.JournalManager(credentials, SERVICE_API);
journalManager.list().then((journals) => { journalManager.list().then((journals) => {
journals = journals.filter((x) => ( journals = journals.filter((x) => (
// Skip shared journals for now. // Skip shared journals for now.
@ -36,10 +34,10 @@ export class JournalList extends React.Component {
)); ));
this.setState({ journals }); this.setState({ journals });
}); });
});
} }
render() { render() {
const derived = this.props.etesync.encryptionKey;
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);

@ -1,12 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { EteSyncContextType } from './EteSyncContext';
import * as EteSync from './api/EteSync'; 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 { export class JournalView extends React.Component {
static defaultProps = { static defaultProps = {
prevUid: null, prevUid: null,
@ -16,8 +12,9 @@ export class JournalView extends React.Component {
entries: Array<EteSync.Entry>, entries: Array<EteSync.Entry>,
}; };
props: { props: {
etesync: EteSyncContextType
match: any, match: any,
prevUid: string | null, prevUid?: string | null,
}; };
constructor(props: any) { constructor(props: any) {
@ -28,22 +25,20 @@ export class JournalView extends React.Component {
} }
componentDidMount() { componentDidMount() {
const credentials = this.props.etesync.credentials;
const apiBase = this.props.etesync.serviceApiUrl;
const journal = this.props.match.params.journalUid; 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); let entryManager = new EteSync.EntryManager(credentials, apiBase, journal);
entryManager.list(this.props.prevUid).then((entries) => { entryManager.list(this.props.prevUid || null).then((entries) => {
this.setState({ entries }); this.setState({ entries });
}); });
});
} }
render() { render() {
const derived = this.props.etesync.encryptionKey;
const journal = this.props.match.params.journalUid; const journal = this.props.match.params.journalUid;
let prevUid = this.props.prevUid; let prevUid = this.props.prevUid || null;
const journals = this.state.entries.map((entry) => { const journals = this.state.entries.map((entry) => {
// FIXME: actually get the correct version! // FIXME: actually get the correct version!
let cryptoManager = new EteSync.CryptoManager(derived, journal, 1); let cryptoManager = new EteSync.CryptoManager(derived, journal, 1);

Loading…
Cancel
Save