Fix DiscussionMessagesView

This commit is contained in:
Gerzon Z 2021-07-21 13:29:22 -04:00
parent c066c208d3
commit daba3b44e9
2 changed files with 50 additions and 64 deletions

View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FlatList } from 'react-native'; import { FlatList } from 'react-native';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
@ -6,44 +6,44 @@ import { Q } from '@nozbe/watermelondb';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { HeaderBackButton } from '@react-navigation/stack'; import { HeaderBackButton } from '@react-navigation/stack';
import Item from './ThreadMessagesView/Item';
import ActivityIndicator from '../containers/ActivityIndicator'; import ActivityIndicator from '../containers/ActivityIndicator';
import I18n from '../i18n'; import I18n from '../i18n';
import RocketChat from '../lib/rocketchat';
import database from '../lib/database'; import database from '../lib/database';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import log from '../utils/log'; import log from '../utils/log';
import debounce from '../utils/debounce'; import debounce from '../utils/debounce';
import { themes } from '../constants/colors'; import { themes } from '../constants/colors';
import { getUserSelector } from '../selectors/login';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import * as List from '../containers/List'; import * as List from '../containers/List';
import BackgroundContainer from '../containers/BackgroundContainer'; import BackgroundContainer from '../containers/BackgroundContainer';
import { isIOS } from '../utils/deviceInfo'; import { isIOS } from '../utils/deviceInfo';
import { makeThreadName } from '../utils/room';
import { getHeaderTitlePosition } from '../containers/Header'; import { getHeaderTitlePosition } from '../containers/Header';
import SearchHeader from './ThreadMessagesView/SearchHeader'; import SearchHeader from './ThreadMessagesView/SearchHeader';
import { useTheme } from '../theme'; import { useTheme } from '../theme';
import Message from '../containers/message';
const DiscussionMessagesView = ({ navigation, route }) => { const DiscussionMessagesView = ({ navigation, route }) => {
const mounted = useRef();
const rid = route.params?.rid; const rid = route.params?.rid;
const t = route.params?.t; // const t = route.params?.t;
const prid = route.params?.prid; // const prid = route.params?.prid;
const canAutoTranslate = route.params?.canAutoTranslate;
const autoTranslate = route.params?.autoTranslate;
const autoTranslateLanguage = route.params?.autoTranslateLanguage;
const baseUrl = useSelector(state => state.server.server); const baseUrl = useSelector(state => state.server.server);
const user = useSelector(state => getUserSelector(state)); // const user = useSelector(state => getUserSelector(state));
const useRealName = useSelector(state => state.settings.UI_Use_Real_Name); const useRealName = useSelector(state => state.settings.UI_Use_Real_Name);
const Message_TimeFormat = useSelector(state => state.settings.Message_TimeFormat);
const isMasterDetail = useSelector(state => state.app.isMasterDetail); const isMasterDetail = useSelector(state => state.app.isMasterDetail);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [discussions, setDiscussions] = useState([]); const [discussions, setDiscussions] = useState([]);
const [isSearching, setIsSearching] = useState(false); const [isSearching, setIsSearching] = useState(false);
// const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState('');
const theme = useTheme(); const { theme } = useTheme();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const load = debounce(async() => { const load = async() => {
if (loading || !mounted) { if (loading) {
return; return;
} }
@ -51,21 +51,26 @@ const DiscussionMessagesView = ({ navigation, route }) => {
try { try {
const db = database.active; const db = database.active;
const subCollection = db.get('subscriptions'); const subCollection = db.get('messages');
const discussionsMessages = await subCollection.query( const subDiscussions = await subCollection.query(
Q.where('rid', Q.eq(rid)), Q.where('rid', Q.eq(rid)),
Q.where('prid', Q.eq(prid)) Q.where('drid', Q.notEq(null))
); );
setDiscussions(discussionsMessages); setDiscussions(subDiscussions);
setLoading(false); setLoading(false);
} catch (e) { } catch (e) {
log(e); log(e);
} }
};
const onSearchChangeText = debounce((text) => {
setSearchText(text);
}, 300); }, 300);
// const onSearchChangeText = debounce((text) => { const onCancelSearchPress = () => {
// setSearchText(text); setIsSearching(false);
// }, 300); setSearchText('');
};
const onSearchPress = () => { const onSearchPress = () => {
setIsSearching(true); setIsSearching(true);
@ -80,11 +85,11 @@ const DiscussionMessagesView = ({ navigation, route }) => {
<HeaderButton.Container left> <HeaderButton.Container left>
<HeaderButton.Item <HeaderButton.Item
iconName='close' iconName='close'
onPress={this.onCancelSearchPress} onPress={onCancelSearchPress}
/> />
</HeaderButton.Container> </HeaderButton.Container>
), ),
headerTitle: () => <SearchHeader onSearchChangeText={this.onSearchChangeText} />, headerTitle: () => <SearchHeader onSearchChangeText={onSearchChangeText} />,
headerTitleContainerStyle: { headerTitleContainerStyle: {
left: headerTitlePosition.left, left: headerTitlePosition.left,
right: headerTitlePosition.right right: headerTitlePosition.right
@ -102,7 +107,7 @@ const DiscussionMessagesView = ({ navigation, route }) => {
/> />
), ),
headerTitleAlign: 'center', headerTitleAlign: 'center',
headerTitle: I18n.t('Discussion'), headerTitle: I18n.t('Discussions'),
headerTitleContainerStyle: { headerTitleContainerStyle: {
left: null, left: null,
right: null right: null
@ -121,54 +126,34 @@ const DiscussionMessagesView = ({ navigation, route }) => {
return options; return options;
}; };
// const onCancelSearchPress = () => {
// setIsSearching(false);
// setSearchText('');
// setHeader();
// };
useEffect(() => { useEffect(() => {
if (!mounted.current) { load();
load(); const options = setHeader();
mounted.current = true; navigation.setOptions(options);
} else {
setHeader();
}
}, []); }, []);
const onThreadPress = debounce((item) => { const onDiscussionPress = debounce((item) => {
if (isMasterDetail) {
navigation.pop();
}
navigation.push('RoomView', { navigation.push('RoomView', {
rid: item.subscription.id, rid: item.drid, prid: item.rid, name: item.msg, t: 'p'
name: makeThreadName(item),
t,
roomUserId: RocketChat.getUidDirectMessage(item)
}); });
}, 1000, true); }, 1000, true);
const getBadgeColor = item => getBadgeColor({ item, theme, messageId: item?.id });
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
const renderItem = ({ item }) => { const renderItem = ({ item }) => (
const badgeColor = getBadgeColor(item); <Message
return ( item={item}
<Item // eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/jsx-props-no-spreading user={item.id}
{...{ rid={rid}
item, onDiscussionPress={onDiscussionPress}
user, baseUrl={baseUrl}
navigation, timeFormat={Message_TimeFormat}
baseUrl, useRealName={useRealName}
useRealName, autoTranslateRoom={canAutoTranslate && autoTranslate}
badgeColor autoTranslateLanguage={autoTranslateLanguage}
}} />
onPress={onThreadPress} );
/>
);
};
if (!discussions?.length) { if (!discussions?.length) {
return ( return (
@ -186,7 +171,6 @@ const DiscussionMessagesView = ({ navigation, route }) => {
renderItem={renderItem} renderItem={renderItem}
// style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} // style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
// contentContainerStyle={styles.contentContainer} // contentContainerStyle={styles.contentContainer}
onEndReached={load}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
maxToRenderPerBatch={5} maxToRenderPerBatch={5}
windowSize={10} windowSize={10}

View File

@ -985,7 +985,9 @@ class RoomActionsView extends React.Component {
rid, rid,
t, t,
prid, prid,
name: 'Discussions' canAutoTranslate,
autoTranslate: room.autoTranslate,
autoTranslateLanguage: room.autoTranslateLanguage
} }
})} })}
testID='room-actions-discussions' testID='room-actions-discussions'