import React, { useEffect, 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 ActivityIndicator from '../containers/ActivityIndicator'; import I18n from '../i18n'; 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 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'; import Message from '../containers/message'; import { sanitizeLikeString } from '../lib/database/utils'; const DiscussionMessagesView = ({ navigation, route }) => { const rid = route.params?.rid; const canAutoTranslate = route.params?.canAutoTranslate; const autoTranslate = route.params?.autoTranslate; const autoTranslateLanguage = route.params?.autoTranslateLanguage; const baseUrl = useSelector(state => state.server.server); 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 [loading, setLoading] = useState(false); const [discussions, setDiscussions] = useState([]); const [isSearching, setIsSearching] = useState(false); const { theme } = useTheme(); const insets = useSafeAreaInsets(); const load = async() => { if (loading) { return; } setLoading(true); try { const db = database.active; const subCollection = db.get('messages'); const subDiscussions = await subCollection.query( Q.where('rid', Q.eq(rid)), Q.where('drid', Q.notEq(null)) ); setDiscussions(subDiscussions); setLoading(false); } catch (e) { log(e); } }; const onSearchChangeText = debounce(async(text) => { try { const db = database.active; const whereClause = [ Q.where('rid', Q.eq(rid)), Q.where('drid', Q.notEq(null)) ]; if (text?.trim()) { whereClause.push(Q.where('msg', Q.like(`%${ sanitizeLikeString(text?.trim()) }%`))); } const discussionsMessages = await db .get('messages') .query(...whereClause); setDiscussions(discussionsMessages); } catch (e) { log(e); } }, 300); const onCancelSearchPress = () => { setIsSearching(false); load(); }; const onSearchPress = () => { setIsSearching(true); }; const setHeader = () => { if (isSearching) { const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 }); return { headerTitleAlign: 'left', headerLeft: () => ( ), headerTitle: () => , headerTitleContainerStyle: { left: headerTitlePosition.left, right: headerTitlePosition.right }, headerRight: () => null }; } const options = { headerLeft: () => ( navigation.pop()} tintColor={themes[theme].headerTintColor} /> ), headerTitleAlign: 'center', headerTitle: I18n.t('Discussions'), headerTitleContainerStyle: { left: null, right: null } }; if (isMasterDetail) { options.headerLeft = () => ; } options.headerRight = () => ( ); return options; }; useEffect(() => { load(); }, []); useEffect(() => { const options = setHeader(); navigation.setOptions(options); }, [navigation, isSearching]); const onDiscussionPress = debounce((item) => { navigation.push('RoomView', { rid: item.drid, prid: item.rid, name: item.msg, t: 'p' }); }, 1000, true); // eslint-disable-next-line react/prop-types const renderItem = ({ item }) => ( ); if (!discussions?.length) { return ( <> ); } return ( item.msg} // style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]} // contentContainerStyle={styles.contentContainer} onEndReachedThreshold={0.5} maxToRenderPerBatch={5} windowSize={10} initialNumToRender={7} removeClippedSubviews={isIOS} ItemSeparatorComponent={List.Separator} ListFooterComponent={loading ? : null} scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444 /> ); }; DiscussionMessagesView.propTypes = { navigation: PropTypes.object, route: PropTypes.object }; export default DiscussionMessagesView;