[NEW] Create Team

app/i18n/locales/en.json

@@ -709,5 +709,12 @@
   "This_room_encryption_has_been_disabled_by__username_": "This room's encryption has been disabled by {{username}}",
   "Teams": "Teams",
   "No_team_channels_found": "No channels found",
-  "Team_not_found": "Team not found"
-}
+  "Team_not_found": "Team not found",
+  "Create_Team": "Create Team",
+  "Team_Name": "Team Name",
+  "Private_Team": "Private Team",
+  "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"
+}

app/lib/methods/loadMessagesForRoom.js

@@ -1,13 +1,20 @@
 import log from '../../utils/log';
 import updateMessages from './updateMessages';
 
-async function load({ rid: roomId, latest, t }) {
-	let params = { roomId, count: 50 };
+async function load({
+	rid: roomId, latest, t, team
+}) {
+	let params = { roomId: roomId || team.roomId, count: 50 };
+	let apiType;
 	if (latest) {
 		params = { ...params, latest: new Date(latest).toISOString() };
 	}
 
-	const apiType = this.roomTypeToApiType(t);
+	if (team.type) {
+		apiType = this.roomTypeToApiType('p');
+	} else {
+		apiType = this.roomTypeToApiType(t);
+	}
 	if (!apiType) {
 		return [];
 	}

app/lib/rocketchat.js

@@ -728,7 +728,24 @@ const RocketChat = {
 			prid, pmid, t_name, reply, users, encrypted
 		});
 	},
-
+	createTeam({
+		name, users, type, readOnly, broadcast, encrypted
+	}) {
+		const params = {
+			name,
+			users,
+			type: type ? 1 : 0,
+			room: {
+				readOnly,
+				extraData: {
+					broadcast,
+					encrypted
+				}
+			}
+		};
+		// RC 3.13.0
+		return this.post('teams.create', params);
+	},
 	joinRoom(roomId, joinCode, type) {
 		// TODO: join code
 		// RC 0.48.0

app/sagas/createChannel.js

@@ -21,6 +21,10 @@ const createGroupChat = function createGroupChat() {
 	return RocketChat.createGroupChat();
 };
 
+const createTeam = function createTeam(data) {
+	return RocketChat.createTeam(data);
+};
+
 const handleRequest = function* handleRequest({ data }) {
 	try {
 		const auth = yield select(state => state.login.isAuthenticated);
@@ -29,7 +33,21 @@ const handleRequest = function* handleRequest({ data }) {
 		}
 
 		let sub;
-		if (data.group) {
+		if (data.isTeam) {
+			const {
+				type,
+				readOnly,
+				broadcast,
+				encrypted
+			} = data;
+			logEvent(events.CR_CREATE, {
+				type,
+				readOnly,
+				broadcast,
+				encrypted
+			});
+			sub = yield call(createTeam, data);
+		} else if (data.group) {
 			logEvent(events.SELECTED_USERS_CREATE_GROUP);
 			const result = yield call(createGroupChat);
 			if (result.success) {
@@ -56,7 +74,7 @@ const handleRequest = function* handleRequest({ data }) {
 			const subCollection = db.get('subscriptions');
 			yield db.action(async() => {
 				await subCollection.create((s) => {
-					s._raw = sanitizedRaw({ id: sub.rid }, subCollection.schema);
+					s._raw = sanitizedRaw({ id: sub.team ? sub.team.roomId : sub.rid }, subCollection.schema);
 					Object.assign(s, sub);
 				});
 			});
@@ -76,12 +94,12 @@ const handleSuccess = function* handleSuccess({ data }) {
 	if (isMasterDetail) {
 		Navigation.navigate('DrawerNavigator');
 	}
-	goRoom({ item: data, isMasterDetail });
+	goRoom({ item: data.team ? data.team : data, isMasterDetail });
 };
 
 const handleFailure = function handleFailure({ err }) {
 	setTimeout(() => {
-		const msg = err.reason || I18n.t('There_was_an_error_while_action', { action: I18n.t('creating_channel') });
+		const msg = err.data ? I18n.t(err.data.error) : err.reason || I18n.t('There_was_an_error_while_action', { action: I18n.t('creating_channel') });
 		showErrorAlert(msg);
 	}, 300);
 };

app/utils/goRoom.js

@@ -9,9 +9,9 @@ const navigate = ({ item, isMasterDetail, ...props }) => {
 	}
 
 	navigationMethod('RoomView', {
-		rid: item.rid,
+		rid: item.roomId || item.rid,
 		name: RocketChat.getRoomTitle(item),
-		t: item.t,
+		t: item.type ? 'p' : item.t,
 		prid: item.prid,
 		room: item,
 		search: item.search,

app/utils/log/events.js

@@ -88,6 +88,7 @@ export default {
 
 	// NEW MESSAGE VIEW
 	NEW_MSG_CREATE_CHANNEL: 'new_msg_create_channel',
+	NEW_MSG_CREATE_TEAM: 'new_msg_create_team',
 	NEW_MSG_CREATE_GROUP_CHAT: 'new_msg_create_group_chat',
 	NEW_MSG_CREATE_DISCUSSION: 'new_msg_create_discussion',
 	NEW_MSG_CHAT_WITH_USER: 'new_msg_chat_with_user',

app/views/CreateChannelView.js

@@ -69,11 +69,12 @@ const styles = StyleSheet.create({
 
 class CreateChannelView extends React.Component {
 	static navigationOptions = () => ({
-		title: I18n.t('Create_Channel')
-	});
+		title: this.isTeam ? I18n.t('Create_Team') : I18n.t('Create_Channel')
+	})
 
 	static propTypes = {
 		navigation: PropTypes.object,
+		route: PropTypes.object,
 		baseUrl: PropTypes.string,
 		create: PropTypes.func.isRequired,
 		removeUser: PropTypes.func.isRequired,
@@ -89,12 +90,17 @@ class CreateChannelView extends React.Component {
 		theme: PropTypes.string
 	};
 
-	state = {
-		channelName: '',
-		type: true,
-		readOnly: false,
-		encrypted: false,
-		broadcast: false
+	constructor(props) {
+		super(props);
+		const { route } = this.props;
+		this.isTeam = route?.params?.isTeam || false;
+		this.state = {
+			channelName: '',
+			type: true,
+			readOnly: false,
+			encrypted: false,
+			broadcast: false
+		};
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -154,7 +160,9 @@ class CreateChannelView extends React.Component {
 		const {
 			channelName, type, readOnly, broadcast, encrypted
 		} = this.state;
-		const { users: usersProps, isFetching, create } = this.props;
+		const {
+			users: usersProps, isFetching, create
+		} = this.props;
 
 		if (!channelName.trim() || isFetching) {
 			return;
@@ -163,9 +171,9 @@ class CreateChannelView extends React.Component {
 		// transform users object into array of usernames
 		const users = usersProps.map(user => user.name);
 
-		// create channel
+		// create channel or team
 		create({
-			name: channelName, users, type, readOnly, broadcast, encrypted
+			name: channelName, users, type, readOnly, broadcast, encrypted, isTeam: this.isTeam
 		});
 
 		Review.pushPositiveEvent();
@@ -197,10 +205,11 @@ class CreateChannelView extends React.Component {
 
 	renderType() {
 		const { type } = this.state;
+
 		return this.renderSwitch({
 			id: 'type',
 			value: type,
-			label: 'Private_Channel',
+			label: this.isTeam ? 'Private_Team' : 'Private_Channel',
 			onValueChange: (value) => {
 				logEvent(events.CR_TOGGLE_TYPE);
 				// If we set the channel as public, encrypted status should be false
@@ -211,10 +220,11 @@ class CreateChannelView extends React.Component {
 
 	renderReadOnly() {
 		const { readOnly, broadcast } = this.state;
+
 		return this.renderSwitch({
 			id: 'readonly',
 			value: readOnly,
-			label: 'Read_Only_Channel',
+			label: this.isTeam ? 'Read_Only_Team' : 'Read_Only_Channel',
 			onValueChange: (value) => {
 				logEvent(events.CR_TOGGLE_READ_ONLY);
 				this.setState({ readOnly: value });
@@ -245,10 +255,11 @@ class CreateChannelView extends React.Component {
 
 	renderBroadcast() {
 		const { broadcast, readOnly } = this.state;
+
 		return this.renderSwitch({
 			id: 'broadcast',
 			value: broadcast,
-			label: 'Broadcast_Channel',
+			label: this.isTeam ? 'Broadcast_Team' : 'Broadcast_Channel',
 			onValueChange: (value) => {
 				logEvent(events.CR_TOGGLE_BROADCAST);
 				this.setState({
@@ -302,7 +313,9 @@ class CreateChannelView extends React.Component {
 
 	render() {
 		const { channelName } = this.state;
-		const { users, isFetching, theme } = this.props;
+		const {
+			users, isFetching, theme
+		} = this.props;
 		const userCount = users.length;
 
 		return (
@@ -312,18 +325,18 @@ class CreateChannelView extends React.Component {
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar />
-				<SafeAreaView testID='create-channel-view'>
+				<SafeAreaView testID={this.isTeam ? 'create-team-view' : 'create-channel-view'}>
 					<ScrollView {...scrollPersistTaps}>
 						<View style={[sharedStyles.separatorVertical, { borderColor: themes[theme].separatorColor }]}>
 							<TextInput
 								autoFocus
 								style={[styles.input, { backgroundColor: themes[theme].backgroundColor }]}
-								label={I18n.t('Channel_Name')}
+								label={this.isTeam ? I18n.t('Team_Name') : I18n.t('Channel_Name')}
 								value={channelName}
 								onChangeText={this.onChangeText}
-								placeholder={I18n.t('Channel_Name')}
+								placeholder={this.isTeam ? I18n.t('Team_Name') : I18n.t('Channel_Name')}
 								returnKeyType='done'
-								testID='create-channel-name'
+								testID={this.isTeam ? 'create-team-name' : 'create-channel-name'}
 								autoCorrect={false}
 								autoCapitalize='none'
 								theme={theme}

app/views/NewMessageView.js

@@ -116,6 +116,12 @@ class NewMessageView extends React.Component {
 		navigation.navigate('SelectedUsersViewCreateChannel', { nextAction: () => navigation.navigate('CreateChannelView') });
 	}
 
+	createTeam = () => {
+		logEvent(events.NEW_MSG_CREATE_TEAM);
+		const { navigation } = this.props;
+		navigation.navigate('SelectedUsersViewCreateChannel', { nextAction: () => navigation.navigate('CreateChannelView', { isTeam: true }) });
+	}
+
 	createGroupChat = () => {
 		logEvent(events.NEW_MSG_CREATE_GROUP_CHAT);
 		const { createChannel, maxUsers, navigation } = this.props;
@@ -172,6 +178,12 @@ class NewMessageView extends React.Component {
 						testID: 'new-message-view-create-channel',
 						first: true
 					})}
+					{this.renderButton({
+						onPress: this.createTeam,
+						title: I18n.t('Create_Team'),
+						icon: 'team',
+						testID: 'new-message-view-create-team'
+					})}
 					{maxUsers > 2 ? this.renderButton({
 						onPress: this.createGroupChat,
 						title: I18n.t('Create_Direct_Messages'),
@@ -253,7 +265,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-	createChannel: params => dispatch(createChannelRequest(params))
+	create: params => dispatch(createChannelRequest(params))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(NewMessageView));

app/views/RoomView/RightButtons.js

@@ -18,7 +18,8 @@ class RightButtonsContainer extends Component {
 		teamId: PropTypes.bool,
 		navigation: PropTypes.object,
 		isMasterDetail: PropTypes.bool,
-		toggleFollowThread: PropTypes.func
+		toggleFollowThread: PropTypes.func,
+		joined: PropTypes.bool
 	};
 
 	constructor(props) {
@@ -163,7 +164,7 @@ class RightButtonsContainer extends Component {
 			isFollowingThread, tunread, tunreadUser, tunreadGroup
 		} = this.state;
 		const {
-			t, tmid, threadsEnabled, teamId
+			t, tmid, threadsEnabled, teamId, joined
 		} = this.props;
 		if (t === 'l') {
 			return null;
@@ -181,7 +182,7 @@ class RightButtonsContainer extends Component {
 		}
 		return (
 			<HeaderButton.Container>
-				{teamId ? (
+				{teamId && joined ? (
 					<HeaderButton.Item
 						iconName='channel-public'
 						onPress={this.goTeamChannels}

app/views/RoomView/index.js

@@ -301,7 +301,7 @@ class RoomView extends React.Component {
 
 	setHeader = () => {
 		const {
-			room, unreadsCount, roomUserId
+			room, unreadsCount, roomUserId, joined
 		} = this.state;
 		const {
 			navigation, isMasterDetail, theme, baseUrl, user, insets, route
@@ -331,7 +331,7 @@ class RoomView extends React.Component {
 		let numIconsRight = 2;
 		if (tmid) {
 			numIconsRight = 1;
-		} else if (teamId) {
+		} else if (teamId && joined) {
 			numIconsRight = 3;
 		}
 		const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight });
@@ -380,6 +380,7 @@ class RoomView extends React.Component {
 					rid={rid}
 					tmid={tmid}
 					teamId={teamId}
+					joined={joined}
 					t={t}
 					navigation={navigation}
 					toggleFollowThread={this.toggleFollowThread}

app/views/SelectedUsersView.js

@@ -50,7 +50,7 @@ class SelectedUsersView extends React.Component {
 	constructor(props) {
 		super(props);
 		this.init();
-
+		this.flatlist = React.createRef();
 		const maxUsers = props.route.params?.maxUsers;
 		this.state = {
 			maxUsers,
@@ -190,9 +190,13 @@ class SelectedUsersView extends React.Component {
 		if (users.length === 0) {
 			return null;
 		}
+		const ITEM_WIDTH = 250;
 		return (
 			<FlatList
 				data={users}
+				ref={ref => this.flatlist = ref}
+				onContentSizeChange={() => this.flatlist.scrollToEnd()}
+				getItemLayout={(_, index) => ({ length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index })}
 				keyExtractor={item => item._id}
 				style={[sharedStyles.separatorTop, { borderColor: themes[theme].separatorColor }]}
 				contentContainerStyle={{ marginVertical: 5 }}