topics: Fix failure to load from offline state.

This fix first checks for the online status in TopicListScreen, and if
found to be online, renders TopicList, which houses all the Redux logic
and the call to Selectors that were originally in TopicListScreen.

Fixes zulip#2310

Author: codebu5ter

src/streams/TopicItem.js

@@ -32,7 +32,7 @@ type Props = {
   isMuted: boolean,
   isSelected: boolean,
   unreadCount: number,
-  onPress: (topic: string, stream: string) => void,
+  onPress: (stream: string, topic: string) => void,
 };
 
 export default class StreamItem extends PureComponent<Props> {

src/topics/TopicList.js

@@ -2,7 +2,11 @@
 import React, { PureComponent } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 
-import type { TopicDetails } from '../types';
+import type { Actions, Stream, TopicDetails } from '../types';
+import connectWithActions from '../connectWithActions';
+import { getStreamEditInitialValues } from '../subscriptions/subscriptionSelectors';
+import { topicNarrow } from '../utils/narrow';
+import { getTopicsInScreen } from '../selectors';
 import TopicItem from '../streams/TopicItem';
 import { LoadingIndicator, SectionSeparatorBetween, SearchEmptyState } from '../common';
 
@@ -14,22 +18,33 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  topics: ?(TopicDetails[]),
-  onPress: (stream: string, topic: string) => void,
+  actions: Actions,
+  stream: Stream,
+  topics: TopicDetails[],
 };
 
-export default class TopicList extends PureComponent<Props> {
+class TopicList extends PureComponent<Props> {
   props: Props;
 
+  componentDidMount() {
+    const { actions, stream } = this.props;
+    actions.fetchTopics(stream.stream_id);
+  }
+
   static defaultProps = {
     showDescriptions: false,
     showSwitch: false,
     selected: false,
     streams: [],
   };
 
+  handlePress = (streamObj: string, topic: string) => {
+    const { actions, stream } = this.props;
+    actions.doNarrow(topicNarrow(stream.name, topic));
+  };
+
   render() {
-    const { topics, onPress } = this.props;
+    const { topics } = this.props;
 
     if (!topics) {
       return <LoadingIndicator size={40} />;
@@ -45,10 +60,15 @@ export default class TopicList extends PureComponent<Props> {
         data={topics}
         keyExtractor={item => item.name}
         renderItem={({ item }) => (
-          <TopicItem name={item.name} isMuted={false} unreadCount={0} onPress={onPress} />
+          <TopicItem name={item.name} isMuted={false} unreadCount={0} onPress={this.handlePress} />
         )}
         SectionSeparatorComponent={SectionSeparatorBetween}
       />
     );
   }
 }
+
+export default connectWithActions(state => ({
+  stream: getStreamEditInitialValues(state),
+  topics: getTopicsInScreen(state),
+}))(TopicList);

src/topics/TopicListScreen.js

@@ -1,45 +1,29 @@
 /* @flow */
 import React, { PureComponent } from 'react';
 
-import type { Actions, Stream, TopicDetails } from '../types';
 import connectWithActions from '../connectWithActions';
-import { Screen } from '../common';
-import { topicNarrow } from '../utils/narrow';
-import { getTopicsInScreen } from '../selectors';
-import { getStreamEditInitialValues } from '../subscriptions/subscriptionSelectors';
+import { LoadingIndicator, Screen } from '../common';
+import { getSession } from '../selectors';
 import TopicList from './TopicList';
 
 type Props = {
-  actions: Actions,
-  stream: Stream,
-  topics: TopicDetails[],
+  isOnline: boolean,
 };
 
 class TopicListScreen extends PureComponent<Props> {
   props: Props;
 
-  componentDidMount() {
-    const { actions, stream } = this.props;
-    actions.fetchTopics(stream.stream_id);
-  }
-
-  handlePress = (streamObj: string, topic: string) => {
-    const { actions, stream } = this.props;
-    actions.doNarrow(topicNarrow(stream.name, topic));
-  };
-
   render() {
-    const { topics } = this.props;
+    const { isOnline } = this.props;
 
     return (
       <Screen title="Topics" padding>
-        <TopicList topics={topics} onPress={this.handlePress} />
+        {isOnline ? <TopicList /> : <LoadingIndicator size={40} />}
       </Screen>
     );
   }
 }
 
 export default connectWithActions(state => ({
-  stream: getStreamEditInitialValues(state),
-  topics: getTopicsInScreen(state),
+  isOnline: getSession(state).isOnline,
 }))(TopicListScreen);