[FIX] Searching for Discussion (#4843)

* [FIX] Searching for Discussion

* minor tweak

* fixed pagination

* update typescript return

* remove await from load

app/definitions/rest/v1/chat.ts

@@ -33,6 +33,7 @@ export type ChatEndpoints = {
 		GET: (params: { roomId: IServerRoom['_id']; text?: string; offset: number; count: number }) => {
 			messages: IMessageFromServer[];
 			total: number;
+			count: number;
 		};
 	};
 	'chat.getThreadsList': {

app/views/DiscussionsView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 import { HeaderBackButton } from '@react-navigation/elements';
@@ -46,12 +46,13 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 	const [discussions, setDiscussions] = useState<IMessageFromServer[]>([]);
 	const [search, setSearch] = useState<IMessageFromServer[]>([]);
 	const [isSearching, setIsSearching] = useState(false);
-	const [total, setTotal] = useState(0);
-	const [searchTotal, setSearchTotal] = useState(0);
+	const total = useRef(0);
+	const searchText = useRef('');
+	const offset = useRef(0);
 
 	const { colors } = useTheme();
 
-	const load = async (text = '') => {
+	const load = async () => {
 		if (loading) {
 			return;
 		}
@@ -60,18 +61,18 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 		try {
 			const result = await Services.getDiscussions({
 				roomId: rid,
-				offset: isSearching ? search.length : discussions.length,
+				offset: offset.current,
 				count: API_FETCH_COUNT,
-				text
+				text: searchText.current
 			});
 
 			if (result.success) {
+				offset.current += result.count;
+				total.current = result.total;
 				if (isSearching) {
-					setSearch(result.messages);
-					setSearchTotal(result.total);
+					setSearch(prevState => (offset.current ? [...prevState, ...result.messages] : result.messages));
 				} else {
 					setDiscussions(result.messages);
-					setTotal(result.total);
 				}
 			}
 			setLoading(false);
@@ -81,15 +82,19 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 		}
 	};
 
-	const onSearchChangeText = useDebounce(async (text: string) => {
+	const onSearchChangeText = useDebounce((text: string) => {
 		setIsSearching(true);
-		await load(text);
+		setSearch([]);
+		searchText.current = text;
+		offset.current = 0;
+		load();
 	}, 500);
 
 	const onCancelSearchPress = () => {
 		setIsSearching(false);
 		setSearch([]);
-		setSearchTotal(0);
+		searchText.current = '';
+		offset.current = 0;
 	};
 
 	const onSearchPress = () => {
@@ -181,12 +186,12 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 			<FlatList
 				data={isSearching ? search : discussions}
 				renderItem={renderItem}
-				keyExtractor={(item: any) => item.msg}
+				keyExtractor={(item: any) => item._id}
 				style={{ backgroundColor: colors.backgroundColor }}
 				contentContainerStyle={styles.contentContainer}
 				onEndReachedThreshold={0.5}
 				removeClippedSubviews={isIOS}
-				onEndReached={() => (isSearching ? searchTotal : total) > API_FETCH_COUNT ?? load()}
+				onEndReached={() => isSearching && offset.current < total.current && load()}
 				ItemSeparatorComponent={List.Separator}
 				ListFooterComponent={loading ? <ActivityIndicator /> : null}
 				scrollIndicatorInsets={{ right: 1 }}