chore: migrate ThreadMessagesView to hooks

app/views/ThreadMessagesView/components/EmptyThreads.tsx

@@ -0,0 +1,21 @@
+import I18n from '../../../i18n';
+import BackgroundContainer from '../../../containers/BackgroundContainer';
+import { Filter } from '../filters';
+
+type TEmptyThreads = {
+	currentFilter: Filter;
+};
+
+const EmptyThreads = ({ currentFilter }: TEmptyThreads) => {
+	let text;
+	if (currentFilter === Filter.Following) {
+		text = I18n.t('No_threads_following');
+	} else if (currentFilter === Filter.Unread) {
+		text = I18n.t('No_threads_unread');
+	} else {
+		text = I18n.t('No_threads');
+	}
+	return <BackgroundContainer text={text} />;
+};
+
+export default EmptyThreads;

app/views/ThreadMessagesView/Item.stories.tsx → app/views/ThreadMessagesView/components/Item/Item.stories.tsx

@@ -1,9 +1,9 @@
 import { ScrollView } from 'react-native';
 
-import * as List from '../../containers/List';
-import { themes } from '../../lib/constants/colors';
-import { ThemeContext, type TSupportedThemes } from '../../theme';
-import Item, { type IItem } from './Item';
+import * as List from '../../../../containers/List';
+import { themes } from '../../../../lib/constants/colors';
+import { ThemeContext, type TSupportedThemes } from '../../../../theme';
+import Item, { type IItem } from '.';
 
 const author = {
 	_id: 'userid',

app/views/ThreadMessagesView/components/Item/Item.test.tsx

@@ -0,0 +1,4 @@
+import { generateSnapshots } from '../../../../../.rnstorybook/generateSnapshots';
+import * as stories from './Item.stories';
+
+generateSnapshots(stories);

app/views/ThreadMessagesView/Item.tsx → app/views/ThreadMessagesView/components/Item/index.tsx

@@ -1,60 +1,15 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { type ReactElement } from 'react';
 
-import { useTheme } from '../../theme';
-import Avatar from '../../containers/Avatar';
-import sharedStyles from '../Styles';
-import { themes } from '../../lib/constants/colors';
-import { MarkdownPreview } from '../../containers/markdown';
-import { formatDateThreads, makeThreadName } from '../../lib/methods/helpers/room';
-import ThreadDetails from '../../containers/ThreadDetails';
-import { type TThreadModel } from '../../definitions';
-import Touch from '../../containers/Touch';
-
-const styles = StyleSheet.create({
-	container: {
-		flexDirection: 'row',
-		padding: 16
-	},
-	contentContainer: {
-		flexDirection: 'column',
-		flex: 1
-	},
-	titleContainer: {
-		flexDirection: 'row',
-		marginBottom: 2,
-		alignItems: 'center'
-	},
-	title: {
-		flexShrink: 1,
-		fontSize: 18,
-		...sharedStyles.textMedium
-	},
-	time: {
-		fontSize: 14,
-		marginLeft: 4,
-		...sharedStyles.textRegular
-	},
-	avatar: {
-		marginRight: 8
-	},
-	threadDetails: {
-		marginTop: 8
-	},
-	badge: {
-		width: 8,
-		height: 8,
-		borderRadius: 4,
-		marginHorizontal: 8,
-		alignSelf: 'center'
-	},
-	messageContainer: {
-		flexDirection: 'row'
-	},
-	markdown: {
-		flex: 1
-	}
-});
+import { useTheme } from '../../../../theme';
+import Avatar from '../../../../containers/Avatar';
+import { themes } from '../../../../lib/constants/colors';
+import { MarkdownPreview } from '../../../../containers/markdown';
+import { formatDateThreads, makeThreadName } from '../../../../lib/methods/helpers/room';
+import ThreadDetails from '../../../../containers/ThreadDetails';
+import { type TThreadModel } from '../../../../definitions';
+import Touch from '../../../../containers/Touch';
+import styles from './styles';
 
 export interface IItem {
 	item: TThreadModel;

app/views/ThreadMessagesView/components/Item/styles.ts

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+
+import sharedStyles from '../../../Styles';
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		padding: 16
+	},
+	contentContainer: {
+		flexDirection: 'column',
+		flex: 1
+	},
+	titleContainer: {
+		flexDirection: 'row',
+		marginBottom: 2,
+		alignItems: 'center'
+	},
+	title: {
+		flexShrink: 1,
+		fontSize: 18,
+		...sharedStyles.textMedium
+	},
+	time: {
+		fontSize: 14,
+		marginLeft: 4,
+		...sharedStyles.textRegular
+	},
+	avatar: {
+		marginRight: 8
+	},
+	threadDetails: {
+		marginTop: 8
+	},
+	badge: {
+		width: 8,
+		height: 8,
+		borderRadius: 4,
+		marginHorizontal: 8,
+		alignSelf: 'center'
+	},
+	messageContainer: {
+		flexDirection: 'row'
+	},
+	markdown: {
+		flex: 1
+	}
+});
+
+export default styles;

app/views/ThreadMessagesView/definitions.ts

@@ -0,0 +1,9 @@
+import { type IBaseScreen } from '../../definitions';
+import { type ChatsStackParamList } from '../../stacks/types';
+
+export interface ISearchThreadMessages {
+	isSearching: boolean;
+	searchText: string;
+}
+
+export interface IThreadMessagesViewProps extends IBaseScreen<ChatsStackParamList, 'ThreadMessagesView'> {}

app/views/ThreadMessagesView/hooks/useSubscription.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
+import { type Subscription } from 'rxjs';
+
+import { type TSubscriptionModel } from '../../../definitions';
+import log from '../../../lib/methods/helpers/log';
+import database from '../../../lib/database';
+
+interface IUseSubscriptionProps {
+	rid: string;
+}
+
+const useSubscription = ({ rid }: IUseSubscriptionProps) => {
+	const subSubscription = useRef<Subscription | null>(null);
+
+	const [subscription, setSubscription] = useState<TSubscriptionModel>({} as TSubscriptionModel);
+	const [subscriptionLoaded, setSubscriptionLoaded] = useState(false);
+
+	const initSubscription = async () => {
+		try {
+			const db = database.active;
+
+			const subscription = await db.get('subscriptions').find(rid);
+			const observable = subscription.observe();
+			subSubscription.current = observable.subscribe(data => {
+				setSubscription(data);
+			});
+			setSubscriptionLoaded(true);
+		} catch (e) {
+			setSubscriptionLoaded(true);
+			log(e);
+		}
+	};
+
+	const unsubscribe = () => {
+		subSubscription.current?.unsubscribe();
+	};
+
+	useEffect(() => {
+		initSubscription();
+
+		return () => {
+			unsubscribe();
+		};
+	}, []);
+
+	return {
+		subscription,
+		subscriptionLoaded
+	};
+};
+
+export default useSubscription;

app/views/ThreadMessagesView/hooks/useThreads.ts

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react';
+import { Q } from '@nozbe/watermelondb';
+import { type Subscription } from 'rxjs';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { getSyncThreadsList, getThreadsList } from '../../../lib/services/restApi';
+import { type TSubscriptionModel, type TThreadModel } from '../../../definitions';
+import { sanitizeLikeString } from '../../../lib/database/utils';
+import { type ISearchThreadMessages } from '../definitions';
+import log from '../../../lib/methods/helpers/log';
+import database from '../../../lib/database';
+import updateThreads from '../methods/updateThreads';
+
+interface IUseThreadsProps {
+	search: ISearchThreadMessages;
+	subscription: TSubscriptionModel;
+	subscriptionLoaded: boolean;
+	rid: string;
+}
+
+const API_FETCH_COUNT = 50;
+
+const useThreads = ({ search, subscription, subscriptionLoaded, rid }: IUseThreadsProps) => {
+	const threadsSubscription = useRef<Subscription | null>(null);
+	const didInit = useRef(false);
+	const [loading, setLoading] = useState(false);
+	const [end, setEnd] = useState(false);
+	const [threads, setThreads] = useState<TThreadModel[]>([]);
+	const [offset, setOffset] = useState(0);
+
+	const init = () => {
+		if (!subscription._id) {
+			return load();
+		}
+		try {
+			if (subscription.lastThreadSync) {
+				sync(subscription.lastThreadSync);
+			} else {
+				load();
+			}
+		} catch (e) {
+			log(e);
+		}
+	};
+
+	const load = useDebouncedCallback(async (lastThreadSync?: Date) => {
+		if (end || loading) {
+			return;
+		}
+		setLoading(true);
+
+		try {
+			const result = await getThreadsList({
+				rid,
+				count: API_FETCH_COUNT,
+				offset,
+				text: search.searchText
+			});
+
+			if (result.success) {
+				const built = await updateThreads({ subscription, update: result.threads, lastThreadSync: lastThreadSync ?? new Date() });
+				if (!subscription._id && built) {
+					setThreads(prev => [...prev, ...(built as TThreadModel[])]);
+				}
+				setLoading(false);
+				setEnd(result.count < API_FETCH_COUNT);
+				setOffset(offset + API_FETCH_COUNT);
+			}
+		} catch (e) {
+			log(e);
+			setLoading(false);
+			setEnd(true);
+		}
+	}, 300);
+
+	const loadMore = () => load();
+
+	const sync = async (updatedSince: Date) => {
+		setLoading(true);
+		try {
+			const result = await getSyncThreadsList({
+				rid,
+				updatedSince: updatedSince.toISOString()
+			});
+			if (result.success && result.threads) {
+				const { update, remove } = result.threads;
+				updateThreads({ subscription, update, remove, lastThreadSync: updatedSince });
+			}
+			setLoading(false);
+		} catch (e) {
+			log(e);
+			setLoading(false);
+		}
+	};
+
+	const handleThreadsSubscription = ({ searchText }: { searchText?: string }) => {
+		if (!subscription._id) {
+			return;
+		}
+		try {
+			const db = database.active;
+			threadsSubscription.current?.unsubscribe();
+
+			const whereClause = [Q.where('rid', rid), Q.sortBy('tlm', Q.desc)];
+			if (searchText?.trim()) {
+				whereClause.push(Q.where('msg', Q.like(`%${sanitizeLikeString(searchText.trim())}%`)));
+			}
+
+			const threadsObservable = db
+				.get('threads')
+				.query(...whereClause)
+				.observeWithColumns(['_updated_at']);
+
+			threadsSubscription.current = threadsObservable.subscribe((threads: TThreadModel[]) => {
+				setThreads(threads);
+			});
+		} catch (e) {
+			log(e);
+		}
+	};
+
+	useEffect(() => {
+		if (!subscriptionLoaded || didInit.current) {
+			return;
+		}
+		didInit.current = true;
+		init();
+		handleThreadsSubscription({});
+	}, [subscriptionLoaded]);
+
+	useEffect(() => () => threadsSubscription.current?.unsubscribe(), []);
+
+	return {
+		loading,
+		loadMore,
+		threads,
+		handleThreadsSubscription
+	};
+};
+
+export default useThreads;