Chore: use useQuery in place of deprecated useEndpointData

apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppReleases/AppReleases.tsx

@@ -1,24 +1,43 @@
 import type { App } from '@rocket.chat/core-typings';
 import { Accordion } from '@rocket.chat/fuselage';
+import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import { useEndpointData } from '../../../../../../hooks/useEndpointData';
-import { AsyncStatePhase } from '../../../../../../lib/asyncState/AsyncStatePhase';
 import AccordionLoading from '../../../AccordionLoading';
 import AppReleasesItem from './AppReleasesItem';
 
 // TODO: replace useEndpointData
 const AppReleases = ({ id }: { id: App['id'] }): ReactElement => {
-	const result = useEndpointData('/apps/:id/versions', { keys: { id } });
+	const getVersions = useEndpoint('GET', '/apps/:id/versions', { id });
+	const dispatchToastMessage = useToastMessageDispatch();
+	const t = useTranslation();
+
+	const { data, isLoading, isFetched } = useQuery(
+		['apps', id, 'versions'],
+		async () => {
+			const { apps } = await getVersions();
+
+			if (apps.length === 0) {
+				throw new Error(t('No_results_found'));
+			}
+			return apps;
+		},
+		{
+			onError: (error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			},
+		},
+	);
 
 	return (
 		<>
 			<Accordion width='100%' alignSelf='center'>
-				{result.phase === AsyncStatePhase.LOADING && <AccordionLoading />}
-				{result.phase === AsyncStatePhase.RESOLVED && (
+				{isLoading && <AccordionLoading />}
+				{isFetched && (
 					<>
-						{result.value.apps.map((release) => (
+						{data?.map((release) => (
 							<AppReleasesItem release={release} key={release.version} />
 						))}
 					</>

apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx

@@ -1,10 +1,9 @@
 import { Box, Button, ButtonGroup, Skeleton, Throbber, InputBox, Callout } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 
-import { AsyncStatePhase } from '../../../hooks/useAsyncState';
-import { useEndpointData } from '../../../hooks/useEndpointData';
 import EditCustomEmoji from './EditCustomEmoji';
 
 type EditCustomEmojiWithDataProps = {
@@ -17,18 +16,14 @@ const EditCustomEmojiWithData: FC<EditCustomEmojiWithDataProps> = ({ _id, onChan
 	const t = useTranslation();
 	const query = useMemo(() => ({ query: JSON.stringify({ _id }) }), [_id]);
 
-	const {
-		value: data = {
-			emojis: {
-				update: [],
-			},
-		},
-		phase: state,
-		error,
-		reload,
-	} = useEndpointData('/v1/emoji-custom.list', { params: query });
+	const getEmojis = useEndpoint('GET', '/v1/emoji-custom.list');
 
-	if (state === AsyncStatePhase.LOADING) {
+	const { data, isLoading, error, refetch } = useQuery(['custom-emojis', query], async () => {
+		const emoji = await getEmojis(query);
+		return emoji;
+	});
+
+	if (isLoading) {
 		return (
 			<Box pb='x20'>
 				<Skeleton mbs='x8' />
@@ -58,7 +53,7 @@ const EditCustomEmojiWithData: FC<EditCustomEmojiWithDataProps> = ({ _id, onChan
 
 	const handleChange = (): void => {
 		onChange?.();
-		reload?.();
+		refetch?.();
 	};
 
 	return <EditCustomEmoji data={data.emojis.update[0]} close={close} onChange={handleChange} {...props} />;

apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Pagination, States, StatesIcon, StatesActions, StatesAction, StatesTitle } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useRouteParameter, usePermission, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useRoute, useRouteParameter, usePermission, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useMemo, useState, useCallback } from 'react';
@@ -45,8 +45,25 @@ const CustomSoundsRoute = (): ReactElement => {
 		500,
 	);
 
-	const getCustomSoundsList = useEndpoint('GET', '/v1/custom-sounds.list');
-	const { data, isSuccess, isLoading, isError, refetch } = useQuery(['custom-sounds', query], () => getCustomSoundsList(query));
+	const getSounds = useEndpoint('GET', '/v1/custom-sounds.list');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { data, refetch, isLoading, isError, isSuccess } = useQuery(
+		['custom-sounds', query],
+		async () => {
+			const { sounds } = await getSounds(query);
+
+			if (sounds.length === 0) {
+				throw new Error(t('No_results_found'));
+			}
+			return sounds;
+		},
+		{
+			onError: (error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			},
+		},
+	);
 
 	const handleItemClick = useCallback(
 		(_id) => (): void => {
@@ -102,13 +119,13 @@ const CustomSoundsRoute = (): ReactElement => {
 								</GenericTableBody>
 							</GenericTable>
 						)}
-						{isSuccess && data && data.sounds.length > 0 && (
+						{isSuccess && data && data.length > 0 && (
 							<>
 								<FilterByText onChange={({ text }): void => setParams(text)} />
 								<GenericTable>
 									<GenericTableHeader>{headers}</GenericTableHeader>
 									<GenericTableBody>
-										{data?.sounds.map((sound) => (
+										{data?.map((sound) => (
 											<CustomSoundRow key={sound._id} sound={sound} onClick={handleItemClick} />
 										))}
 									</GenericTableBody>
@@ -117,14 +134,14 @@ const CustomSoundsRoute = (): ReactElement => {
 									divider
 									current={current}
 									itemsPerPage={itemsPerPage}
-									count={data.total || 0}
+									count={data.length || 0}
 									onSetItemsPerPage={onSetItemsPerPage}
 									onSetCurrent={onSetCurrent}
 									{...paginationProps}
 								/>
 							</>
 						)}
-						{isSuccess && data?.sounds.length === 0 && (
+						{isSuccess && data?.length === 0 && (
 							<States>
 								<StatesIcon name='magnifier' />
 								<StatesTitle>{t('No_results_found')}</StatesTitle>

apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, ButtonGroup, Skeleton, Throbber, InputBox } from '@rocket.chat/fuselage';
+import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { AsyncStatePhase } from '../../../hooks/useAsyncState';
-import { useEndpointData } from '../../../hooks/useEndpointData';
 import EditSound from './EditSound';
 
 type EditCustomSoundProps = {
@@ -12,12 +12,30 @@ type EditCustomSoundProps = {
 	close?: () => void;
 };
 
-function EditCustomSound({ _id, onChange, ...props }: EditCustomSoundProps): ReactElement {
-	const query = useMemo(() => ({ query: JSON.stringify({ _id }) }), [_id]);
+function EditCustomSound({ _id, onChange, ...props }: EditCustomSoundProps): ReactElement | null {
+	const t = useTranslation();
+	const getSounds = useEndpoint('GET', '/v1/custom-sounds.list');
 
-	const { value: data, phase: state, error, reload } = useEndpointData('/v1/custom-sounds.list', { params: query });
+	const dispatchToastMessage = useToastMessageDispatch();
 
-	if (state === AsyncStatePhase.LOADING) {
+	const { data, isLoading, refetch } = useQuery(
+		['custom-sounds', _id],
+		async () => {
+			const { sounds } = await getSounds({ query: JSON.stringify({ _id }) });
+
+			if (sounds.length === 0) {
+				throw new Error(t('No_results_found'));
+			}
+			return sounds[0];
+		},
+		{
+			onError: (error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			},
+		},
+	);
+
+	if (isLoading) {
 		return (
 			<Box pb='x20'>
 				<Skeleton mbs='x8' />
@@ -41,20 +59,16 @@ function EditCustomSound({ _id, onChange, ...props }: EditCustomSoundProps): Rea
 		);
 	}
 
-	if (error || !data || data.sounds.length < 1) {
-		return (
-			<Box fontScale='h2' pb='x20'>
-				{error}
-			</Box>
-		);
+	if (!data) {
+		return null;
 	}
 
 	const handleChange: () => void = () => {
 		onChange?.();
-		reload?.();
+		refetch?.();
 	};
 
-	return <EditSound data={data.sounds[0]} onChange={handleChange} {...props} />;
+	return <EditSound data={data} onChange={handleChange} {...props} />;
 }
 
 export default EditCustomSound;

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx

@@ -1,11 +1,10 @@
 import type { IUserStatus } from '@rocket.chat/core-typings';
 import { Box, Button, ButtonGroup, Skeleton, Throbber, InputBox, Callout } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 
-import { AsyncStatePhase } from '../../../hooks/useAsyncState';
-import { useEndpointData } from '../../../hooks/useEndpointData';
 import CustomUserStatusForm from './CustomUserStatusForm';
 
 type CustomUserStatusFormWithDataProps = {
@@ -18,18 +17,23 @@ const CustomUserStatusFormWithData = ({ _id, onReload, onClose }: CustomUserStat
 	const t = useTranslation();
 	const query = useMemo(() => ({ query: JSON.stringify({ _id }) }), [_id]);
 
-	const { value: data, phase: state, error, reload } = useEndpointData('/v1/custom-user-status.list', { params: query });
+	const getCustomUserStatus = useEndpoint('GET', '/v1/custom-user-status.list');
+
+	const { data, isLoading, error, refetch } = useQuery(['custom-user-statuses', query], async () => {
+		const customUserStatus = await getCustomUserStatus(query);
+		return customUserStatus;
+	});
 
 	const handleReload = (): void => {
 		onReload?.();
-		reload?.();
+		refetch?.();
 	};
 
 	if (!_id) {
 		return <CustomUserStatusForm onReload={handleReload} onClose={onClose} />;
 	}
 
-	if (state === AsyncStatePhase.LOADING) {
+	if (isLoading) {
 		return (
 			<Box p='x20'>
 				<Skeleton mbs='x8' />
@@ -53,7 +57,7 @@ const CustomUserStatusFormWithData = ({ _id, onReload, onClose }: CustomUserStat
 		);
 	}
 
-	if (error || !data || data.statuses.length < 1) {
+	if (error || !data || data.count < 1) {
 		return (
 			<Box p='x20'>
 				<Callout type='danger'>{t('Custom_User_Status_Error_Invalid_User_Status')}</Callout>

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx

@@ -1,6 +1,7 @@
 import { States, StatesIcon, StatesTitle, Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, MutableRefObject } from 'react';
 import React, { useState, useMemo, useEffect } from 'react';
 
@@ -14,8 +15,6 @@ import {
 } from '../../../../components/GenericTable';
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
-import { AsyncStatePhase } from '../../../../lib/asyncState';
 import CustomUserStatusRow from './CustomUserStatusRow';
 
 type CustomUserStatusProps = {
@@ -42,26 +41,40 @@ const CustomUserStatus = ({ reload, onClick }: CustomUserStatusProps): ReactElem
 		500,
 	);
 
-	const { value, reload: reloadEndpoint, phase } = useEndpointData('/v1/custom-user-status.list', { params: query });
+	const getCustomUserStatus = useEndpoint('GET', '/v1/custom-user-status.list');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { data, isLoading, refetch, isFetched } = useQuery(
+		['custom-user-statuses', query],
+		async () => {
+			const { statuses } = await getCustomUserStatus(query);
+			return statuses;
+		},
+		{
+			onError: (error) => {
+				dispatchToastMessage({ type: 'error', message: error });
+			},
+		},
+	);
 
 	useEffect(() => {
-		reload.current = reloadEndpoint;
-	}, [reload, reloadEndpoint]);
+		reload.current = refetch;
+	}, [reload, refetch]);
 
-	if (phase === AsyncStatePhase.REJECTED) {
+	if (!data) {
 		return null;
 	}
 
 	return (
 		<>
 			<FilterByText onChange={({ text }): void => setText(text)} />
-			{value?.statuses.length === 0 && (
+			{data.length === 0 && (
 				<States>
 					<StatesIcon name='magnifier' />
 					<StatesTitle>{t('No_results_found')}</StatesTitle>
 				</States>
 			)}
-			{value?.statuses && value.statuses.length > 0 && (
+			{data && data.length > 0 && (
 				<>
 					<GenericTable>
 						<GenericTableHeader>
@@ -79,17 +92,17 @@ const CustomUserStatus = ({ reload, onClick }: CustomUserStatusProps): ReactElem
 							</GenericTableHeaderCell>
 						</GenericTableHeader>
 						<GenericTableBody>
-							{phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={2} />}
-							{value?.statuses.map((status) => (
+							{isLoading && <GenericTableLoadingTable headerCells={2} />}
+							{data?.map((status) => (
 								<CustomUserStatusRow key={status._id} status={status} onClick={onClick} />
 							))}
 						</GenericTableBody>
 					</GenericTable>
-					{phase === AsyncStatePhase.RESOLVED && (
+					{isFetched && (
 						<Pagination
 							current={current}
 							itemsPerPage={itemsPerPage}
-							count={value?.total || 0}
+							count={data.length}
 							onSetItemsPerPage={onSetItemsPerPage}
 							onSetCurrent={onSetCurrent}
 							{...paginationProps}