Update DiscussionMessagesView and add to stacks

This commit is contained in:
Gerzon Z 2021-07-20 15:25:50 -04:00
parent 659f2c8646
commit c066c208d3
4 changed files with 220 additions and 3 deletions

View File

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

View File

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

View File

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

View File

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