|
|
|
@ -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 }}
|
|
|
|
|