From 4b3bc57643a1cb5b4ab9156b1bca5bc9569be734 Mon Sep 17 00:00:00 2001
From: enahum <nahumhbl@gmail.com>
Date: Tue, 20 Feb 2018 20:41:17 -0300
Subject: [PATCH] [MM-9626 & MM-9627] iOS share fixes (#1446)

* MM-9627 Fix keyboard dismissal when searching for channels

* MM-9626 Use TableView for team listing
---
 share_extension/ios/extension_channels.js  | 15 +++--
 share_extension/ios/extension_post.js      | 15 ++++-
 share_extension/ios/extension_team_item.js | 26 ++++----
 share_extension/ios/extension_teams.js     | 71 +++++++++++-----------
 4 files changed, 71 insertions(+), 56 deletions(-)

diff --git a/share_extension/ios/extension_channels.js b/share_extension/ios/extension_channels.js
index cecaa9308..73c3252e3 100644
--- a/share_extension/ios/extension_channels.js
+++ b/share_extension/ios/extension_channels.js
@@ -95,12 +95,15 @@ export default class ExtensionChannels extends PureComponent {
         this.setState({sections});
     };
 
+    cancelSearch = () => {
+        this.setState({term: ''});
+        this.buildSections();
+    };
+
     goBack = () => {
         this.props.navigator.pop();
     };
 
-    keyExtractor = (item) => item.id;
-
     loadChannels = async () => {
         try {
             const {entities, teamId} = this.props;
@@ -191,9 +194,9 @@ export default class ExtensionChannels extends PureComponent {
                 headerTextColor={changeOpacity(theme.centerChannelColor, 0.6)}
                 style={styles.flex}
             >
-                <TableView.Section>
+                <TableView.Header>
                     <TableView.Cell>{this.renderSearchBar(styles)}</TableView.Cell>
-                </TableView.Section>
+                </TableView.Header>
                 {this.renderSections()}
             </TableView>
         );
@@ -217,6 +220,7 @@ export default class ExtensionChannels extends PureComponent {
                     tintColorDelete={changeOpacity(theme.centerChannelColor, 0.3)}
                     titleCancelColor={theme.linkColor}
                     onChangeText={this.handleSearch}
+                    onCancelButtonPress={this.cancelSearch}
                     value={this.state.term}
                 />
             </View>
@@ -314,7 +318,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         searchContainer: {
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
-            paddingBottom: 2
+            paddingBottom: 2,
+            paddingHorizontal: 5
         },
         searchBarInput: {
             backgroundColor: '#fff',
diff --git a/share_extension/ios/extension_post.js b/share_extension/ios/extension_post.js
index f4664a7f0..0e20ed75b 100644
--- a/share_extension/ios/extension_post.js
+++ b/share_extension/ios/extension_post.js
@@ -513,7 +513,7 @@ export default class ExtensionPost extends PureComponent {
     };
 
     selectTeam = (team, channel) => {
-        this.setState({channel, team});
+        this.setState({channel, team, error: null});
 
         // Update the channels for the team
         Client4.getMyChannels(team.id).then((channels) => {
@@ -523,7 +523,18 @@ export default class ExtensionPost extends PureComponent {
                 this.setState({channel: defaultChannel});
             }
         }).catch((error) => {
-            this.setState({error});
+            const {entities} = this.props;
+            if (entities.channels.channelsInTeam[team.id]) {
+                const townSquare = Object.values(entities.channels.channels).find((c) => {
+                    return c.name === General.DEFAULT_CHANNEL && c.team_id === team.id;
+                });
+
+                if (!channel) {
+                    this.setState({channel: townSquare});
+                }
+            } else {
+                this.setState({error});
+            }
         });
     };
 
diff --git a/share_extension/ios/extension_team_item.js b/share_extension/ios/extension_team_item.js
index c09d5e4bf..744f5eaa3 100644
--- a/share_extension/ios/extension_team_item.js
+++ b/share_extension/ios/extension_team_item.js
@@ -8,7 +8,6 @@ import {
     TouchableHighlight,
     View
 } from 'react-native';
-import IonIcon from 'react-native-vector-icons/Ionicons';
 
 import {wrapWithPreventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@@ -34,18 +33,6 @@ export default class TeamsListItem extends React.PureComponent {
         } = this.props;
         const styles = getStyleSheet(theme);
 
-        let current;
-        if (team.id === currentTeamId) {
-            current = (
-                <View style={styles.checkmarkContainer}>
-                    <IonIcon
-                        name='md-checkmark'
-                        style={styles.checkmark}
-                    />
-                </View>
-            );
-        }
-
         const icon = (
             <View style={styles.iconContainer}>
                 <Text style={styles.icon}>
@@ -54,10 +41,18 @@ export default class TeamsListItem extends React.PureComponent {
             </View>
         );
 
+        const wrapperStyle = [styles.wrapper];
+        if (team.id === currentTeamId) {
+            wrapperStyle.push({
+                width: '90%'
+            });
+        }
+
         return (
             <TouchableHighlight
                 underlayColor={changeOpacity(theme.sidebarTextHoverBg, 0.5)}
                 onPress={this.onPress}
+                style={styles.wrapper}
             >
                 <View style={styles.container}>
                     <View style={styles.item}>
@@ -69,7 +64,6 @@ export default class TeamsListItem extends React.PureComponent {
                         >
                             {team.display_name}
                         </Text>
-                        {current}
                     </View>
                 </View>
             </TouchableHighlight>
@@ -79,6 +73,10 @@ export default class TeamsListItem extends React.PureComponent {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
+        wrapper: {
+            height: 45,
+            width: '100%'
+        },
         container: {
             flex: 1,
             flexDirection: 'row',
diff --git a/share_extension/ios/extension_teams.js b/share_extension/ios/extension_teams.js
index 485b46740..8455df644 100644
--- a/share_extension/ios/extension_teams.js
+++ b/share_extension/ios/extension_teams.js
@@ -3,9 +3,10 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+import {ActivityIndicator, Text, View} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import {intlShape} from 'react-intl';
+import TableView from 'react-native-tableview';
 
 import {General} from 'mattermost-redux/constants';
 import {getChannelsInTeam} from 'mattermost-redux/selectors/entities/channels';
@@ -49,8 +50,6 @@ export default class ExtensionTeams extends PureComponent {
         this.goBack();
     };
 
-    keyExtractor = (item) => item.id;
-
     loadTeams = async () => {
         try {
             const defaultChannels = {};
@@ -85,6 +84,7 @@ export default class ExtensionTeams extends PureComponent {
     };
 
     renderBody = (styles) => {
+        const {theme} = this.props;
         const {error, myTeams} = this.state;
 
         if (error) {
@@ -106,43 +106,44 @@ export default class ExtensionTeams extends PureComponent {
         }
 
         return (
-            <FlatList
-                data={myTeams}
-                ItemSeparatorComponent={this.renderItemSeparator}
-                renderItem={this.renderItem}
-                keyExtractor={this.keyExtractor}
-                keyboardShouldPersistTaps='always'
-                keyboardDismissMode='on-drag'
-                initialNumToRender={10}
-                maxToRenderPerBatch={10}
-                scrollEventThrottle={100}
-                windowSize={5}
-            />
+            <TableView
+                tableViewStyle={TableView.Consts.Style.Plain}
+                tableViewCellStyle={TableView.Consts.CellStyle.Default}
+                separatorColor={changeOpacity(theme.centerChannelColor, 0.5)}
+                tintColor={theme.linkColor}
+                detailFontSize={16}
+                detailTextColor={theme.centerChannelColor}
+                headerFontSize={15}
+                headerTextColor={changeOpacity(theme.centerChannelColor, 0.6)}
+                style={styles.flex}
+            >
+                <TableView.Section>
+                    {this.renderItems(myTeams)}
+                </TableView.Section>
+            </TableView>
         );
     };
 
-    renderItem = ({item}) => {
+    renderItems = (myTeams) => {
         const {currentTeamId, theme} = this.props;
 
-        return (
-            <ExtensionTeamItem
-                currentTeamId={currentTeamId}
-                onSelectTeam={this.handleSelectTeam}
-                team={item}
-                theme={theme}
-            />
-        );
-    };
-
-    renderItemSeparator = () => {
-        const {theme} = this.props;
-        const styles = getStyleSheet(theme);
-
-        return (
-            <View style={styles.separatorContainer}>
-                <View style={styles.separator}/>
-            </View>
-        );
+        return myTeams.map((team) => {
+            return (
+                <TableView.Cell
+                    key={team.id}
+                    selected={team.id === currentTeamId}
+                >
+                    <View>
+                        <ExtensionTeamItem
+                            currentTeamId={currentTeamId}
+                            onSelectTeam={this.handleSelectTeam}
+                            team={team}
+                            theme={theme}
+                        />
+                    </View>
+                </TableView.Cell>
+            );
+        });
     };
 
     sortDisplayName = (a, b) => {