From 400971c6feb72086309ad32b66bf547bc141fe01 Mon Sep 17 00:00:00 2001 From: Boris Yankov Date: Sun, 10 Sep 2017 01:41:09 +0300 Subject: [PATCH] Render main screen faster. Small fixes. (#1145) --- package.json | 1 - src/Providers.js | 5 ++++- src/StoreHydrator.js | 12 ------------ src/app/appReducers.js | 2 ++ src/main/MainScreenContainer.js | 9 +-------- src/main/MainScreenWithTabs.js | 2 ++ src/main/MainTabs.js | 4 ++-- src/message/MessageListContainer.js | 1 + src/message/MessageListFlatList.js | 18 +++++++++++++++++- src/message/MessageListWeb.js | 20 -------------------- src/nav/AppContainer.js | 26 ++++++++------------------ src/nav/CompatibilityChecker.js | 27 +++++++++++++++++++++++++++ src/settings/SettingsContainer.js | 16 ++++++++++++++++ src/settings/SettingsScreen.js | 19 +++---------------- 14 files changed, 83 insertions(+), 79 deletions(-) create mode 100644 src/nav/CompatibilityChecker.js create mode 100644 src/settings/SettingsContainer.js diff --git a/package.json b/package.json index 5ee3ccca40..4216ee7a5b 100644 --- a/package.json +++ b/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", diff --git a/src/Providers.js b/src/Providers.js index 24da45717f..7f84c6f12a 100644 --- a/src/Providers.js +++ b/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 ( - + + + ); diff --git a/src/StoreHydrator.js b/src/StoreHydrator.js index f65de663bc..f4665e1dc2 100644 --- a/src/StoreHydrator.js +++ b/src/StoreHydrator.js @@ -4,7 +4,6 @@ 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 { @@ -12,25 +11,14 @@ export default class StoreHydrator extends PureComponent { 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 ; - } - return ( diff --git a/src/app/appReducers.js b/src/app/appReducers.js index 93a739ba1e..096af53b71 100644 --- a/src/app/appReducers.js +++ b/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, }; diff --git a/src/main/MainScreenContainer.js b/src/main/MainScreenContainer.js index db2fa5b3d3..329f1f47cc 100644 --- a/src/main/MainScreenContainer.js +++ b/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); diff --git a/src/main/MainScreenWithTabs.js b/src/main/MainScreenWithTabs.js index dd5976ddf5..a59a8c1647 100644 --- a/src/main/MainScreenWithTabs.js +++ b/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 ( + diff --git a/src/main/MainTabs.js b/src/main/MainTabs.js index bbebc0e72a..b430ac7e07 100644 --- a/src/main/MainTabs.js +++ b/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 }) => , diff --git a/src/message/MessageListContainer.js b/src/message/MessageListContainer.js index d1d6054367..c8c695d183 100644 --- a/src/message/MessageListContainer.js +++ b/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, diff --git a/src/message/MessageListFlatList.js b/src/message/MessageListFlatList.js index 7f7f72305c..b2bf71ba4c 100644 --- a/src/message/MessageListFlatList.js +++ b/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 ; + } return ( { if (listRef) listRef(component); }} diff --git a/src/message/MessageListWeb.js b/src/message/MessageListWeb.js index ebbf24781d..b660c00bae 100644 --- a/src/message/MessageListWeb.js +++ b/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: '
Hello World
' - // })); - 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); diff --git a/src/nav/AppContainer.js b/src/nav/AppContainer.js index eed8c18abf..69b30739b5 100644 --- a/src/nav/AppContainer.js +++ b/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 ; + if (!isHydrated) { + return ; } 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), }), diff --git a/src/nav/CompatibilityChecker.js b/src/nav/CompatibilityChecker.js new file mode 100644 index 0000000000..904edb6f66 --- /dev/null +++ b/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 ? : this.props.children; + } +} diff --git a/src/settings/SettingsContainer.js b/src/settings/SettingsContainer.js new file mode 100644 index 0000000000..ed6d07e3bf --- /dev/null +++ b/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); diff --git a/src/settings/SettingsScreen.js b/src/settings/SettingsScreen.js index ea0df520f7..2d3d582e1a 100644 --- a/src/settings/SettingsScreen.js +++ b/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 ( - + ); } } - -export default connect( - state => ({ - offlineNotification: state.settings.offlineNotification, - onlineNotification: state.settings.onlineNotification, - theme: state.settings.theme, - auth: getAuth(state), - }), - boundActions, -)(SettingsScreen);