RN-81 RN: Error state for post list (#488)

* RN-81 RN: Error state for post list

* Review feedback

app/components/post_list_retry.js

@@ -0,0 +1,83 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {PropTypes, PureComponent} from 'react';
+import {
+    Platform,
+    StyleSheet,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+import FormattedText from 'app/components/formatted_text';
+import {makeStyleSheetFromTheme} from 'app/utils/theme';
+
+export default class PostListRetry extends PureComponent {
+    static propTypes = {
+        retry: PropTypes.func.isRequired,
+        theme: PropTypes.object.isRequired
+    };
+
+    render() {
+        const {retry, theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        return (
+            <View style={style.container}>
+                <TouchableOpacity
+                    onPress={retry}
+                    style={style.buttonContainer}
+                >
+                    <View style={style.buttonWrapper}>
+                        <Icon
+                            name='md-refresh'
+                            size={50}
+                            style={style.icon}
+                        />
+                    </View>
+                    <FormattedText
+                        id='mobile.post.retry'
+                        defaultMessage='Refresh'
+                        style={style.text}
+                    />
+                </TouchableOpacity>
+            </View>
+        );
+    }
+}
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        buttonContainer: {
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        buttonWrapper: {
+            height: 60,
+            width: 60,
+            borderRadius: 30,
+            backgroundColor: '#ddd',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden'
+        },
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        icon: {
+            color: theme.linkColor,
+            ...Platform.select({
+                ios: {
+                    marginTop: 5
+                }
+            })
+        },
+        text: {
+            marginTop: 15,
+            color: theme.linkColor
+        }
+    });
+});

app/scenes/channel/channel_post_list/channel_post_list.js

@@ -12,6 +12,7 @@ import {Constants, RequestStatus} from 'mattermost-redux/constants';
 
 import ChannelLoader from 'app/components/channel_loader';
 import PostList from 'app/components/post_list';
+import PostListRetry from 'app/components/post_list_retry';
 
 const {View: AnimatedView} = Animated;
 const {height: deviceHeight, width: deviceWidth} = Dimensions.get('window');
@@ -34,7 +35,8 @@ export default class ChannelPostList extends PureComponent {
             getPostsSince: PropTypes.object.isRequired
         }).isRequired,
         posts: PropTypes.array.isRequired,
-        theme: PropTypes.object.isRequired
+        theme: PropTypes.object.isRequired,
+        networkOnline: PropTypes.bool.isRequired
     };
 
     state = {
@@ -116,15 +118,25 @@ export default class ChannelPostList extends PureComponent {
 
     render() {
         const {
+            actions,
             applicationInitializing,
             channel,
             channelIsLoading,
             posts,
             postsRequests,
-            theme
+            theme,
+            networkOnline
         } = this.props;
+
         let component;
-        if (!applicationInitializing && !channelIsLoading && posts && (postsRequests.getPosts.status !== RequestStatus.STARTED || !this.state.didInitialPostsLoad)) {
+        if (!posts.length && channel.total_msg_count > 0 && (postsRequests.getPosts.status === RequestStatus.FAILURE || !networkOnline)) {
+            component = (
+                <PostListRetry
+                    retry={() => actions.loadPostsIfNecessary(channel)}
+                    theme={theme}
+                />
+            );
+        } else if (!applicationInitializing && !channelIsLoading && posts && (postsRequests.getPosts.status !== RequestStatus.STARTED || !this.state.didInitialPostsLoad)) {
             component = (
                 <PostList
                     posts={posts}

app/scenes/channel/channel_post_list/index.js

@@ -74,7 +74,8 @@ function mapStateToProps(state, ownProps) {
         myMember: getCurrentChannelMembership(state),
         postsRequests: state.requests.posts,
         posts: getPostsInCurrentChannelWithReplyProps(state),
-        theme: getTheme(state)
+        theme: getTheme(state),
+        networkOnline: state.offline.online
     };
 }
 

assets/base/i18n/en.json

@@ -1702,6 +1702,7 @@
   "mobile.post.cancel": "Cancel",
   "mobile.post.delete_question": "Are you sure you want to delete this post?",
   "mobile.post.delete_title": "Delete Post",
+  "mobile.post.retry": "Refresh",
   "mobile.request.invalid_response": "Received invalid response from the server.",
   "mobile.routes.channelInfo": "Info",
   "mobile.routes.channelInfo.createdBy": "Created by {creator} on ",