verdnatura-chat/app/views/DiscussionsView/index.tsx

231 lines
6.0 KiB
TypeScript
Raw Normal View History

2021-07-21 17:29:22 +00:00
import React, { useEffect, useState } from 'react';
import { FlatList } from 'react-native';
import { useSelector } from 'react-redux';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
2021-10-13 21:09:50 +00:00
import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/core';
import ActivityIndicator from '../../containers/ActivityIndicator';
import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar';
import log from '../../utils/log';
import debounce from '../../utils/debounce';
import { themes } from '../../constants/colors';
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 { getHeaderTitlePosition } from '../../containers/Header';
import { useTheme } from '../../theme';
import RocketChat from '../../lib/rocketchat';
import SearchHeader from '../../containers/SearchHeader';
import Item from '../ThreadMessagesView/Item';
import styles from './styles';
2021-09-03 19:50:18 +00:00
2021-09-16 18:16:02 +00:00
const API_FETCH_COUNT = 50;
interface IDiscussionsViewProps {
2021-10-13 21:09:50 +00:00
navigation: StackNavigationProp<any, 'DiscussionsView'>;
route: RouteProp<any, 'DiscussionsView'>;
item: {
msg: string;
};
}
interface IState {
login?: {
user: object;
};
server: {
server: string;
};
settings: {
UI_Use_Real_Name: boolean;
Message_TimeFormat: string;
};
app: {
isMasterDetail: boolean;
};
}
const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Element => {
const rid = route.params?.rid;
const user = useSelector((state: IState) => state.login?.user);
const baseUrl = useSelector((state: IState) => state.server?.server);
const useRealName = useSelector((state: IState) => state.settings?.UI_Use_Real_Name);
2021-09-17 19:55:06 +00:00
const timeFormat = useSelector((state: IState) => state.settings?.Message_TimeFormat);
const isMasterDetail = useSelector((state: IState) => state.app?.isMasterDetail);
const [loading, setLoading] = useState(false);
const [discussions, setDiscussions] = useState([]);
2021-09-03 19:50:18 +00:00
const [search, setSearch] = useState([]);
const [isSearching, setIsSearching] = useState(false);
2021-09-16 18:16:02 +00:00
const [total, setTotal] = useState(0);
const [searchTotal, setSearchTotal] = useState(0);
2021-07-21 17:29:22 +00:00
const { theme } = useTheme();
const insets = useSafeAreaInsets();
2021-09-16 18:16:02 +00:00
const load = async (text = '') => {
2021-07-21 17:29:22 +00:00
if (loading) {
return;
}
setLoading(true);
try {
2021-09-03 19:50:18 +00:00
const result = await RocketChat.getDiscussions({
roomId: rid,
offset: isSearching ? search.length : discussions.length,
count: API_FETCH_COUNT,
text
2021-09-03 19:50:18 +00:00
});
if (result.success) {
if (isSearching) {
setSearch(result.messages);
setSearchTotal(result.total);
2021-09-03 19:50:18 +00:00
} else {
setDiscussions(result.messages);
2021-09-16 18:16:02 +00:00
setTotal(result.total);
2021-09-03 19:50:18 +00:00
}
}
setLoading(false);
} catch (e) {
log(e);
2021-09-03 19:50:18 +00:00
setLoading(false);
}
2021-07-21 17:29:22 +00:00
};
const onSearchChangeText = debounce(async (text: string) => {
setIsSearching(true);
await load(text);
}, 300);
2021-07-21 17:29:22 +00:00
const onCancelSearchPress = () => {
setIsSearching(false);
2021-10-13 21:09:50 +00:00
setSearch([]);
setSearchTotal(0);
2021-07-21 17:29:22 +00:00
};
const onSearchPress = () => {
setIsSearching(true);
};
const setHeader = () => {
2021-10-13 21:09:50 +00:00
let options: Partial<StackNavigationOptions>;
if (isSearching) {
const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 });
2021-10-13 21:09:50 +00:00
options = {
headerTitleAlign: 'left',
headerLeft: () => (
<HeaderButton.Container left>
2021-09-16 18:16:02 +00:00
<HeaderButton.Item iconName='close' onPress={onCancelSearchPress} />
</HeaderButton.Container>
),
headerTitle: () => (
<SearchHeader
placeholder='Search Messages'
onSearchChangeText={onSearchChangeText}
theme={theme}
testID='discussion-messages-view-search-header'
/>
),
headerTitleContainerStyle: {
left: headerTitlePosition.left,
right: headerTitlePosition.right
},
headerRight: () => null
};
2021-10-13 21:09:50 +00:00
return options;
}
2021-10-13 21:09:50 +00:00
options = {
headerLeft: () => (
2021-10-13 21:09:50 +00:00
<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={themes[theme].headerTintColor} />
),
headerTitleAlign: 'center',
2021-07-21 17:29:22 +00:00
headerTitle: I18n.t('Discussions'),
headerTitleContainerStyle: {
left: null,
right: null
},
headerRight: () => (
<HeaderButton.Container>
<HeaderButton.Item iconName='search' onPress={onSearchPress} />
</HeaderButton.Container>
)
};
if (isMasterDetail) {
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
}
return options;
};
useEffect(() => {
2021-07-21 17:29:22 +00:00
load();
2021-07-21 20:23:34 +00:00
}, []);
useEffect(() => {
2021-07-21 17:29:22 +00:00
const options = setHeader();
navigation.setOptions(options);
2021-07-21 20:23:34 +00:00
}, [navigation, isSearching]);
2021-09-16 18:16:02 +00:00
const onDiscussionPress = debounce(
(item: any) => {
2021-09-16 18:16:02 +00:00
navigation.push('RoomView', {
rid: item.drid,
prid: item.rid,
name: item.msg,
t: 'p'
});
},
1000,
true
);
const renderItem = ({ item }: any) => (
<Item
{...{
item,
user,
navigation,
baseUrl,
useRealName
}}
2021-09-17 19:55:06 +00:00
timeFormat={timeFormat}
onPress={onDiscussionPress}
2021-07-21 17:29:22 +00:00
/>
);
if (!discussions?.length) {
2021-09-16 18:16:02 +00:00
return <BackgroundContainer loading={loading} text={I18n.t('No_discussions')} />;
}
return (
2021-09-17 19:26:48 +00:00
<SafeAreaView testID='discussions-view'>
<StatusBar />
<FlatList
2021-09-03 19:50:18 +00:00
data={isSearching ? search : discussions}
renderItem={renderItem}
keyExtractor={(item: any) => item.msg}
2021-10-13 21:09:50 +00:00
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={styles.contentContainer}
onEndReachedThreshold={0.5}
maxToRenderPerBatch={5}
windowSize={10}
initialNumToRender={7}
removeClippedSubviews={isIOS}
onEndReached={() => (isSearching ? searchTotal > API_FETCH_COUNT ?? load() : total > API_FETCH_COUNT ?? load())}
ItemSeparatorComponent={List.Separator}
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
2021-08-23 01:51:22 +00:00
scrollIndicatorInsets={{ right: 1 }}
/>
</SafeAreaView>
);
};
2021-09-16 18:16:02 +00:00
export default DiscussionsView;