2021-09-01 17:15:15 +00:00
|
|
|
/* eslint-disable react/prop-types */
|
2021-07-21 17:29:22 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2021-07-20 19:25:50 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { FlatList } from 'react-native';
|
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
import { HeaderBackButton } from '@react-navigation/stack';
|
|
|
|
|
|
|
|
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 SearchHeader from './ThreadMessagesView/SearchHeader';
|
|
|
|
import { useTheme } from '../theme';
|
2021-07-21 17:29:22 +00:00
|
|
|
import Message from '../containers/message';
|
2021-09-03 19:50:18 +00:00
|
|
|
import RocketChat from '../lib/rocketchat';
|
|
|
|
|
|
|
|
const API_FETCH_COUNT = 25;
|
2021-07-20 19:25:50 +00:00
|
|
|
|
|
|
|
const DiscussionMessagesView = ({ navigation, route }) => {
|
|
|
|
const rid = route.params?.rid;
|
2021-07-21 17:29:22 +00:00
|
|
|
const canAutoTranslate = route.params?.canAutoTranslate;
|
|
|
|
const autoTranslate = route.params?.autoTranslate;
|
|
|
|
const autoTranslateLanguage = route.params?.autoTranslateLanguage;
|
2021-09-02 21:04:39 +00:00
|
|
|
const navToRoomInfo = route.params?.navToRoomInfo;
|
2021-09-01 17:15:15 +00:00
|
|
|
const user = useSelector(state => state.login?.user);
|
2021-07-20 19:25:50 +00:00
|
|
|
const baseUrl = useSelector(state => state.server.server);
|
|
|
|
const useRealName = useSelector(state => state.settings.UI_Use_Real_Name);
|
2021-07-21 17:29:22 +00:00
|
|
|
const Message_TimeFormat = useSelector(state => state.settings.Message_TimeFormat);
|
2021-07-20 19:25:50 +00:00
|
|
|
const isMasterDetail = useSelector(state => state.app.isMasterDetail);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [discussions, setDiscussions] = useState([]);
|
2021-09-03 19:50:18 +00:00
|
|
|
const [search, setSearch] = useState([]);
|
2021-07-20 19:25:50 +00:00
|
|
|
const [isSearching, setIsSearching] = useState(false);
|
2021-07-21 17:29:22 +00:00
|
|
|
const { theme } = useTheme();
|
2021-07-20 19:25:50 +00:00
|
|
|
const insets = useSafeAreaInsets();
|
|
|
|
|
2021-07-21 17:29:22 +00:00
|
|
|
const load = async() => {
|
|
|
|
if (loading) {
|
2021-07-20 19:25:50 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
2021-09-03 19:50:18 +00:00
|
|
|
const result = await RocketChat.getDiscussions({
|
|
|
|
roomId: rid,
|
|
|
|
offset: discussions.length,
|
|
|
|
count: API_FETCH_COUNT
|
|
|
|
});
|
|
|
|
|
|
|
|
if (result.success) {
|
|
|
|
if (isSearching) {
|
|
|
|
setSearch(result.messages);
|
|
|
|
} else {
|
|
|
|
setDiscussions(result.messages);
|
|
|
|
}
|
|
|
|
}
|
2021-07-20 19:25:50 +00:00
|
|
|
setLoading(false);
|
|
|
|
} catch (e) {
|
|
|
|
log(e);
|
2021-09-03 19:50:18 +00:00
|
|
|
setLoading(false);
|
2021-07-20 19:25:50 +00:00
|
|
|
}
|
2021-07-21 17:29:22 +00:00
|
|
|
};
|
|
|
|
|
2021-07-21 20:23:34 +00:00
|
|
|
const onSearchChangeText = debounce(async(text) => {
|
2021-09-03 19:50:18 +00:00
|
|
|
setLoading(true);
|
2021-07-21 20:23:34 +00:00
|
|
|
try {
|
2021-09-03 19:50:18 +00:00
|
|
|
const result = await RocketChat.getDiscussions({
|
|
|
|
roomId: rid,
|
|
|
|
offset: search.length,
|
|
|
|
count: API_FETCH_COUNT,
|
|
|
|
text
|
|
|
|
});
|
|
|
|
if (result.success) {
|
|
|
|
setSearch(result.messages);
|
2021-07-21 20:23:34 +00:00
|
|
|
}
|
2021-09-03 19:50:18 +00:00
|
|
|
setLoading(false);
|
2021-07-21 20:23:34 +00:00
|
|
|
} catch (e) {
|
|
|
|
log(e);
|
2021-09-03 19:50:18 +00:00
|
|
|
setLoading(false);
|
2021-07-21 20:23:34 +00:00
|
|
|
}
|
2021-07-20 19:25:50 +00:00
|
|
|
}, 300);
|
|
|
|
|
2021-07-21 17:29:22 +00:00
|
|
|
const onCancelSearchPress = () => {
|
|
|
|
setIsSearching(false);
|
2021-07-21 20:23:34 +00:00
|
|
|
load();
|
2021-07-21 17:29:22 +00:00
|
|
|
};
|
2021-07-20 19:25:50 +00:00
|
|
|
|
|
|
|
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'
|
2021-07-21 17:29:22 +00:00
|
|
|
onPress={onCancelSearchPress}
|
2021-07-20 19:25:50 +00:00
|
|
|
/>
|
|
|
|
</HeaderButton.Container>
|
|
|
|
),
|
2021-09-03 19:50:18 +00:00
|
|
|
headerTitle: () => <SearchHeader placeholder='Search Messages' onSearchChangeText={onSearchChangeText} />,
|
2021-07-20 19:25:50 +00:00
|
|
|
headerTitleContainerStyle: {
|
|
|
|
left: headerTitlePosition.left,
|
|
|
|
right: headerTitlePosition.right
|
|
|
|
},
|
|
|
|
headerRight: () => null
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const options = {
|
|
|
|
headerLeft: () => (
|
|
|
|
<HeaderBackButton
|
|
|
|
labelVisible={false}
|
|
|
|
onPress={() => navigation.pop()}
|
|
|
|
tintColor={themes[theme].headerTintColor}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
headerTitleAlign: 'center',
|
2021-07-21 17:29:22 +00:00
|
|
|
headerTitle: I18n.t('Discussions'),
|
2021-07-20 19:25:50 +00:00
|
|
|
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;
|
|
|
|
};
|
|
|
|
|
|
|
|
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-07-20 19:25:50 +00:00
|
|
|
|
|
|
|
|
2021-07-21 17:29:22 +00:00
|
|
|
const onDiscussionPress = debounce((item) => {
|
2021-07-20 19:25:50 +00:00
|
|
|
navigation.push('RoomView', {
|
2021-07-21 17:29:22 +00:00
|
|
|
rid: item.drid, prid: item.rid, name: item.msg, t: 'p'
|
2021-07-20 19:25:50 +00:00
|
|
|
});
|
|
|
|
}, 1000, true);
|
|
|
|
|
2021-07-21 17:29:22 +00:00
|
|
|
const renderItem = ({ item }) => (
|
|
|
|
<Message
|
|
|
|
item={item}
|
2021-09-01 17:15:15 +00:00
|
|
|
user={user}
|
2021-07-21 17:29:22 +00:00
|
|
|
rid={rid}
|
2021-09-02 21:04:39 +00:00
|
|
|
navToRoomInfo={navToRoomInfo}
|
2021-07-21 17:29:22 +00:00
|
|
|
onDiscussionPress={onDiscussionPress}
|
|
|
|
baseUrl={baseUrl}
|
|
|
|
timeFormat={Message_TimeFormat}
|
|
|
|
useRealName={useRealName}
|
|
|
|
autoTranslateRoom={canAutoTranslate && autoTranslate}
|
|
|
|
autoTranslateLanguage={autoTranslateLanguage}
|
|
|
|
/>
|
|
|
|
);
|
2021-07-20 19:25:50 +00:00
|
|
|
if (!discussions?.length) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<BackgroundContainer text={I18n.t('No_discussions')} />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SafeAreaView testID='discussion-messages-view'>
|
|
|
|
<StatusBar />
|
|
|
|
<FlatList
|
2021-09-03 19:50:18 +00:00
|
|
|
data={isSearching ? search : discussions}
|
2021-07-20 19:25:50 +00:00
|
|
|
renderItem={renderItem}
|
2021-07-21 20:23:34 +00:00
|
|
|
keyExtractor={item => item.msg}
|
2021-08-23 01:51:22 +00:00
|
|
|
style={{ backgroundColor: themes[theme].backgroundColor }}
|
2021-07-20 19:25:50 +00:00
|
|
|
onEndReachedThreshold={0.5}
|
|
|
|
maxToRenderPerBatch={5}
|
|
|
|
windowSize={10}
|
|
|
|
initialNumToRender={7}
|
|
|
|
removeClippedSubviews={isIOS}
|
2021-09-03 19:50:18 +00:00
|
|
|
onEndReached={() => discussions.length > 25 ?? load()}
|
2021-07-20 19:25:50 +00:00
|
|
|
ItemSeparatorComponent={List.Separator}
|
|
|
|
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
2021-08-23 01:51:22 +00:00
|
|
|
scrollIndicatorInsets={{ right: 1 }}
|
2021-07-20 19:25:50 +00:00
|
|
|
/>
|
|
|
|
</SafeAreaView>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
DiscussionMessagesView.propTypes = {
|
|
|
|
navigation: PropTypes.object,
|
|
|
|
route: PropTypes.object
|
|
|
|
};
|
|
|
|
|
|
|
|
export default DiscussionMessagesView;
|