PLT-6038 & PLT-6032 Bug fixes in post list and create channel (#397)

* * Fix post list to gracefully fail image previews
* Do not to fetch multiple times the same posts with infinite scroll
* Fix create private channel

* move react-native orientation to own fork

app/actions/navigation/index.js

@@ -95,9 +95,11 @@ export function goToCreateChannel(channelType) {
 
         dispatch({
             type,
-            route,
-            props: {
-                channelType
+            route: {
+                ...route,
+                props: {
+                    channelType
+                }
             }
         }, getState);
     };

app/components/file_attachment_list/file_attachment_preview.js

@@ -15,6 +15,8 @@ import {
 
 import Client from 'mattermost-redux/client';
 
+import imageIcon from 'assets/images/icons/image.png';
+
 const {View: AnimatedView} = Animated;
 
 export default class FileAttachmentPreview extends PureComponent {
@@ -47,7 +49,7 @@ export default class FileAttachmentPreview extends PureComponent {
         opacity: new Animated.Value(0),
         requesting: true,
         retry: 0
-    }
+    };
 
     // Sometimes the request after a file upload errors out.
     // We'll up to three times to get the image.
@@ -55,11 +57,11 @@ export default class FileAttachmentPreview extends PureComponent {
     handleLoadError = () => {
         if (this.state.retry < 3) {
             this.setState({
-                retry: this.state.retry++,
+                retry: (this.state.retry + 1),
                 timestamp: Date.now()
             });
         }
-    }
+    };
 
     handleLoad = () => {
         this.setState({
@@ -72,13 +74,13 @@ export default class FileAttachmentPreview extends PureComponent {
         }).start(() => {
             this.props.addFileToFetchCache(Client.getFilePreviewUrl(this.props.file.id, this.state.timestamp));
         });
-    }
+    };
 
     handleLoadStart = () => {
         this.setState({
             requesting: true
         });
-    }
+    };
 
     render() {
         const {
@@ -93,7 +95,10 @@ export default class FileAttachmentPreview extends PureComponent {
             wrapperWidth
         } = this.props;
 
-        const source = file.id ? {uri: Client.getFilePreviewUrl(file.id, this.state.timestamp)} : {};
+        let source = file.id ? {uri: Client.getFilePreviewUrl(file.id, this.state.timestamp)} : {};
+        if (this.state.retry === 3) {
+            source = imageIcon;
+        }
 
         const isInFetchCache = fetchCache[source.uri];
         const imageComponentLoaders = {

app/components/post_list/post_list.js

@@ -134,9 +134,11 @@ export default class PostList extends Component {
                 dataSource={this.state.dataSource.cloneWithRows(this.getPostsWithLoadMore())}
                 renderRow={this.renderRow}
                 onEndReached={this.loadMore}
-                renderSectionHeader={this.renderSectionHeader}
                 enableEmptySections={true}
                 showsVerticalScrollIndicator={false}
+                initialListSize={30}
+                onEndReachedThreshold={200}
+                pageSize={10}
             />
         );
     }

app/scenes/channel/channel_post_list/channel_post_list.js

@@ -16,6 +16,7 @@ export default class ChannelPostList extends PureComponent {
             goToThread: PropTypes.func.isRequired
         }).isRequired,
         channel: PropTypes.object.isRequired,
+        currentTeamId: PropTypes.string.isRequired,
         myMember: PropTypes.object.isRequired,
         postsRequests: PropTypes.shape({
             getPosts: PropTypes.object.isRequired,
@@ -69,12 +70,19 @@ export default class ChannelPostList extends PureComponent {
     }
 
     loadMorePosts = () => {
-        const {channel, posts} = this.props;
+        const {currentTeamId, channel, posts, postsRequests} = this.props;
         const {team_id: teamId, id: channelId} = channel;
         const oldestPost = posts[posts.length - 1];
         const {didInitialPostsLoad, hasFirstPost} = this.state;
-        if (didInitialPostsLoad && !hasFirstPost && oldestPost) {
-            return this.props.actions.getPostsBefore(teamId, channelId, oldestPost.id);
+        if (didInitialPostsLoad && !hasFirstPost && oldestPost && postsRequests.getPostsBefore.status !== RequestStatus.STARTED) {
+            let postsForTeamId = teamId;
+            switch (channel.type) {
+            case Constants.DM_CHANNEL:
+            case Constants.GM_CHANNEL:
+                postsForTeamId = currentTeamId;
+                break;
+            }
+            return this.props.actions.getPostsBefore(postsForTeamId, channelId, oldestPost.id);
         }
         return null;
     };

app/scenes/channel/channel_post_list/channel_post_list_container.js

@@ -11,6 +11,7 @@ import {getPostsBefore} from 'mattermost-redux/actions/posts';
 
 import {getAllPosts, getPostsInCurrentChannel} from 'mattermost-redux/selectors/entities/posts';
 import {getCurrentChannelMembership} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 
 import ChannelPostList from './channel_post_list';
 
@@ -67,6 +68,7 @@ const getPostsInCurrentChannelWithReplyProps = createSelector(
 function mapStateToProps(state, ownProps) {
     return {
         ...ownProps,
+        currentTeamId: getCurrentTeamId(state),
         myMember: getCurrentChannelMembership(state),
         postsRequests: state.requests.posts,
         posts: getPostsInCurrentChannelWithReplyProps(state)

app/scenes/create_channel/create_channel.js

@@ -179,7 +179,7 @@ class CreateChannel extends PureComponent {
         this.nameInput.refs.wrappedInstance.blur();
         this.purposeInput.refs.wrappedInstance.blur();
         this.headerInput.refs.wrappedInstance.blur();
-        this.refs.scroll.scrollToPosition(0, 0, true);
+        this.scroll.scrollToPosition(0, 0, true);
     };
 
     channelNameRef = (ref) => {

package.json

@@ -24,7 +24,7 @@
     "react-native-keyboard-spacer": "0.3.1",
     "react-native-linear-gradient": "2.0.0",
     "react-native-message-bar": "1.6.0",
-    "react-native-orientation": "git+https://github.com/BonifyByForteil/react-native-orientation.git#newRN",
+    "react-native-orientation": "enahum/react-native-orientation.git",
     "react-native-push-notification": "2.2.1",
     "react-native-search-bar": "enahum/react-native-search-bar.git",
     "react-native-svg": "4.5.0",