Rocket.Chat.ReactNative/app/views/RoomsListView/index.js

import React from 'react';
import PropTypes from 'prop-types';
import { Platform, View, TextInput, FlatList, BackHandler, ActivityIndicator, SafeAreaView, Text, Image, Dimensions, ScrollView, Keyboard } from 'react-native';
import { connect } from 'react-redux';
import { isEqual } from 'lodash';

import database from '../../lib/realm';
import RocketChat from '../../lib/rocketchat';
import RoomItem from '../../presentation/RoomItem';
import styles from './styles';
import LoggedView from '../View';
import log from '../../utils/log';
import I18n from '../../i18n';
import SortDropdown from './SortDropdown';
import ServerDropdown from './ServerDropdown';
import Touch from '../../utils/touch';
import { toggleSortDropdown } from '../../actions/rooms';

const ROW_HEIGHT = 70;

const isAndroid = () => Platform.OS === 'android';
const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
const leftButtons = [{
	id: 'settings',
	icon: { uri: 'settings', scale: Dimensions.get('window').scale },
	testID: 'rooms-list-view-sidebar'
}];
const rightButtons = [{
	id: 'createChannel',
	icon: { uri: 'new_channel', scale: Dimensions.get('window').scale },
	testID: 'rooms-list-view-create-channel'
}];

if (Platform.OS === 'android') {
	rightButtons.push({
		id: 'search',
		icon: { uri: 'search', scale: Dimensions.get('window').scale }
	});
}


@connect((state) => {
	let result = {
		userId: state.login.user && state.login.user.id,
		server: state.server.server,
		Site_Url: state.settings.Site_Url,
		searchText: state.rooms.searchText,
		loadingServer: state.server.loading,
		showServerDropdown: state.rooms.showServerDropdown,
		showSortDropdown: state.rooms.showSortDropdown,
		sidebarSortby: null,
		sidebarGroupByType: null,
		sidebarShowFavorites: null,
		sidebarShowUnread: null
	};
	if (state.login && state.login.user && state.login.user.settings && state.login.user.settings.preferences) {
		result = {
			...result,
			sidebarSortby: state.login.user.settings.preferences.sidebarSortby,
			sidebarGroupByType: state.login.user.settings.preferences.sidebarGroupByType,
			sidebarShowFavorites: state.login.user.settings.preferences.sidebarShowFavorites,
			sidebarShowUnread: state.login.user.settings.preferences.sidebarShowUnread
		};
	}
	return result;
}, dispatch => ({
	toggleSortDropdown: () => dispatch(toggleSortDropdown())
}))
/** @extends React.Component */
export default class RoomsListView extends LoggedView {
	static navigatorButtons = {
		leftButtons, rightButtons
	}

	static navigatorStyle = {
		navBarCustomView: 'RoomsListHeaderView',
		navBarComponentAlignment: 'fill',
		navBarBackgroundColor: isAndroid() ? '#2F343D' : undefined,
		navBarTextColor: isAndroid() ? '#FFF' : undefined,
		navBarButtonColor: isAndroid() ? '#FFF' : undefined
	}

	static propTypes = {
		navigator: PropTypes.object,
		userId: PropTypes.string,
		Site_Url: PropTypes.string,
		server: PropTypes.string,
		searchText: PropTypes.string,
		loadingServer: PropTypes.bool,
		showServerDropdown: PropTypes.bool,
		showSortDropdown: PropTypes.bool,
		sidebarSortby: PropTypes.string,
		sidebarGroupByType: PropTypes.bool,
		sidebarShowFavorites: PropTypes.bool,
		sidebarShowUnread: PropTypes.bool,
		toggleSortDropdown: PropTypes.func
	}

	constructor(props) {
		super('RoomsListView', props);

		this.state = {
			search: [],
			loading: true,
			chats: [],
			unread: [],
			favorites: [],
			channels: [],
			privateGroup: [],
			direct: [],
			livechat: []
		};
		props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
	}

	componentWillMount() {
		this.initDefaultHeader();
	}

	componentDidMount() {
		this.getSubscriptions();
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.server && this.props.loadingServer !== nextProps.loadingServer) {
			if (nextProps.loadingServer) {
				this.setState({ loading: true });
			} else {
				this.getSubscriptions();
			}
		} else if (this.props.searchText !== nextProps.searchText) {
			this.search(nextProps.searchText);
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !(isEqual(this.props, nextProps) && isEqual(this.state, nextState));
	}

	componentDidUpdate(prevProps) {
		if (!(
			(prevProps.sidebarSortby === this.props.sidebarSortby) &&
			(prevProps.sidebarGroupByType === this.props.sidebarGroupByType) &&
			(prevProps.sidebarShowFavorites === this.props.sidebarShowFavorites) &&
			(prevProps.sidebarShowUnread === this.props.sidebarShowUnread)
		)) {
			this.getSubscriptions();
		}
	}

	componentWillUnmount() {
		this.removeListener(this.data);
		this.removeListener(this.unread);
		this.removeListener(this.favorites);
		this.removeListener(this.channels);
		this.removeListener(this.privateGroup);
		this.removeListener(this.direct);
		this.removeListener(this.livechat);

		if (this.timeout) {
			clearTimeout(this.timeout);
		}
	}

	onNavigatorEvent(event) {
		const { navigator } = this.props;
		if (event.type === 'NavBarButtonPress') {
			if (event.id === 'createChannel') {
				this.props.navigator.push({
					screen: 'SelectedUsersView',
					title: I18n.t('Select_Users'),
					passProps: {
						nextAction: 'CREATE_CHANNEL'
					}
				});
			} else if (event.id === 'settings') {
				navigator.toggleDrawer({
					side: 'left'
				});
			} else if (event.id === 'search') {
				this.initSearchingAndroid();
			} else if (event.id === 'cancelSearch' || event.id === 'back') {
				this.cancelSearchingAndroid();
			}
		} else if (event.type === 'ScreenChangedEvent' && event.id === 'didAppear') {
			navigator.setDrawerEnabled({
				side: 'left',
				enabled: true
			});
		}
	}

	onSearchChangeText(text) {
		this.search(text);
	}

	getSubscriptions = () => {
		if (this.props.server && this.hasActiveDB()) {
			if (this.props.sidebarSortby === 'alphabetical') {
				this.data = database.objects('subscriptions').filtered('archived != true && open == true').sorted('name', false);
			} else {
				this.data = database.objects('subscriptions').filtered('archived != true && open == true').sorted('roomUpdatedAt', true);
			}

			let chats = [];
			let unread = [];
			let favorites = [];
			let channels = [];
			let privateGroup = [];
			let direct = [];
			let livechat = [];

			// unread
			if (this.props.sidebarShowUnread) {
				this.unread = this.data.filtered('archived != true && open == true').sorted('name', false).filtered('(unread > 0 || alert == true)');
				unread = this.unread.slice();
				setTimeout(() => {
					this.unread.addListener(() => this.setState({ unread: this.unread.slice() }));
				});
			} else {
				this.removeListener(unread);
			}
			// favorites
			if (this.props.sidebarShowFavorites) {
				this.favorites = this.data.filtered('f == true');
				favorites = this.favorites.slice();
				setTimeout(() => {
					this.favorites.addListener(() => this.setState({ favorites: this.favorites.slice() }));
				});
			} else {
				this.removeListener(favorites);
			}
			// type
			if (this.props.sidebarGroupByType) {
				// channels
				this.channels = this.data.filtered('t == $0', 'c');
				channels = this.channels.slice();
				// private
				this.privateGroup = this.data.filtered('t == $0', 'p');
				privateGroup = this.privateGroup.slice();
				// direct
				this.direct = this.data.filtered('t == $0', 'd');
				direct = this.direct.slice();
				// livechat
				this.livechat = this.data.filtered('t == $0', 'l');
				livechat = this.livechat.slice();
				setTimeout(() => {
					this.channels.addListener(() => this.setState({ channels: this.channels.slice() }));
					this.privateGroup.addListener(() => this.setState({ privateGroup: this.privateGroup.slice() }));
					this.direct.addListener(() => this.setState({ direct: this.direct.slice() }));
					this.livechat.addListener(() => this.setState({ livechat: this.livechat.slice() }));
				});
				this.removeListener(this.chats);
			} else {
				// chats
				this.chats = this.data.filtered('(unread == 0 && alert == false)');
				chats = this.chats.slice();
				setTimeout(() => {
					this.chats.addListener(() => this.setState({ chats: this.chats.slice() }));
				});
				this.removeListener(this.channels);
				this.removeListener(this.privateGroup);
				this.removeListener(this.direct);
				this.removeListener(this.livechat);
			}

			// setState
			this.setState({
				chats, unread, favorites, channels, privateGroup, direct, livechat
			});
		}
		this.timeout = setTimeout(() => {
			this.setState({ loading: false });
		}, 200);
	}

	removeListener = (data) => {
		if (data && data.removeAllListeners) {
			data.removeAllListeners();
		}
	}

	initDefaultHeader = () => {
		const { navigator } = this.props;
		navigator.setButtons({ leftButtons, rightButtons });
		navigator.setStyle({
			navBarCustomView: 'RoomsListHeaderView',
			navBarComponentAlignment: 'fill',
			navBarBackgroundColor: isAndroid() ? '#2F343D' : undefined,
			navBarTextColor: isAndroid() ? '#FFF' : undefined,
			navBarButtonColor: isAndroid() ? '#FFF' : undefined
		});
	}

	initSearchingAndroid = () => {
		const { navigator } = this.props;
		navigator.setButtons({
			leftButtons: [{
				id: 'cancelSearch',
				icon: { uri: 'back', scale: Dimensions.get('window').scale }
			}],
			rightButtons: []
		});
		navigator.setStyle({
			navBarCustomView: 'RoomsListSearchView',
			navBarComponentAlignment: 'fill'
		});
		BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
	}

	// this is necessary during development (enables Cmd + r)
	hasActiveDB = () => database && database.databases && database.databases.activeDB;

	cancelSearchingAndroid = () => {
		if (Platform.OS === 'android') {
			this.setState({ search: [] });
			this.initDefaultHeader();
			Keyboard.dismiss();
			BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
		}
	}

	handleBackPress = () => {
		this.cancelSearchingAndroid();
		return true;
	}

	_isUnread = item => item.unread > 0 || item.alert

	async search(text) {
		const searchText = text.trim();
		if (searchText === '') {
			delete this.oldPromise;
			return this.setState({
				search: []
			});
		}

		let data = database.objects('subscriptions').filtered('name CONTAINS[c] $0', searchText).slice(0, 7);

		const usernames = data.map(sub => sub.name);
		try {
			if (data.length < 7) {
				if (this.oldPromise) {
					this.oldPromise('cancel');
				}

				const { users, rooms } = await Promise.race([
					RocketChat.spotlight(searchText, usernames, { users: true, rooms: true }),
					new Promise((resolve, reject) => this.oldPromise = reject)
				]);

				data = data.concat(users.map(user => ({
					...user,
					rid: user.username,
					name: user.username,
					t: 'd',
					search: true
				})), rooms.map(room => ({
					rid: room._id,
					...room,
					search: true
				})));

				delete this.oldPromise;
			}
			this.setState({
				search: data
			});
		} catch (e) {
			// alert(JSON.stringify(e));
		}
	}

	goRoom = (rid, name) => {
		this.props.navigator.push({
			screen: 'RoomView',
			title: name,
			passProps: {
				room: { rid, name },
				rid,
				name
			}
		});
		this.cancelSearchingAndroid();
	}

	_onPressItem = async(item = {}) => {
		if (!item.search) {
			const { rid, name } = item;
			return this.goRoom(rid, name);
		}
		if (item.t === 'd') {
			// if user is using the search we need first to join/create room
			try {
				const { username } = item;
				const sub = await RocketChat.createDirectMessage(username);
				const { rid } = sub;
				return this.goRoom(rid, username);
			} catch (e) {
				log('RoomsListView._onPressItem', e);
			}
		} else {
			const { rid, name } = item;
			return this.goRoom(rid, name);
		}
	}

	toggleSort = () => this.props.toggleSortDropdown();

	renderHeader = () => {
		if (this.state.search.length > 0) {
			return null;
		}
		return this.renderSort();
	}

	renderSort = () => (
		<Touch
			onPress={this.toggleSort}
			style={styles.dropdownContainerHeader}
		>
			<View style={styles.sortItemContainer}>
				<Text style={styles.sortToggleText}>{I18n.t('Sorting_by', { key: I18n.t(this.props.sidebarSortby === 'alphabetical' ? 'name' : 'activity') })}</Text>
				<Image style={styles.sortIcon} source={{ uri: 'group_type' }} />
			</View>
		</Touch>
	)

	renderSearchBar = () => {
		if (Platform.OS === 'ios') {
			return (
				<View style={styles.searchBoxView}>
					<TextInput
						underlineColorAndroid='transparent'
						style={styles.searchBox}
						onChangeText={text => this.onSearchChangeText(text)}
						returnKeyType='search'
						placeholder={I18n.t('Search')}
						clearButtonMode='while-editing'
						blurOnSubmit
						autoCorrect={false}
						autoCapitalize='none'
						testID='rooms-list-view-search'
					/>
				</View>
			);
		}
	}

	renderItem = ({ item }) => {
		const id = item.rid.replace(this.props.userId, '').trim();
		return (<RoomItem
			alert={item.alert}
			unread={item.unread}
			userMentions={item.userMentions}
			favorite={item.f}
			lastMessage={item.lastMessage}
			name={item.name}
			_updatedAt={item.roomUpdatedAt}
			key={item._id}
			id={id}
			type={item.t}
			baseUrl={this.props.Site_Url}
			onPress={() => this._onPressItem(item)}
			testID={`rooms-list-view-item-${ item.name }`}
			height={ROW_HEIGHT}
		/>);
	}

	renderSeparator = () => <View style={styles.separator} />;

	renderSection = (data, header) => {
		if (data.length > 0) {
			return (
				<FlatList
					data={data}
					extraData={data}
					keyExtractor={item => item.rid}
					style={styles.list}
					renderItem={this.renderItem}
					ItemSeparatorComponent={this.renderSeparator}
					ListHeaderComponent={() => (
						<View style={styles.groupTitleContainer}>
							<Text style={styles.groupTitle}>{I18n.t(header)}</Text>
						</View>
					)}
					getItemLayout={getItemLayout}
					enableEmptySections
					removeClippedSubviews
					keyboardShouldPersistTaps='always'
				/>
			);
		}
		return null;
	}

	renderList = () => {
		const {
			search, chats, unread, favorites, channels, direct, privateGroup, livechat
		} = this.state;

		if (search.length > 0) {
			return (
				<FlatList
					data={search}
					extraData={search}
					keyExtractor={item => item.rid}
					style={styles.list}
					renderItem={this.renderItem}
					ItemSeparatorComponent={this.renderSeparator}
					getItemLayout={getItemLayout}
					enableEmptySections
					removeClippedSubviews
					keyboardShouldPersistTaps='always'
				/>
			);
		}

		return (
			<View style={styles.container}>
				{this.renderSection(unread, 'Unread')}
				{this.renderSection(favorites, 'Favorites')}
				{this.renderSection(channels, 'Channels')}
				{this.renderSection(direct, 'Direct_Messages')}
				{this.renderSection(privateGroup, 'Private_Groups')}
				{this.renderSection(livechat, 'Livechat')}
				{this.renderSection(chats, 'Chats')}
			</View>
		);
	}

	renderScroll = () => {
		if (this.state.loading) {
			return <ActivityIndicator style={styles.loading} />;
		}

		return (
			<ScrollView
				contentOffset={Platform.OS === 'ios' ? { x: 0, y: 37 } : {}}
				keyboardShouldPersistTaps='always'
				testID='rooms-list-view-list'
			>
				{this.renderSearchBar()}
				{this.renderHeader()}
				{this.renderList()}
			</ScrollView>
		);
	}

	render = () => {
		const {
			sidebarSortby, sidebarGroupByType, sidebarShowFavorites, sidebarShowUnread, showServerDropdown, showSortDropdown
		} = this.props;

		return (
			<SafeAreaView style={styles.container} testID='rooms-list-view'>
				{this.renderScroll()}
				{showSortDropdown ?
					<SortDropdown
						close={this.toggleSort}
						sidebarSortby={sidebarSortby}
						sidebarGroupByType={sidebarGroupByType}
						sidebarShowFavorites={sidebarShowFavorites}
						sidebarShowUnread={sidebarShowUnread}
					/> :
					null}
				{showServerDropdown ? <ServerDropdown navigator={this.props.navigator} /> : null}
			</SafeAreaView>
		);
	}
}