Refactor and perf improve Rehydration (#1121)

.eslintrc

@@ -108,7 +108,8 @@
         "denmark", "copenhagen", "unregister", "gcm", "unstarMessage", "Unstar", "wildcard_mentioned",
         "lightbox", "resize", "remobile", "multiline", "uniqby", "zoe", "localizable", "appid", "apns",
         "Entypo", "msup", "mrow", "webview", "js", "timerow", "reselect", "addons", "cancelable",
-        "gravatar_hash", "pms", "msgs", "collapsable", "const", "wildcard", "reactotron", "camelcase"
+        "gravatar_hash", "pms", "msgs", "collapsable", "const", "wildcard", "reactotron", "camelcase",
+        "hydrator"
       ],
       "skipIfMatch": [
         "http://[^s]*",

src/StoreHydrator.js

@@ -0,0 +1,38 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { Provider } from 'react-redux';
+
+import store, { restore } from './store';
+
+import LoadingScreen from './start/LoadingScreen';
+import Providers from './Providers';
+
+export default class StoreHydrator extends PureComponent {
+  state: {
+    isHydrated: boolean,
+  };
+
+  state = {
+    isHydrated: false,
+  };
+
+  componentWillMount() {
+    restore(() => {
+      this.setState({ isHydrated: true });
+    });
+  }
+
+  render() {
+    const { isHydrated } = this.state;
+
+    if (!isHydrated) {
+      return <LoadingScreen />;
+    }
+
+    return (
+      <Provider store={store}>
+        <Providers />
+      </Provider>
+    );
+  }
+}

src/ZulipMobile.js

@@ -1,11 +1,9 @@
 /* @flow */
-import React, { Component } from 'react';
-import { Provider } from 'react-redux';
+import React from 'react';
 import { Sentry } from 'react-native-sentry';
 
 import '../vendor/intl/intl';
-import store, { restore } from './store';
-import Providers from './Providers';
+import StoreHydrator from './StoreHydrator';
 import config from './config';
 
 require('./i18n/locale');
@@ -16,16 +14,4 @@ if (config.enableSentry) {
   Sentry.config(config.sentryKey).install();
 }
 
-export default class ZulipMobile extends Component {
-  componentWillMount() {
-    restore();
-  }
-
-  render() {
-    return (
-      <Provider store={store}>
-        <Providers />
-      </Provider>
-    );
-  }
-}
+export default () => <StoreHydrator />;

src/app/appReducers.js

@@ -23,7 +23,6 @@ const initialState: AppState = {
   composeTools: false,
   eventQueueId: null,
   editMessage: null,
-  isHydrated: false,
   isOnline: true,
   isActive: true,
   lastActivityTime: new Date(),
@@ -46,12 +45,6 @@ export default (state: AppState = initialState, action: Action) => {
         ...state,
         needsInitialFetch: !!action.apiKey,
       };
-    case REHYDRATE:
-      return {
-        ...state,
-        needsInitialFetch: !!getAuth(action.payload).apiKey,
-        isHydrated: true,
-      };
     case REALM_INIT:
       return {
         ...state,

src/compose/ComposeMenuContainer.js

@@ -4,7 +4,6 @@ import { StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
 import { connectActionSheet } from '@expo/react-native-action-sheet';
 
-import { getAuth } from '../selectors';
 import boundActions from '../boundActions';
 import ComposeMenu from './ComposeMenu';
 
@@ -16,14 +15,7 @@ const componentStyles = StyleSheet.create({
   },
 });
 
-export default connect(
-  state => ({
-    auth: getAuth(state),
-    isHydrated: state.app.isHydrated,
-    needsInitialFetch: state.app.needsInitialFetch,
-  }),
-  boundActions,
-)(props => (
+export default connect(null, boundActions)(props => (
   <View style={componentStyles.wrapper}>
     <ConnectedComposeMenu {...props} />
   </View>

src/nav/AppContainer.js

@@ -8,13 +8,11 @@ import AppWithNavigationState from './AppWithNavigationState';
 import { getAuth } from '../selectors';
 import { registerAppActivity } from '../utils/activity';
 import { checkCompatibility } from '../api';
-import LoadingScreen from '../start/LoadingScreen';
 import CompatibilityScreen from '../start/CompatibilityScreen';
 import { Auth, Actions } from '../types';
 
 type Props = {
   auth: Auth,
-  isHydrated: boolean,
   needsInitialFetch: boolean,
   actions: Actions,
 };
@@ -37,9 +35,9 @@ class AppContainer extends PureComponent {
   };
 
   handleConnectivityChange = isConnected => {
-    const { actions, needsInitialFetch, isHydrated } = this.props;
+    const { actions, needsInitialFetch } = this.props;
     actions.appOnline(isConnected);
-    if (isHydrated && !needsInitialFetch && isConnected) {
+    if (!needsInitialFetch && isConnected) {
       actions.trySendMessages();
     }
   };
@@ -86,12 +84,6 @@ class AppContainer extends PureComponent {
   };
 
   render() {
-    const { isHydrated } = this.props;
-
-    if (!isHydrated) {
-      return <LoadingScreen />;
-    }
-
     const { compatibilityCheckFail } = this.state;
 
     if (compatibilityCheckFail) {
@@ -109,7 +101,6 @@ class AppContainer extends PureComponent {
 export default connect(
   state => ({
     auth: getAuth(state),
-    isHydrated: state.app.isHydrated,
     needsInitialFetch: state.app.needsInitialFetch,
   }),
   boundActions,

src/selectors.js

@@ -1,6 +1,5 @@
 /* @flow */
 export * from './baseSelectors';
-export * from './app/appSelectors';
 export * from './account/accountSelectors';
 export * from './conversations/conversationsSelectors';
 export * from './caughtup/caughtUpSelectors';

src/store.js

@@ -14,7 +14,7 @@ import middleware from './middleware';
 //   compose(autoRehydrate(), applyMiddleware(...middleware)),
 // );
 
-const store = compose(autoRehydrate(), applyMiddleware(...middleware))(createStore)(rootReducer);
+const store = compose(applyMiddleware(...middleware), autoRehydrate())(createStore)(rootReducer);
 
 export const restore = (onFinished?: () => void) =>
   persistStore(

src/types.js

@@ -267,7 +267,6 @@ export type AccountState = Account[];
 
 export type AppState = {
   lastActivityTime: Date,
-  isHydrated: boolean,
   isOnline: boolean,
   isActive: boolean,
   needsInitialFetch: boolean,