From 0cf173d7bafc1a4c5be3e514141ec4606cbd025b Mon Sep 17 00:00:00 2001
From: Gerzon Z <gerzonzcanario@gmail.com>
Date: Mon, 26 Apr 2021 14:06:22 -0400
Subject: [PATCH] Added AddChannelTeamView

---
 app/i18n/locales/en.json        |   5 +-
 app/stacks/InsideStack.js       |   6 ++
 app/views/AddChannelTeamView.js | 123 ++++++++++++++++++++++++++++++++
 app/views/TeamChannelsView.js   |   3 +-
 4 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 app/views/AddChannelTeamView.js

diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index 58438f319..06e3167eb 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -716,5 +716,8 @@
   "Read_Only_Team": "Read Only Team",
   "Broadcast_Team": "Broadcast Team",
   "creating_team" : "creating team",
-  "team-name-already-exists": "A team with that name already exists"
+  "team-name-already-exists": "A team with that name already exists",
+  "Add_Channel_to_Team": "Add Channel to Team",
+  "Create_New": "Create New",
+  "Add_Existing": "Add Existing"
 }
diff --git a/app/stacks/InsideStack.js b/app/stacks/InsideStack.js
index bda56f0d2..9052b1310 100644
--- a/app/stacks/InsideStack.js
+++ b/app/stacks/InsideStack.js
@@ -71,6 +71,7 @@ import ShareView from '../views/ShareView';
 import CreateDiscussionView from '../views/CreateDiscussionView';
 
 import QueueListView from '../ee/omnichannel/views/QueueListView';
+import AddChannelTeamView from '../views/AddChannelTeamView';
 
 // ChatsStackNavigator
 const ChatsStack = createStackNavigator();
@@ -174,6 +175,11 @@ const ChatsStackNavigator = () => {
 				component={TeamChannelsView}
 				options={TeamChannelsView.navigationOptions}
 			/>
+			<ChatsStack.Screen
+				name='AddChannelTeamView'
+				component={AddChannelTeamView}
+				options={AddChannelTeamView.navigationOptions}
+			/>
 			<ChatsStack.Screen
 				name='MarkdownTableView'
 				component={MarkdownTableView}
diff --git a/app/views/AddChannelTeamView.js b/app/views/AddChannelTeamView.js
new file mode 100644
index 000000000..02a30db18
--- /dev/null
+++ b/app/views/AddChannelTeamView.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { HeaderBackButton } from '@react-navigation/stack';
+
+import sharedStyles from './Styles';
+import { CustomIcon } from '../lib/Icons';
+import Touch from '../utils/touch';
+import StatusBar from '../containers/StatusBar';
+import RoomHeader from '../containers/RoomHeader';
+import { withTheme } from '../theme';
+import * as HeaderButton from '../containers/HeaderButton';
+import SafeAreaView from '../containers/SafeAreaView';
+import { withDimensions } from '../dimensions';
+import { themes } from '../constants/colors';
+import I18n from '../i18n';
+
+const styles = StyleSheet.create({
+	button: {
+		height: 46,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	buttonIcon: {
+		marginLeft: 18,
+		marginRight: 16
+	},
+	buttonText: {
+		fontSize: 17,
+		...sharedStyles.textRegular
+	},
+	buttonContainer: {
+		paddingVertical: 25
+	}
+});
+
+class AddChannelTeamView extends React.Component {
+	constructor(props) {
+		super(props);
+		this.teamId = props.route.params?.teamId;
+		this.setHeader();
+	}
+
+	setHeader = () => {
+		const { navigation, isMasterDetail, theme } = this.props;
+
+		const options = {
+			headerShown: true,
+			headerTitleAlign: 'center',
+			headerTitle: () => (
+				<RoomHeader title={I18n.t('Add_Channel_to_Team')} />
+			)
+		};
+
+		if (isMasterDetail) {
+			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
+		} else {
+			options.headerLeft = () => (
+				<HeaderBackButton
+					labelVisible={false}
+					onPress={() => navigation.pop()}
+					tintColor={themes[theme].headerTintColor}
+				/>
+			);
+		}
+
+		navigation.setOptions(options);
+	}
+
+	renderButton = ({
+		onPress, testID, title, icon, first
+	}) => {
+		const { theme } = this.props;
+
+		return (
+			<Touch
+				onPress={() => onPress()}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
+				testID={testID}
+				theme={theme}
+			>
+				<View style={[first ? sharedStyles.separatorVertical : sharedStyles.separatorBottom, styles.button, { borderColor: themes[theme].separatorColor }]}>
+					<CustomIcon style={[styles.buttonIcon, { color: themes[theme].tintColor }]} size={24} name={icon} />
+					<Text style={[styles.buttonText, { color: themes[theme].tintColor }]}>{title}</Text>
+				</View>
+			</Touch>
+		);
+	}
+
+	render() {
+		const { navigation } = this.props;
+
+		return (
+			<SafeAreaView testID='add-channel-team-view'>
+				<StatusBar />
+				<View style={styles.buttonContainer}>
+					{this.renderButton({
+						onPress: navigation.navigate('NewMessageStackNavigator', { screen: 'CreateChannelView', isTeam: false }),
+						title: I18n.t('Create_New'),
+						icon: 'channel-public',
+						testID: 'add-channel-team-view-create-channel',
+						first: true
+					})}
+					{this.renderButton({
+						// onPress: navigation.navigate('AddExistingChannelView'),
+						title: I18n.t('Add_Existing'),
+						icon: 'team',
+						testID: 'add-channel-team-view-create-channel'
+					})}
+				</View>
+			</SafeAreaView>
+		);
+	}
+}
+
+AddChannelTeamView.propTypes = {
+	route: PropTypes.object,
+	navigation: PropTypes.object,
+	isMasterDetail: PropTypes.bool,
+	theme: PropTypes.string
+};
+
+export default withDimensions(withTheme(AddChannelTeamView));
diff --git a/app/views/TeamChannelsView.js b/app/views/TeamChannelsView.js
index 15724ab5c..83c206298 100644
--- a/app/views/TeamChannelsView.js
+++ b/app/views/TeamChannelsView.js
@@ -146,7 +146,7 @@ class TeamChannelsView extends React.Component {
 			return;
 		}
 
-		const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 });
+		const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 2 });
 
 		if (isSearching) {
 			return {
@@ -201,6 +201,7 @@ class TeamChannelsView extends React.Component {
 		options.headerRight = () => (
 			<HeaderButton.Container>
 				<HeaderButton.Item iconName='search' onPress={this.onSearchPress} />
+				<HeaderButton.Item iconName='create' onPress={() => navigation.navigate('AddChannelTeamView')} />
 			</HeaderButton.Container>
 		);
 		return options;