SyncGate: move to react hooks.
Tom Hacohen
parent
06bf21248e
commit
6ed0f02abc
201
src/SyncGate.tsx
201
src/SyncGate.tsx
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Route, Switch, Redirect, RouteComponentProps, withRouter } from 'react-router';
|
||||
|
||||
import moment from 'moment';
|
||||
|
|
@ -21,7 +21,7 @@ import Pim from './Pim';
|
|||
import * as EteSync from 'etesync';
|
||||
import { CURRENT_VERSION } from 'etesync';
|
||||
|
||||
import { store, SettingsType, JournalsData, EntriesData, StoreState, CredentialsData, UserInfoData } from './store';
|
||||
import { store, JournalsData, EntriesData, StoreState, CredentialsData, UserInfoData } from './store';
|
||||
import { addJournal, fetchAll, fetchEntries, fetchUserInfo, createUserInfo } from './store/actions';
|
||||
|
||||
export interface SyncInfoJournal {
|
||||
|
|
@ -37,19 +37,18 @@ interface PropsType {
|
|||
etesync: CredentialsData;
|
||||
}
|
||||
|
||||
type PropsTypeInner = RouteComponentProps<{}> & PropsType & {
|
||||
settings: SettingsType;
|
||||
interface SelectorProps {
|
||||
etesync: CredentialsData;
|
||||
journals: JournalsData;
|
||||
entries: EntriesData;
|
||||
userInfo: UserInfoData;
|
||||
fetchCount: number;
|
||||
};
|
||||
}
|
||||
|
||||
const syncInfoSelector = createSelector(
|
||||
(props: PropsTypeInner) => props.etesync,
|
||||
(props: PropsTypeInner) => props.journals!,
|
||||
(props: PropsTypeInner) => props.entries,
|
||||
(props: PropsTypeInner) => props.userInfo,
|
||||
(props: SelectorProps) => props.etesync,
|
||||
(props: SelectorProps) => props.journals!,
|
||||
(props: SelectorProps) => props.entries,
|
||||
(props: SelectorProps) => props.userInfo,
|
||||
(etesync, journals, entries, userInfo) => {
|
||||
const derived = etesync.encryptionKey;
|
||||
const userInfoCryptoManager = userInfo.getCryptoManager(etesync.encryptionKey);
|
||||
|
|
@ -98,11 +97,19 @@ const syncInfoSelector = createSelector(
|
|||
|
||||
const PimRouter = withRouter(Pim);
|
||||
|
||||
class SyncGate extends React.PureComponent<PropsTypeInner> {
|
||||
public componentDidMount() {
|
||||
const me = this.props.etesync.credentials.email;
|
||||
// FIXME: this and withRouters are only needed here because of https://github.com/ReactTraining/react-router/issues/5795
|
||||
export default withRouter(function SyncGate(props: RouteComponentProps<{}> & PropsType) {
|
||||
const etesync = props.etesync;
|
||||
const settings = useSelector((state: StoreState) => state.settings);
|
||||
const fetchCount = useSelector((state: StoreState) => state.fetchCount);
|
||||
const userInfo = useSelector((state: StoreState) => state.cache.userInfo);
|
||||
const journals = useSelector((state: StoreState) => state.cache.journals);
|
||||
const entries = useSelector((state: StoreState) => state.cache.entries);
|
||||
|
||||
React.useEffect(() => {
|
||||
const me = etesync.credentials.email;
|
||||
const syncAll = () => {
|
||||
store.dispatch<any>(fetchAll(this.props.etesync, this.props.entries)).then((haveJournals: boolean) => {
|
||||
store.dispatch<any>(fetchAll(etesync, entries)).then((haveJournals: boolean) => {
|
||||
if (haveJournals) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -114,14 +121,14 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
|
|||
collection.displayName = 'Default';
|
||||
|
||||
const journal = new EteSync.Journal({ uid: collection.uid });
|
||||
const cryptoManager = new EteSync.CryptoManager(this.props.etesync.encryptionKey, collection.uid);
|
||||
const cryptoManager = new EteSync.CryptoManager(etesync.encryptionKey, collection.uid);
|
||||
journal.setInfo(cryptoManager, collection);
|
||||
(async () => {
|
||||
try {
|
||||
const addedJournalAction = addJournal(this.props.etesync, journal);
|
||||
const addedJournalAction = addJournal(etesync, journal);
|
||||
await addedJournalAction.payload;
|
||||
store.dispatch(addedJournalAction);
|
||||
store.dispatch(fetchEntries(this.props.etesync, collection.uid));
|
||||
store.dispatch(fetchEntries(etesync, collection.uid));
|
||||
} catch (e) {
|
||||
// FIXME: Limit based on error code to only ignore for associates
|
||||
console.warn(`Failed creating journal for ${collection.type}. Associate?`);
|
||||
|
|
@ -131,113 +138,95 @@ class SyncGate extends React.PureComponent<PropsTypeInner> {
|
|||
});
|
||||
};
|
||||
|
||||
if (this.props.userInfo) {
|
||||
if (userInfo) {
|
||||
syncAll();
|
||||
} else {
|
||||
const fetching = fetchUserInfo(this.props.etesync, me);
|
||||
const fetching = fetchUserInfo(etesync, me);
|
||||
fetching.payload?.then(() => {
|
||||
store.dispatch(fetching);
|
||||
syncAll();
|
||||
}).catch(() => {
|
||||
const userInfo = new EteSync.UserInfo(me, CURRENT_VERSION);
|
||||
const keyPair = EteSync.AsymmetricCryptoManager.generateKeyPair();
|
||||
const cryptoManager = userInfo.getCryptoManager(this.props.etesync.encryptionKey);
|
||||
const cryptoManager = userInfo.getCryptoManager(etesync.encryptionKey);
|
||||
|
||||
userInfo.setKeyPair(cryptoManager, keyPair);
|
||||
|
||||
store.dispatch<any>(createUserInfo(this.props.etesync, userInfo)).then(syncAll);
|
||||
store.dispatch<any>(createUserInfo(etesync, userInfo)).then(syncAll);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const entryArrays = entries;
|
||||
|
||||
if ((userInfo === null) || (journals === null) ||
|
||||
((fetchCount > 0) &&
|
||||
((entryArrays.size === 0) || entryArrays.some((x) => (x.size === 0))))
|
||||
) {
|
||||
return (<LoadingIndicator style={{ display: 'block', margin: '40px auto' }} />);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const entryArrays = this.props.entries;
|
||||
const journals = this.props.journals;
|
||||
|
||||
if ((this.props.userInfo === null) || (journals === null) ||
|
||||
((this.props.fetchCount > 0) &&
|
||||
((entryArrays.size === 0) || entryArrays.some((x) => (x.size === 0))))
|
||||
) {
|
||||
return (<LoadingIndicator style={{ display: 'block', margin: '40px auto' }} />);
|
||||
}
|
||||
|
||||
// FIXME: Shouldn't be here
|
||||
moment.locale(this.props.settings.locale);
|
||||
// FIXME: Shouldn't be here
|
||||
moment.locale(settings.locale);
|
||||
|
||||
|
||||
const journalMap = syncInfoSelector(this.props);
|
||||
const journalMap = syncInfoSelector({ etesync, userInfo, journals, entries });
|
||||
|
||||
return (
|
||||
<Switch>
|
||||
<Route
|
||||
path={routeResolver.getRoute('home')}
|
||||
exact
|
||||
render={() => (
|
||||
<Redirect to={routeResolver.getRoute('pim')} />
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('pim')}
|
||||
render={({ history }) => (
|
||||
<>
|
||||
<AppBarOverride title="EteSync" />
|
||||
<PimRouter
|
||||
etesync={this.props.etesync}
|
||||
userInfo={this.props.userInfo}
|
||||
syncInfo={journalMap}
|
||||
history={history}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('journals')}
|
||||
render={({ location, history }) => (
|
||||
<Journals
|
||||
etesync={this.props.etesync}
|
||||
userInfo={this.props.userInfo}
|
||||
return (
|
||||
<Switch>
|
||||
<Route
|
||||
path={routeResolver.getRoute('home')}
|
||||
exact
|
||||
render={() => (
|
||||
<Redirect to={routeResolver.getRoute('pim')} />
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('pim')}
|
||||
render={({ history }) => (
|
||||
<>
|
||||
<AppBarOverride title="EteSync" />
|
||||
<PimRouter
|
||||
etesync={etesync}
|
||||
userInfo={userInfo}
|
||||
syncInfo={journalMap}
|
||||
journals={journals}
|
||||
location={location}
|
||||
history={history}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('settings')}
|
||||
exact
|
||||
render={({ history }) => (
|
||||
<Settings
|
||||
history={history}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('debug')}
|
||||
exact
|
||||
render={() => (
|
||||
<Debug
|
||||
etesync={this.props.etesync}
|
||||
userInfo={this.props.userInfo}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: StoreState, _props: PropsType) => {
|
||||
return {
|
||||
settings: state.settings,
|
||||
journals: state.cache.journals,
|
||||
entries: state.cache.entries,
|
||||
userInfo: state.cache.userInfo,
|
||||
fetchCount: state.fetchCount,
|
||||
};
|
||||
};
|
||||
|
||||
// FIXME: this and withRouters are only needed here because of https://github.com/ReactTraining/react-router/issues/5795
|
||||
export default withRouter(connect(
|
||||
mapStateToProps
|
||||
)(SyncGate));
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('journals')}
|
||||
render={({ location, history }) => (
|
||||
<Journals
|
||||
etesync={etesync}
|
||||
userInfo={userInfo}
|
||||
syncInfo={journalMap}
|
||||
journals={journals}
|
||||
location={location}
|
||||
history={history}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('settings')}
|
||||
exact
|
||||
render={({ history }) => (
|
||||
<Settings
|
||||
history={history}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('debug')}
|
||||
exact
|
||||
render={() => (
|
||||
<Debug
|
||||
etesync={etesync}
|
||||
userInfo={userInfo}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue