Render main screen faster. Small fixes. (#1145)

package.json

@@ -37,7 +37,6 @@
     "date-fns": "^1.28.5",
     "entities": "^1.1.1",
     "events": "^1.1.1",
-    "g": "^2.0.1",
     "htmlparser2": "^3.9.2",
     "immutable": "^3.8.1",
     "lodash.isequal": "^4.4.0",

src/Providers.js

@@ -8,6 +8,7 @@ import '../vendor/intl/intl';
 import messages from './i18n/messages';
 import StylesProvider from './StylesProvider';
 import AppContainer from './nav/AppContainer';
+import CompatibilityChecker from './nav/CompatibilityChecker';
 
 require('./i18n/locale');
 
@@ -23,7 +24,9 @@ class Providers extends PureComponent {
     return (
       <IntlProvider key={locale} locale={locale} textComponent={Text} messages={messages[locale]}>
         <StylesProvider key={theme} theme={theme}>
-          <AppContainer />
+          <CompatibilityChecker>
+            <AppContainer />
+          </CompatibilityChecker>
         </StylesProvider>
       </IntlProvider>
     );

src/StoreHydrator.js

@@ -4,33 +4,21 @@ import { Provider } from 'react-redux';
 
 import store, { restore } from './store';
 import timing from './utils/timing';
-import LoadingScreen from './start/LoadingScreen';
 import Providers from './Providers';
 
 export default class StoreHydrator extends PureComponent {
   state: {
     isHydrated: boolean,
   };
 
-  state = {
-    isHydrated: false,
-  };
-
   componentWillMount() {
     timing.start('Store hydration');
     restore(() => {
       timing.end('Store hydration');
-      this.setState({ isHydrated: true });
     });
   }
 
   render() {
-    const { isHydrated } = this.state;
-
-    if (!isHydrated) {
-      return <LoadingScreen />;
-    }
-
     return (
       <Provider store={store}>
         <Providers />

src/app/appReducers.js

@@ -25,6 +25,7 @@ const initialState: AppState = {
   editMessage: null,
   isOnline: true,
   isActive: true,
+  isHydrated: false,
   lastActivityTime: new Date(),
   needsInitialFetch: false,
   orientation: 'PORTRAIT',
@@ -50,6 +51,7 @@ export default (state: AppState = initialState, action: Action) => {
     case REHYDRATE:
       return {
         ...state,
+        isHydrated: true,
         needsInitialFetch: !!getAuth(action.payload).apiKey,
       };
 

src/main/MainScreenContainer.js

@@ -5,7 +5,6 @@ import isEqual from 'lodash.isequal';
 
 import type { Actions, Message, Narrow } from '../types';
 import boundActions from '../boundActions';
-import { getShownMessagesInActiveNarrow } from '../selectors';
 import MainScreen from './MainScreenWithDrawers';
 // import MainScreen from './MainScreenWithTabs';
 
@@ -28,10 +27,4 @@ class MainScreenContainer extends PureComponent {
   }
 }
 
-export default connect(
-  state => ({
-    narrow: state.chat.narrow,
-    messages: getShownMessagesInActiveNarrow(state),
-  }),
-  boundActions,
-)(MainScreenContainer);
+export default connect(null, boundActions)(MainScreenContainer);

src/main/MainScreenWithTabs.js

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { ZulipStatusBar } from '../common';
 import MainNavBar from '../nav/MainNavBar';
 import MainTabs from './MainTabs';
 
@@ -16,6 +17,7 @@ export default class MainScreenWithTabs extends PureComponent {
   render() {
     return (
       <View style={styles.wrapper}>
+        <ZulipStatusBar />
         <MainNavBar />
         <MainTabs />
       </View>

src/main/MainTabs.js

@@ -6,7 +6,7 @@ import { BRAND_COLOR } from '../styles';
 import UnreadStreamsContainer from '../unread/UnreadStreamsContainer';
 import StreamTabs from '../nav/StreamTabs';
 import ConversationsContainer from '../conversations/ConversationsContainer';
-import SettingsCard from '../settings/SettingsCard';
+import SettingsContainer from '../settings/SettingsContainer';
 import { IconHome, IconStream, IconPrivateChat, IconSettings } from '../common/Icons';
 
 export default TabNavigator(
@@ -33,7 +33,7 @@ export default TabNavigator(
       },
     },
     settings: {
-      screen: SettingsCard,
+      screen: SettingsContainer,
       navigationOptions: {
         tabBarLabel: 'Settings',
         tabBarIcon: ({ tintColor }) => <IconSettings size={24} color={tintColor} />,

src/message/MessageListContainer.js

@@ -5,6 +5,7 @@ import { connectActionSheet } from '@expo/react-native-action-sheet';
 
 import boundActions from '../boundActions';
 import MessageList from './MessageList';
+// import MessageList from './MessageListFlatList';
 import {
   getAuth,
   getCurrentTypingUsers,

src/message/MessageListFlatList.js

@@ -4,6 +4,7 @@ import { SectionList } from 'react-native';
 
 import type { Actions, TypingState } from '../types';
 import { nullFunction } from '../nullObjects';
+import { LoadingIndicator } from '../common';
 import MessageListSection from './MessageListSection';
 import MessageListItem from './MessageListItem';
 
@@ -17,8 +18,10 @@ export default class MessageList extends PureComponent {
     typingUsers?: TypingState,
     fetchingOlder: boolean,
     fetchingNewer: boolean,
+    singleFetchProgress: boolean,
     renderedMessages: Object[],
     listRef: (component: Object) => void,
+    onScroll: () => void,
   };
 
   static defaultProps = {
@@ -27,7 +30,19 @@ export default class MessageList extends PureComponent {
 
   render() {
     const { styles } = this.context;
-    const { actions, renderedMessages, fetchingOlder, listRef } = this.props;
+    const {
+      actions,
+      renderedMessages,
+      singleFetchProgress,
+      fetchingOlder,
+      fetchingNewer,
+      listRef,
+      onScroll,
+    } = this.props;
+
+    if (!singleFetchProgress && fetchingNewer) {
+      return <LoadingIndicator active />;
+    }
 
     return (
       <SectionList
@@ -43,6 +58,7 @@ export default class MessageList extends PureComponent {
         onStartReached={actions.fetchOlder}
         onEndReached={actions.fetchNewer}
         onRefresh={actions.fetchOlder}
+        onScroll={onScroll}
         ref={component => {
           if (listRef) listRef(component);
         }}

src/message/MessageListWeb.js

@@ -33,26 +33,6 @@ export default class MessageListWeb extends PureComponent {
     }
   };
 
-  componentDidMount = () => {};
-  /*
-  shouldComponentUpdate = (nextProps) => {
-    // if (this.props.messages.length < nextProps.messages.length) {
-    console.log('NEW MSGS');
-    // this.webview.postMessage(JSON.stringify({
-    //   type: 'message',
-    //   html: '<div>Hello World</div>'
-    // }));
-    console.log(nextProps.messages.length - this.props.messages.length);
-    console.log(nextProps.messages.slice(nextProps.messages.length - this.props.messages.length));
-    // }
-
-    if (this.once) {
-      return false;
-    }
-    this.once = true;
-    return true;
-  };
-*/
   render() {
     const { auth } = this.props;
     const messagesHtml = renderMessagesAsHtml(this.props);

src/nav/AppContainer.js

@@ -3,17 +3,17 @@ import React, { PureComponent } from 'react';
 import { AppState, BackHandler, NetInfo, View } from 'react-native';
 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 { checkCompatibility } from '../api';
-import CompatibilityScreen from '../start/CompatibilityScreen';
-import { Auth, Actions } from '../types';
+import LoadingScreen from '../start/LoadingScreen';
 
 type Props = {
   auth: Auth,
   navIndex: number,
+  isHydrated: boolean,
   needsInitialFetch: boolean,
   actions: Actions,
 };
@@ -24,10 +24,6 @@ class AppContainer extends PureComponent {
   };
   props: Props;
 
-  state = {
-    compatibilityCheckFail: false,
-  };
-
   handleLayout = event => {
     const { actions } = this.props;
     const { width, height } = event.nativeEvent.layout;
@@ -56,7 +52,7 @@ class AppContainer extends PureComponent {
       return true;
     }
     return false;
-  }
+  };
 
   handleMemoryWarning = () => {
     // Release memory here
@@ -67,13 +63,6 @@ class AppContainer extends PureComponent {
     AppState.addEventListener('change', this.handleAppStateChange);
     AppState.addEventListener('memoryWarning', this.handleMemoryWarning);
     BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress);
-    checkCompatibility().then(res => {
-      if (res.status === 400) {
-        this.setState({
-          compatibilityCheckFail: true,
-        });
-      }
-    });
   }
 
   componentWillUnmount() {
@@ -95,10 +84,10 @@ class AppContainer extends PureComponent {
   };
 
   render() {
-    const { compatibilityCheckFail } = this.state;
+    const { isHydrated } = this.props;
 
-    if (compatibilityCheckFail) {
-      return <CompatibilityScreen />;
+    if (!isHydrated) {
+      return <LoadingScreen />;
     }
 
     return (
@@ -112,6 +101,7 @@ class AppContainer extends PureComponent {
 export default connect(
   state => ({
     auth: getAuth(state),
+    isHydrated: state.app.isHydrated,
     needsInitialFetch: state.app.needsInitialFetch,
     navIndex: getNavigationIndex(state),
   }),

src/nav/CompatibilityChecker.js

@@ -0,0 +1,27 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+
+import { checkCompatibility } from '../api';
+import CompatibilityScreen from '../start/CompatibilityScreen';
+
+export default class CompatibilityChecker extends PureComponent {
+  state = {
+    compatibilityCheckFail: false,
+  };
+
+  componentDidMount() {
+    checkCompatibility().then(res => {
+      if (res.status === 400) {
+        this.setState({
+          compatibilityCheckFail: true,
+        });
+      }
+    });
+  }
+
+  render() {
+    const { compatibilityCheckFail } = this.state;
+
+    return compatibilityCheckFail ? <CompatibilityScreen /> : this.props.children;
+  }
+}

src/settings/SettingsContainer.js

@@ -0,0 +1,16 @@
+/* TODO flow */
+import { connect } from 'react-redux';
+
+import boundActions from '../boundActions';
+import { getAuth } from '../selectors';
+import SettingsCard from './SettingsCard';
+
+export default connect(
+  state => ({
+    offlineNotification: state.settings.offlineNotification,
+    onlineNotification: state.settings.onlineNotification,
+    theme: state.settings.theme,
+    auth: getAuth(state),
+  }),
+  boundActions,
+)(SettingsCard);

src/settings/SettingsScreen.js

@@ -1,28 +1,15 @@
 /* TODO flow */
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
 
-import boundActions from '../boundActions';
-import { getAuth } from '../selectors';
 import { Screen } from '../common';
-import SettingsCard from './SettingsCard';
+import SettingsContainer from './SettingsContainer';
 
-class SettingsScreen extends PureComponent {
+export default class SettingsScreen extends PureComponent {
   render() {
     return (
       <Screen title="Settings">
-        <SettingsCard {...this.props} />
+        <SettingsContainer />
       </Screen>
     );
   }
 }
-
-export default connect(
-  state => ({
-    offlineNotification: state.settings.offlineNotification,
-    onlineNotification: state.settings.onlineNotification,
-    theme: state.settings.theme,
-    auth: getAuth(state),
-  }),
-  boundActions,
-)(SettingsScreen);