SyncGate: move to react hooks.

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 & {
+interface SelectorProps {
-  settings: SettingsType;
+  etesync: CredentialsData;
   journals: JournalsData;
   entries: EntriesData;
   userInfo: UserInfoData;
-  fetchCount: number;
+}
-};
 
 const syncInfoSelector = createSelector(
-  (props: PropsTypeInner) => props.etesync,
+  (props: SelectorProps) => props.etesync,
-  (props: PropsTypeInner) => props.journals!,
+  (props: SelectorProps) => props.journals!,
-  (props: PropsTypeInner) => props.entries,
+  (props: SelectorProps) => props.entries,
-  (props: PropsTypeInner) => props.userInfo,
+  (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> {
+// FIXME: this and withRouters are only needed here because of https://github.com/ReactTraining/react-router/issues/5795
-  public componentDidMount() {
+export default withRouter(function SyncGate(props: RouteComponentProps<{}> & PropsType) {
-    const me = this.props.etesync.credentials.email;
+  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);
       });
     }
-  }
+  }, []);
 
-  public render() {
+  const entryArrays = entries;
-    const entryArrays = this.props.entries;
-    const journals = this.props.journals;
 
-    if ((this.props.userInfo === null) || (journals === null) ||
+  if ((userInfo === null) || (journals === null) ||
-      ((this.props.fetchCount > 0) &&
+    ((fetchCount > 0) &&
-        ((entryArrays.size === 0) || entryArrays.some((x) => (x.size === 0))))
+      ((entryArrays.size === 0) || entryArrays.some((x) => (x.size === 0))))
-    ) {
+  ) {
-      return (<LoadingIndicator style={{ display: 'block', margin: '40px auto' }} />);
+    return (<LoadingIndicator style={{ display: 'block', margin: '40px auto' }} />);
-    }
+  }
 
-    // FIXME: Shouldn't be here
+  // FIXME: Shouldn't be here
-    moment.locale(this.props.settings.locale);
+  moment.locale(settings.locale);
-
+
-
+
-    const journalMap = syncInfoSelector(this.props);
+  const journalMap = syncInfoSelector({ etesync, userInfo, journals, entries });
-
+
-    return (
+  return (
-      <Switch>
+    <Switch>
-        <Route
+      <Route
-          path={routeResolver.getRoute('home')}
+        path={routeResolver.getRoute('home')}
-          exact
+        exact
-          render={() => (
+        render={() => (
-            <Redirect to={routeResolver.getRoute('pim')} />
+          <Redirect to={routeResolver.getRoute('pim')} />
-          )}
+        )}
-        />
+      />
-        <Route
+      <Route
-          path={routeResolver.getRoute('pim')}
+        path={routeResolver.getRoute('pim')}
-          render={({ history }) => (
+        render={({ history }) => (
-            <>
+          <>
-              <AppBarOverride title="EteSync" />
+            <AppBarOverride title="EteSync" />
-              <PimRouter
+            <PimRouter
-                etesync={this.props.etesync}
+              etesync={etesync}
-                userInfo={this.props.userInfo}
+              userInfo={userInfo}
-                syncInfo={journalMap}
-                history={history}
-              />
-            </>
-          )}
-        />
-        <Route
-          path={routeResolver.getRoute('journals')}
-          render={({ location, history }) => (
-            <Journals
-              etesync={this.props.etesync}
-              userInfo={this.props.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')}
+      <Route
-          exact
+        path={routeResolver.getRoute('journals')}
-          render={() => (
+        render={({ location, history }) => (
-            <Debug
+          <Journals
-              etesync={this.props.etesync}
+            etesync={etesync}
-              userInfo={this.props.userInfo}
+            userInfo={userInfo}
-            />
+            syncInfo={journalMap}
-          )}
+            journals={journals}
-        />
+            location={location}
-      </Switch>
+            history={history}
-    );
+          />
-  }
+        )}
-}
+      />
-
+      <Route
-const mapStateToProps = (state: StoreState, _props: PropsType) => {
+        path={routeResolver.getRoute('settings')}
-  return {
+        exact
-    settings: state.settings,
+        render={({ history }) => (
-    journals: state.cache.journals,
+          <Settings
-    entries: state.cache.entries,
+            history={history}
-    userInfo: state.cache.userInfo,
+          />
-    fetchCount: state.fetchCount,
+        )}
-  };
+      />
-};
+      <Route
-
+        path={routeResolver.getRoute('debug')}
-// FIXME: this and withRouters are only needed here because of https://github.com/ReactTraining/react-router/issues/5795
+        exact
-export default withRouter(connect(
+        render={() => (
-  mapStateToProps
+          <Debug
-)(SyncGate));
+            etesync={etesync}
+            userInfo={userInfo}
+          />
+        )}
+      />
+    </Switch>
+  );
+});