chore: migrate DirectoryView to Hooks

app/lib/methods/helpers/announceSearchResultsForAccessibility.ts

@@ -0,0 +1,13 @@
+import { AccessibilityInfo } from 'react-native';
+
+import I18n from '../../../i18n';
+
+export const announceSearchResultsForAccessibility = (count: number): void => {
+	if (count < 1) {
+		AccessibilityInfo.announceForAccessibility(I18n.t('No_results_found'));
+		return;
+	}
+
+	const message = count === 1 ? I18n.t('One_result_found') : I18n.t('Search_Results_found', { count: count.toString() });
+	AccessibilityInfo.announceForAccessibility(message);
+};

app/lib/methods/helpers/index.ts

@@ -18,3 +18,4 @@ export * from './image';
 export * from './emitter';
 export * from './parseJson';
 export * from './fileDownload';
+export * from './announceSearchResultsForAccessibility';

app/views/DirectoryView/hooks/useDirectorySearch.ts

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+
+import { type IServerRoom } from '../../../definitions';
+import { announceSearchResultsForAccessibility } from '../../../lib/methods/helpers/announceSearchResultsForAccessibility';
+import { useDebounce } from '../../../lib/methods/helpers/debounce';
+import log, { events, logEvent } from '../../../lib/methods/helpers/log';
+import { getDirectory } from '../../../lib/services/restApi';
+
+export const useDirectorySearch = (directoryDefaultView: string) => {
+	'use memo';
+
+	const [data, setData] = useState<IServerRoom[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [text, setText] = useState('');
+	const [total, setTotal] = useState(-1);
+	const [globalUsers, setGlobalUsers] = useState(true);
+	const [type, setType] = useState(directoryDefaultView);
+
+	// useDebounce keeps a ref to the latest callback, so this always reads fresh state
+	const load = useDebounce(async ({ newSearch = false }: { newSearch?: boolean } = {}) => {
+		if (!newSearch && (loading || data.length === total)) {
+			return;
+		}
+
+		if (newSearch) {
+			setData([]);
+			setTotal(-1);
+		}
+		setLoading(true);
+
+		try {
+			const directories = await getDirectory({
+				text,
+				type,
+				workspace: globalUsers ? 'all' : 'local',
+				offset: newSearch ? 0 : data.length,
+				count: 50,
+				sort: type === 'users' ? { username: 1 } : { usersCount: -1 }
+			});
+			if (directories.success) {
+				setData(prev => [...(newSearch ? [] : prev), ...(directories.result as IServerRoom[])]);
+				setTotal(directories.total);
+				setLoading(false);
+				// Announce the full total on a fresh search; loadMore pages shouldn't re-announce
+				if (newSearch) {
+					announceSearchResultsForAccessibility(directories.total);
+				}
+			} else {
+				setLoading(false);
+			}
+		} catch (e) {
+			log(e);
+			setLoading(false);
+		}
+	}, 200);
+
+	const search = () => load({ newSearch: true });
+	const loadMore = () => load({});
+
+	const onSearchChangeText = (newText: string) => {
+		setText(newText);
+		search();
+	};
+
+	const changeType = (newType: string) => {
+		setType(newType);
+
+		if (newType === 'users') {
+			logEvent(events.DIRECTORY_SEARCH_USERS);
+		} else if (newType === 'channels') {
+			logEvent(events.DIRECTORY_SEARCH_CHANNELS);
+		} else if (newType === 'teams') {
+			logEvent(events.DIRECTORY_SEARCH_TEAMS);
+		}
+
+		search();
+	};
+
+	const toggleWorkspace = () => {
+		setGlobalUsers(prev => !prev);
+		search();
+	};
+
+	// Run the initial search when the hook mounts; `search` is stable, so this fires once
+	useEffect(() => {
+		search();
+	}, []);
+
+	return {
+		data,
+		loading,
+		type,
+		globalUsers,
+		search,
+		loadMore,
+		onSearchChangeText,
+		changeType,
+		toggleWorkspace
+	};
+};