Rocket.Chat.ReactNative/app/views/NewMessageView.tsx

import { Q } from '@nozbe/watermelondb';
import { StackNavigationOptions } from '@react-navigation/stack';
import { dequal } from 'dequal';
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';

import { createChannelRequest } from '../actions/createChannel';
import { themes } from '../lib/constants';
import * as HeaderButton from '../containers/HeaderButton';
import * as List from '../containers/List';
import SafeAreaView from '../containers/SafeAreaView';
import SearchBox from '../containers/SearchBox';
import StatusBar from '../containers/StatusBar';
import { IApplicationState, IBaseScreen, ISearch, TSubscriptionModel } from '../definitions';
import I18n from '../i18n';
import database from '../lib/database';
import { CustomIcon, TIconsName } from '../containers/CustomIcon';
import Navigation from '../lib/navigation/appNavigation';
import UserItem from '../containers/UserItem';
import { withTheme } from '../theme';
import { goRoom, TGoRoomItem } from '../lib/methods/helpers/goRoom';
import log, { events, logEvent } from '../lib/methods/helpers/log';
import Touch from '../containers/Touch';
import sharedStyles from './Styles';
import { NewMessageStackParamList } from '../stacks/types';
import { search } from '../lib/methods';
import { hasPermission, compareServerVersion } from '../lib/methods/helpers';

const QUERY_SIZE = 50;

const styles = StyleSheet.create({
	button: {
		height: 46,
		flexDirection: 'row',
		alignItems: 'center'
	},
	buttonIcon: {
		marginLeft: 18,
		marginRight: 16
	},
	buttonText: {
		fontSize: 17,
		...sharedStyles.textRegular
	},
	buttonContainer: {
		paddingBottom: 16
	}
});

interface IButton {
	onPress: () => void;
	testID: string;
	title: string;
	icon: TIconsName;
	first?: boolean;
}

interface INewMessageViewState {
	search: (ISearch | TSubscriptionModel)[];
	chats: TSubscriptionModel[];
	permissions: boolean[];
}

interface INewMessageViewProps extends IBaseScreen<NewMessageStackParamList, 'NewMessageView'> {
	maxUsers: number;
	isMasterDetail: boolean;
	serverVersion: string;
	createTeamPermission?: string[];
	createDirectMessagePermission?: string[];
	createPublicChannelPermission?: string[];
	createPrivateChannelPermission?: string[];
	createDiscussionPermission?: string[];
}

class NewMessageView extends React.Component<INewMessageViewProps, INewMessageViewState> {
	static navigationOptions = ({ navigation }: INewMessageViewProps): StackNavigationOptions => ({
		headerLeft: () => <HeaderButton.CloseModal navigation={navigation} testID='new-message-view-close' />,
		title: I18n.t('New_Message')
	});

	constructor(props: INewMessageViewProps) {
		super(props);
		this.init();
		this.state = {
			search: [],
			chats: [],
			permissions: []
		};
	}

	// eslint-disable-next-line react/sort-comp
	init = async () => {
		try {
			const db = database.active;
			const chats = await db
				.get('subscriptions')
				.query(Q.where('t', 'd'), Q.experimentalTake(QUERY_SIZE), Q.experimentalSortBy('room_updated_at', Q.desc))
				.fetch();

			this.setState({ chats });
		} catch (e) {
			log(e);
		}
	};

	componentDidMount() {
		this.handleHasPermission();
	}

	componentDidUpdate(prevProps: INewMessageViewProps) {
		const {
			createTeamPermission,
			createPublicChannelPermission,
			createPrivateChannelPermission,
			createDirectMessagePermission,
			createDiscussionPermission
		} = this.props;

		if (
			!dequal(createTeamPermission, prevProps.createTeamPermission) ||
			!dequal(createPublicChannelPermission, prevProps.createPublicChannelPermission) ||
			!dequal(createPrivateChannelPermission, prevProps.createPrivateChannelPermission) ||
			!dequal(createDirectMessagePermission, prevProps.createDirectMessagePermission) ||
			!dequal(createDiscussionPermission, prevProps.createDiscussionPermission)
		) {
			this.handleHasPermission();
		}
	}

	handleSearch = async (text: string) => {
		const result = (await search({ text, filterRooms: false })) as ISearch[];
		this.setState({
			search: result
		});
	};

	onSearchChangeText(text: string) {
		this.handleSearch(text);
	}

	dismiss = () => {
		const { navigation } = this.props;
		return navigation.pop();
	};

	createChannel = () => {
		logEvent(events.NEW_MSG_CREATE_CHANNEL);
		const { navigation } = this.props;
		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 { dispatch, maxUsers, navigation } = this.props;
		navigation.navigate('SelectedUsersViewCreateChannel', {
			nextAction: () => dispatch(createChannelRequest({ group: true })),
			buttonText: I18n.t('Create'),
			maxUsers
		});
	};

	goRoom = (item: TGoRoomItem) => {
		logEvent(events.NEW_MSG_CHAT_WITH_USER);
		const { isMasterDetail, navigation } = this.props;
		if (isMasterDetail) {
			navigation.pop();
		}
		goRoom({ item, isMasterDetail });
	};

	renderButton = ({ onPress, testID, title, icon, first }: IButton) => {
		const { theme } = this.props;
		return (
			<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}>
				<View
					style={[
						first ? sharedStyles.separatorVertical : sharedStyles.separatorBottom,
						styles.button,
						{ borderColor: themes[theme].separatorColor }
					]}
				>
					<CustomIcon name={icon} size={24} color={themes[theme].tintColor} style={styles.buttonIcon} />
					<Text style={[styles.buttonText, { color: themes[theme].tintColor }]}>{title}</Text>
				</View>
			</Touch>
		);
	};

	createDiscussion = () => {
		logEvent(events.NEW_MSG_CREATE_DISCUSSION);
		Navigation.navigate('CreateDiscussionView');
	};

	handleHasPermission = async () => {
		const {
			createTeamPermission,
			createDirectMessagePermission,
			createPublicChannelPermission,
			createPrivateChannelPermission,
			createDiscussionPermission
		} = this.props;
		const permissions = [
			createPublicChannelPermission,
			createPrivateChannelPermission,
			createTeamPermission,
			createDirectMessagePermission,
			createDiscussionPermission
		];
		const permissionsToCreate = await hasPermission(permissions);
		this.setState({ permissions: permissionsToCreate });
	};

	renderHeader = () => {
		const { maxUsers, theme, serverVersion } = this.props;
		const { permissions } = this.state;

		return (
			<View style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
				<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='new-message-view-search' />
				<View style={styles.buttonContainer}>
					{permissions[0] || permissions[1]
						? this.renderButton({
								onPress: this.createChannel,
								title: I18n.t('Create_Channel'),
								icon: 'channel-public',
								testID: 'new-message-view-create-channel',
								first: true
						  })
						: null}
					{compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.13.0') && permissions[2]
						? this.renderButton({
								onPress: this.createTeam,
								title: I18n.t('Create_Team'),
								icon: 'teams',
								testID: 'new-message-view-create-team'
						  })
						: null}
					{maxUsers > 2 && permissions[3]
						? this.renderButton({
								onPress: this.createGroupChat,
								title: I18n.t('Create_Direct_Messages'),
								icon: 'message',
								testID: 'new-message-view-create-direct-message'
						  })
						: null}
					{permissions[4]
						? this.renderButton({
								onPress: this.createDiscussion,
								title: I18n.t('Create_Discussion'),
								icon: 'discussions',
								testID: 'new-message-view-create-discussion'
						  })
						: null}
				</View>
			</View>
		);
	};

	renderItem = ({ item, index }: { item: ISearch | TSubscriptionModel; index: number }) => {
		const { search, chats } = this.state;
		const { theme } = this.props;

		let style = { borderColor: themes[theme].separatorColor };
		if (index === 0) {
			style = { ...style, ...sharedStyles.separatorTop };
		}
		if (search.length > 0 && index === search.length - 1) {
			style = { ...style, ...sharedStyles.separatorBottom };
		}
		if (search.length === 0 && index === chats.length - 1) {
			style = { ...style, ...sharedStyles.separatorBottom };
		}

		const itemSearch = item as ISearch;
		const itemModel = item as TSubscriptionModel;

		return (
			<UserItem
				name={itemSearch.search ? itemSearch.name : itemModel.fname || ''}
				username={itemSearch.search ? itemSearch.username : itemModel.name}
				onPress={() => this.goRoom(itemModel)}
				testID={`new-message-view-item-${item.name}`}
				style={style}
				theme={theme}
			/>
		);
	};

	renderList = () => {
		const { search, chats } = this.state;
		const { theme } = this.props;
		return (
			<FlatList
				data={search.length > 0 ? search : chats}
				extraData={this.state}
				keyExtractor={item => item._id || item.rid}
				ListHeaderComponent={this.renderHeader}
				renderItem={this.renderItem}
				ItemSeparatorComponent={List.Separator}
				contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
				keyboardShouldPersistTaps='always'
			/>
		);
	};

	render() {
		return (
			<SafeAreaView testID='new-message-view'>
				<StatusBar />
				{this.renderList()}
			</SafeAreaView>
		);
	}
}

const mapStateToProps = (state: IApplicationState) => ({
	serverVersion: state.server.version as string,
	isMasterDetail: state.app.isMasterDetail,
	maxUsers: (state.settings.DirectMesssage_maxUsers as number) || 1,
	createTeamPermission: state.permissions['create-team'],
	createDirectMessagePermission: state.permissions['create-d'],
	createPublicChannelPermission: state.permissions['create-c'],
	createPrivateChannelPermission: state.permissions['create-p'],
	createDiscussionPermission: state.permissions['start-discussion']
});

export default connect(mapStateToProps)(withTheme(NewMessageView));