From c066c208d3d97f2d79cac66b5dfd68e7ca3051a7 Mon Sep 17 00:00:00 2001
From: Gerzon Z <gerzonzcanario@gmail.com>
Date: Tue, 20 Jul 2021 15:25:50 -0400
Subject: [PATCH] Update DiscussionMessagesView and add to stacks

---
 app/stacks/InsideStack.js             |   5 +
 app/stacks/MasterDetailStack/index.js |   5 +
 app/views/DiscussionMessagesView.js   | 208 ++++++++++++++++++++++++++
 app/views/RoomActionsView/index.js    |   5 +-
 4 files changed, 220 insertions(+), 3 deletions(-)
 create mode 100644 app/views/DiscussionMessagesView.js

diff --git a/app/stacks/InsideStack.js b/app/stacks/InsideStack.js
index 83fc22240..9f500a52c 100644
--- a/app/stacks/InsideStack.js
+++ b/app/stacks/InsideStack.js
@@ -74,6 +74,7 @@ import QueueListView from '../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../views/AddChannelTeamView';
 import AddExistingChannelView from '../views/AddExistingChannelView';
 import SelectListView from '../views/SelectListView';
+import DiscussionMessagesView from '../views/DiscussionMessagesView';
 
 // ChatsStackNavigator
 const ChatsStack = createStackNavigator();
@@ -114,6 +115,10 @@ const ChatsStackNavigator = () => {
 				component={RoomMembersView}
 				options={RoomMembersView.navigationOptions}
 			/>
+			<ChatsStack.Screen
+				name='DiscussionMessagesView'
+				component={DiscussionMessagesView}
+			/>
 			<ChatsStack.Screen
 				name='SearchMessagesView'
 				component={SearchMessagesView}
diff --git a/app/stacks/MasterDetailStack/index.js b/app/stacks/MasterDetailStack/index.js
index ea7c038f2..c9f5542b4 100644
--- a/app/stacks/MasterDetailStack/index.js
+++ b/app/stacks/MasterDetailStack/index.js
@@ -64,6 +64,7 @@ import QueueListView from '../../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../../views/AddChannelTeamView';
 import AddExistingChannelView from '../../views/AddExistingChannelView';
 import SelectListView from '../../views/SelectListView';
+import DiscussionMessagesView from '../../views/DiscussionMessagesView';
 
 // ChatsStackNavigator
 const ChatsStack = createStackNavigator();
@@ -212,6 +213,10 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 					name='ThreadMessagesView'
 					component={ThreadMessagesView}
 				/>
+				<ModalStack.Screen
+					name='DiscussionMessagesView'
+					component={DiscussionMessagesView}
+				/>
 				<ModalStack.Screen
 					name='TeamChannelsView'
 					component={TeamChannelsView}
diff --git a/app/views/DiscussionMessagesView.js b/app/views/DiscussionMessagesView.js
new file mode 100644
index 000000000..3a483cb31
--- /dev/null
+++ b/app/views/DiscussionMessagesView.js
@@ -0,0 +1,208 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FlatList } from 'react-native';
+import { useSelector } from 'react-redux';
+import { Q } from '@nozbe/watermelondb';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { HeaderBackButton } from '@react-navigation/stack';
+
+import Item from './ThreadMessagesView/Item';
+import ActivityIndicator from '../containers/ActivityIndicator';
+import I18n from '../i18n';
+import RocketChat from '../lib/rocketchat';
+import database from '../lib/database';
+import StatusBar from '../containers/StatusBar';
+import log from '../utils/log';
+import debounce from '../utils/debounce';
+import { themes } from '../constants/colors';
+import { getUserSelector } from '../selectors/login';
+import SafeAreaView from '../containers/SafeAreaView';
+import * as HeaderButton from '../containers/HeaderButton';
+import * as List from '../containers/List';
+import BackgroundContainer from '../containers/BackgroundContainer';
+import { isIOS } from '../utils/deviceInfo';
+import { makeThreadName } from '../utils/room';
+import { getHeaderTitlePosition } from '../containers/Header';
+import SearchHeader from './ThreadMessagesView/SearchHeader';
+import { useTheme } from '../theme';
+
+const DiscussionMessagesView = ({ navigation, route }) => {
+	const mounted = useRef();
+	const rid = route.params?.rid;
+	const t = route.params?.t;
+	const prid = route.params?.prid;
+	const baseUrl = useSelector(state => state.server.server);
+	const user = useSelector(state => getUserSelector(state));
+	const useRealName = useSelector(state => state.settings.UI_Use_Real_Name);
+	const isMasterDetail = useSelector(state => state.app.isMasterDetail);
+	const [loading, setLoading] = useState(false);
+	const [discussions, setDiscussions] = useState([]);
+	const [isSearching, setIsSearching] = useState(false);
+	// const [searchText, setSearchText] = useState('');
+	const theme = useTheme();
+	const insets = useSafeAreaInsets();
+
+	const load = debounce(async() => {
+		if (loading || !mounted) {
+			return;
+		}
+
+		setLoading(true);
+
+		try {
+			const db = database.active;
+			const subCollection = db.get('subscriptions');
+			const discussionsMessages = await subCollection.query(
+				Q.where('rid', Q.eq(rid)),
+				Q.where('prid', Q.eq(prid))
+			);
+			setDiscussions(discussionsMessages);
+			setLoading(false);
+		} catch (e) {
+			log(e);
+		}
+	}, 300);
+
+	// const onSearchChangeText = debounce((text) => {
+	// 	setSearchText(text);
+	// }, 300);
+
+	const onSearchPress = () => {
+		setIsSearching(true);
+	};
+
+	const setHeader = () => {
+		if (isSearching) {
+			const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 });
+			return {
+				headerTitleAlign: 'left',
+				headerLeft: () => (
+					<HeaderButton.Container left>
+						<HeaderButton.Item
+							iconName='close'
+							onPress={this.onCancelSearchPress}
+						/>
+					</HeaderButton.Container>
+				),
+				headerTitle: () => <SearchHeader onSearchChangeText={this.onSearchChangeText} />,
+				headerTitleContainerStyle: {
+					left: headerTitlePosition.left,
+					right: headerTitlePosition.right
+				},
+				headerRight: () => null
+			};
+		}
+
+		const options = {
+			headerLeft: () => (
+				<HeaderBackButton
+					labelVisible={false}
+					onPress={() => navigation.pop()}
+					tintColor={themes[theme].headerTintColor}
+				/>
+			),
+			headerTitleAlign: 'center',
+			headerTitle: I18n.t('Discussion'),
+			headerTitleContainerStyle: {
+				left: null,
+				right: null
+			}
+		};
+
+		if (isMasterDetail) {
+			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
+		}
+
+		options.headerRight = () => (
+			<HeaderButton.Container>
+				<HeaderButton.Item iconName='search' onPress={onSearchPress} />
+			</HeaderButton.Container>
+		);
+		return options;
+	};
+
+	// const onCancelSearchPress = () => {
+	// 	setIsSearching(false);
+	// 	setSearchText('');
+	// 	setHeader();
+	// };
+
+	useEffect(() => {
+		if (!mounted.current) {
+			load();
+			mounted.current = true;
+		} else {
+			setHeader();
+		}
+	}, []);
+
+
+	const onThreadPress = debounce((item) => {
+		if (isMasterDetail) {
+			navigation.pop();
+		}
+		navigation.push('RoomView', {
+			rid: item.subscription.id,
+			name: makeThreadName(item),
+			t,
+			roomUserId: RocketChat.getUidDirectMessage(item)
+		});
+	}, 1000, true);
+
+	const getBadgeColor = item => getBadgeColor({ item, theme, messageId: item?.id });
+
+	// eslint-disable-next-line react/prop-types
+	const renderItem = ({ item }) => {
+		const badgeColor = getBadgeColor(item);
+		return (
+			<Item
+				// eslint-disable-next-line react/jsx-props-no-spreading
+				{...{
+					item,
+					user,
+					navigation,
+					baseUrl,
+					useRealName,
+					badgeColor
+				}}
+				onPress={onThreadPress}
+			/>
+		);
+	};
+
+	if (!discussions?.length) {
+		return (
+			<>
+				<BackgroundContainer text={I18n.t('No_discussions')} />
+			</>
+		);
+	}
+
+	return (
+		<SafeAreaView testID='discussion-messages-view'>
+			<StatusBar />
+			<FlatList
+				data={discussions}
+				renderItem={renderItem}
+				// style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				// contentContainerStyle={styles.contentContainer}
+				onEndReached={load}
+				onEndReachedThreshold={0.5}
+				maxToRenderPerBatch={5}
+				windowSize={10}
+				initialNumToRender={7}
+				removeClippedSubviews={isIOS}
+				ItemSeparatorComponent={List.Separator}
+				ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+				scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
+			/>
+		</SafeAreaView>
+	);
+};
+
+DiscussionMessagesView.propTypes = {
+	navigation: PropTypes.object,
+	route: PropTypes.object
+};
+
+export default DiscussionMessagesView;
diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
index e44126006..29a4b1a7c 100644
--- a/app/views/RoomActionsView/index.js
+++ b/app/views/RoomActionsView/index.js
@@ -980,13 +980,12 @@ class RoomActionsView extends React.Component {
 									<List.Item
 										title='Discussions'
 										onPress={() => this.onPressTouchable({
-											route: 'ThreadMessagesView',
+											route: 'DiscussionMessagesView',
 											params: {
 												rid,
 												t,
 												prid,
-												name: 'Discussions',
-												isDiscussion: true
+												name: 'Discussions'
 											}
 										})}
 										testID='room-actions-discussions'