Rework providers and the rest root components (#1148)

src/ZulipMobile.js

@@ -3,8 +3,14 @@ import React from 'react';
 import { Sentry } from 'react-native-sentry';
 
 import '../vendor/intl/intl';
-import StoreHydrator from './StoreHydrator';
 import config from './config';
+import StoreProvider from './boot/StoreProvider';
+import TranslationProvider from './boot/TranslationProvider';
+import StylesProvider from './boot/StylesProvider';
+import CompatibilityChecker from './boot/CompatibilityChecker';
+import AppEventHandlers from './boot/AppEventHandlers';
+import AppDataFetcher from './boot/AppDataFetcher';
+import AppWithNavigationState from './nav/AppWithNavigationState';
 
 require('./i18n/locale');
 
@@ -14,4 +20,18 @@ if (config.enableSentry) {
   Sentry.config(config.sentryKey).install();
 }
 
-export default () => <StoreHydrator />;
+export default () => (
+  <StoreProvider>
+    <TranslationProvider>
+      <StylesProvider>
+        <CompatibilityChecker>
+          <AppEventHandlers>
+            <AppDataFetcher>
+              <AppWithNavigationState />
+            </AppDataFetcher>
+          </AppEventHandlers>
+        </CompatibilityChecker>
+      </StylesProvider>
+    </TranslationProvider>
+  </StoreProvider>
+);

src/boot/AppDataFetcher.js

@@ -0,0 +1,37 @@
+/* @flow */
+import { PureComponent } from 'react';
+import { connect } from 'react-redux';
+
+import { Actions } from '../types';
+import boundActions from '../boundActions';
+
+class AppDataFetcher extends PureComponent {
+  props: {
+    needsInitialFetch: boolean,
+    actions: Actions,
+    children?: any,
+  };
+
+  componentWillMount = () => this.init(this.props);
+
+  componentWillReceiveProps = nextProps => this.init(nextProps);
+
+  init = props => {
+    const { actions, needsInitialFetch } = props;
+
+    if (needsInitialFetch) {
+      actions.doInitialFetch();
+    }
+  };
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default connect(
+  state => ({
+    needsInitialFetch: state.app.needsInitialFetch,
+  }),
+  boundActions,
+)(AppDataFetcher);

src/nav/AppContainer.js → src/boot/AppEventHandlers.js

@@ -5,20 +5,18 @@ import { connect } from 'react-redux';
 
 import { Auth, Actions } from '../types';
 import boundActions from '../boundActions';
-import AppWithNavigationState from './AppWithNavigationState';
 import { getAuth, getNavigationIndex } from '../selectors';
 import { registerAppActivity } from '../utils/activity';
-import LoadingScreen from '../start/LoadingScreen';
 
 type Props = {
   auth: Auth,
   navIndex: number,
-  isHydrated: boolean,
   needsInitialFetch: boolean,
   actions: Actions,
+  children?: any,
 };
 
-class AppContainer extends PureComponent {
+class AppEventHandlers extends PureComponent {
   static contextTypes = {
     styles: () => null,
   };
@@ -67,32 +65,15 @@ class AppContainer extends PureComponent {
 
   componentWillUnmount() {
     NetInfo.isConnected.removeEventListener('change', this.handleConnectivityChange);
-    AppState.addEventListener('change', this.handleAppStateChange);
-    AppState.addEventListener('memoryWarning', this.handleMemoryWarning);
+    AppState.removeEventListener('change', this.handleAppStateChange);
+    AppState.removeEventListener('memoryWarning', this.handleMemoryWarning);
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonPress);
   }
 
-  componentWillMount = () => this.init(this.props);
-
-  componentWillReceiveProps = nextProps => this.init(nextProps);
-
-  init = props => {
-    const { actions, needsInitialFetch } = props;
-
-    if (needsInitialFetch) {
-      actions.doInitialFetch();
-    }
-  };
-
   render() {
-    const { isHydrated } = this.props;
-
-    if (!isHydrated) {
-      return <LoadingScreen />;
-    }
-
     return (
       <View style={this.context.styles.screen} onLayout={this.handleLayout}>
-        <AppWithNavigationState />
+        {this.props.children}
       </View>
     );
   }
@@ -101,9 +82,8 @@ class AppContainer extends PureComponent {
 export default connect(
   state => ({
     auth: getAuth(state),
-    isHydrated: state.app.isHydrated,
     needsInitialFetch: state.app.needsInitialFetch,
     navIndex: getNavigationIndex(state),
   }),
   boundActions,
-)(AppContainer);
+)(AppEventHandlers);

src/StoreHydrator.js → src/boot/StoreProvider.js

@@ -3,14 +3,9 @@ import React, { PureComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import store, { restore } from './store';
-import timing from './utils/timing';
-import Providers from './Providers';
+import timing from '../utils/timing';
 
 export default class StoreHydrator extends PureComponent {
-  state: {
-    isHydrated: boolean,
-  };
-
   componentWillMount() {
     timing.start('Store hydration');
     restore(() => {
@@ -19,10 +14,6 @@ export default class StoreHydrator extends PureComponent {
   }
 
   render() {
-    return (
-      <Provider store={store}>
-        <Providers />
-      </Provider>
-    );
+    return <Provider store={store}>{this.props.children}</Provider>;
   }
 }

src/StylesProvider.js → src/boot/StylesProvider.js

@@ -1,18 +1,21 @@
 /* @flow */
-import { Children, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
 
-import themeCreator from './styles/theme';
-import themeDark from './styles/themeDark';
-import themeLight from './styles/themeLight';
+import themeCreator from '../styles/theme';
+import themeDark from '../styles/themeDark';
+import themeLight from '../styles/themeLight';
 
 const themeNameToObject = {
   default: themeLight,
   light: themeLight,
   night: themeDark,
 };
 
-export default class StyleProvider extends PureComponent {
+const Dummy = props => props.children;
+
+class StyleProvider extends PureComponent {
   props: {
     theme: string,
     children?: any,
@@ -34,6 +37,12 @@ export default class StyleProvider extends PureComponent {
   }
 
   render() {
-    return Children.only(this.props.children);
+    const { children, theme } = this.props;
+
+    return <Dummy key={theme}>{children}</Dummy>;
   }
 }
+
+export default connect(state => ({
+  theme: state.settings.theme,
+}))(StyleProvider);

src/boot/TranslationProvider.js

@@ -0,0 +1,31 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { Text } from 'react-native';
+import { connect } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+
+import '../../vendor/intl/intl';
+import messages from '../i18n/messages';
+
+require('../i18n/locale');
+
+class TranslationProvider extends PureComponent {
+  props: {
+    locale: string,
+    children?: any,
+  };
+
+  render() {
+    const { locale, children } = this.props;
+
+    return (
+      <IntlProvider key={locale} locale={locale} textComponent={Text} messages={messages[locale]}>
+        {children}
+      </IntlProvider>
+    );
+  }
+}
+
+export default connect(state => ({
+  locale: state.settings.locale,
+}))(TranslationProvider);

src/__tests__/StylesProvider-test.js → src/boot/__tests/StylesProvider-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { rendererWithStyle } from '../utils/tests';
+import { rendererWithStyle } from '../../utils/tests';
 
 describe('StylesProvider', () => {
   test('renders', () => {

src/middleware.js → src/boot/middleware.js

@@ -4,7 +4,7 @@ import { createLogger } from 'redux-logger';
 import { REHYDRATE } from 'redux-persist/constants';
 import createActionBuffer from 'redux-action-buffer';
 
-import config from './config';
+import config from '../config';
 
 const middleware = [thunk, createActionBuffer(REHYDRATE)];
 

src/boot/reducers.js

@@ -0,0 +1,59 @@
+/* @flow */
+import { combineReducers } from 'redux';
+
+import config from '../config';
+import { enableBatching, logSlowReducers } from '../utils/redux';
+
+import accounts from '../account/accountReducers';
+import alertWords from '../alertWords/alertWordsReducer';
+import app from '../app/appReducers';
+import caughtUp from '../caughtup/caughtUpReducers';
+import chat from '../chat/chatReducers';
+import fetching from '../chat/fetchingReducers';
+import flags from '../chat/flagsReducers';
+import mute from '../mute/muteReducers';
+import nav from '../nav/navReducers';
+import realm from '../realm/realmReducers';
+import outbox from '../outbox/outboxReducers';
+import drafts from '../drafts/draftsReducers';
+import settings from '../settings/settingsReducers';
+import streams from '../streams/streamsReducers';
+import subscriptions from '../subscriptions/subscriptionsReducers';
+import typing from '../typing/typingReducers';
+import unreadStreams from '../unread/unreadStreamsReducers';
+import unreadPms from '../unread/unreadPmsReducers';
+import unreadHuddles from '../unread/unreadHuddlesReducers';
+import unreadMentions from '../unread/unreadMentionsReducers';
+import users from '../users/usersReducers';
+import presence from '../presence/presenceReducers';
+
+const reducers = {
+  accounts,
+  alertWords,
+  app,
+  caughtUp,
+  chat,
+  fetching,
+  drafts,
+  flags,
+  mute,
+  nav,
+  presence,
+  realm,
+  outbox,
+  settings,
+  streams,
+  subscriptions,
+  typing,
+  unread: combineReducers({
+    streams: unreadStreams,
+    pms: unreadPms,
+    huddles: unreadHuddles,
+    mentions: unreadMentions,
+  }),
+  users,
+};
+
+export default enableBatching(
+  combineReducers(config.enableReduxSlowReducerWarnings ? logSlowReducers(reducers) : reducers),
+);

src/html/__tests__/HtmlNodeTag-test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactTestRenderer from 'react-test-renderer';
 import { Provider } from 'react-redux';
 
-import store from '../../store';
+import store from '../../boot/store';
 import HtmlNodeTag from '../HtmlNodeTag';
 
 describe('HtmlNodeTag', () => {

src/html/__tests__/renderHtmlChildren-test.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import ReactTestRenderer from 'react-test-renderer';
 import { Provider } from 'react-redux';
 
-import store from '../../store';
+import store from '../../boot/store';
 import htmlToDomTree from '../htmlToDomTree';
 import renderHtmlChildren from '../renderHtmlChildren';