refactor: endpoint call with useQuery and handle result states

Author: juliajforesti

apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.tsx

@@ -1,4 +1,3 @@
-import { Callout } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -22,7 +21,6 @@ type InviteUsersProps = {
 	onClickEdit: () => void;
 	captionText: string;
 	linkText: string;
-	error?: Error;
 };
 
 const InviteUsers = ({
@@ -35,7 +33,6 @@ const InviteUsers = ({
 	daysAndMaxUses,
 	captionText,
 	linkText,
-	error,
 }: InviteUsersProps): ReactElement => {
 	const { t } = useTranslation();
 
@@ -47,9 +44,8 @@ const InviteUsers = ({
 				{onClose && <ContextualbarClose onClick={onClose} />}
 			</ContextualbarHeader>
 			<ContextualbarScrollableContent>
-				{error && <Callout type='danger'>{error.toString()}</Callout>}
-				{isEditing && !error && <EditInviteLink onClickNewLink={onClickNewLink} daysAndMaxUses={daysAndMaxUses} />}
-				{!isEditing && !error && <InviteLink captionText={captionText} onClickEdit={onClickEdit} linkText={linkText} />}
+				{isEditing && <EditInviteLink onClickNewLink={onClickNewLink} daysAndMaxUses={daysAndMaxUses} />}
+				{!isEditing && <InviteLink captionText={captionText} onClickEdit={onClickEdit} linkText={linkText} />}
 			</ContextualbarScrollableContent>
 		</>
 	);

apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersError.tsx

@@ -0,0 +1,31 @@
+import { Callout } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	ContextualbarHeader,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarScrollableContent,
+} from '../../../../../components/Contextualbar';
+
+type InviteUsersProps = {
+	onClose: () => void;
+	error: Error;
+};
+
+const InviteUsersError = ({ onClose, error }: InviteUsersProps): ReactElement => {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Invite_Users')}</ContextualbarTitle>
+				{onClose && <ContextualbarClose onClick={onClose} />}
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>{error && <Callout type='danger'>{error.toString()}</Callout>}</ContextualbarScrollableContent>
+		</>
+	);
+};
+
+export default InviteUsersError;

apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+	ContextualbarHeader,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarScrollableContent,
+} from '../../../../../components/Contextualbar';
+
+type InviteUsersProps = {
+	onClose: () => void;
+};
+
+const InviteUsersLoading = ({ onClose }: InviteUsersProps): ReactElement => {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Invite_Users')}</ContextualbarTitle>
+				{onClose && <ContextualbarClose onClick={onClose} />}
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				<Skeleton w='full' />
+			</ContextualbarScrollableContent>
+		</>
+	);
+};
+
+export default InviteUsersLoading;

apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersWithData.tsx

@@ -1,10 +1,13 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useTranslation, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import { useState, useEffect } from 'react';
 
 import InviteUsers from './InviteUsers';
+import InviteUsersError from './InviteUsersError';
+import InviteUsersLoading from './InviteUsersLoading';
 import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
 import { useRoomToolbox } from '../../../contexts/RoomToolboxContext';
 
@@ -19,18 +22,12 @@ const InviteUsersWithData = ({ rid, onClickBack }: InviteUsersWithDataProps): Re
 	const [
 		{
 			isEditing,
-			url,
-			caption,
-			error,
 			daysAndMaxUses: { days, maxUses },
 		},
 		setInviteState,
 	] = useState({
 		isEditing: false,
 		daysAndMaxUses: { days: '1', maxUses: '0' },
-		url: '',
-		caption: '',
-		error: undefined as Error | undefined,
 	});
 
 	const { closeTab } = useRoomToolbox();
@@ -41,7 +38,7 @@ const InviteUsersWithData = ({ rid, onClickBack }: InviteUsersWithDataProps): Re
 	const handleBackToLink = useEffectEvent(() => setInviteState((prevState) => ({ ...prevState, isEditing: false })));
 
 	const linkExpirationText = useEffectEvent(
-		(data: {
+		(data?: {
 			days: number;
 			maxUses: number;
 			rid: string;
@@ -79,36 +76,47 @@ const InviteUsersWithData = ({ rid, onClickBack }: InviteUsersWithDataProps): Re
 		},
 	);
 
+	const { data, isSuccess, error, isError, isLoading } = useQuery({
+		queryKey: ['findOrCreateInvite', days, maxUses],
+		queryFn: async () => findOrCreateInvite({ rid, days: Number(days), maxUses: Number(maxUses) }),
+	});
+
 	useEffect(() => {
-		(async (): Promise<void> => {
-			try {
-				const data = await findOrCreateInvite({ rid, days: Number(days), maxUses: Number(maxUses) });
-				setInviteState((prevState) => ({ ...prevState, url: data?.url, caption: linkExpirationText(data) }));
-				dispatchToastMessage({ type: 'success', message: t('Invite_link_generated') });
-			} catch (error) {
-				setInviteState((prevState) => ({ ...prevState, error: error as Error }));
-			}
-		})();
-	}, [dispatchToastMessage, t, findOrCreateInvite, linkExpirationText, rid, days, maxUses]);
+		if (isSuccess) {
+			setInviteState((prevState) => ({ ...prevState, url: data?.url, caption: linkExpirationText(data) }));
+			dispatchToastMessage({ type: 'success', message: t('Invite_link_generated') });
+		}
+	}, [dispatchToastMessage, linkExpirationText, data, isSuccess, t]);
 
 	const handleGenerateLink = useEffectEvent((daysAndMaxUses: { days: string; maxUses: string }) => {
 		setInviteState((prevState) => ({ ...prevState, daysAndMaxUses, isEditing: false }));
 	});
 
-	return (
-		<InviteUsers
-			isEditing={isEditing}
-			error={error}
-			linkText={url}
-			captionText={caption}
-			daysAndMaxUses={{ days, maxUses }}
-			onClose={closeTab}
-			onClickBackMembers={onClickBack}
-			onClickBackLink={handleBackToLink}
-			onClickEdit={handleEdit}
-			onClickNewLink={handleGenerateLink}
-		/>
-	);
+	if (isError) {
+		return <InviteUsersError error={error} onClose={closeTab} />;
+	}
+
+	if (isLoading) {
+		return <InviteUsersLoading onClose={closeTab} />;
+	}
+
+	if (isSuccess && data) {
+		return (
+			<InviteUsers
+				isEditing={isEditing}
+				linkText={data?.url}
+				captionText={linkExpirationText(data)}
+				daysAndMaxUses={{ days, maxUses }}
+				onClose={closeTab}
+				onClickBackMembers={onClickBack}
+				onClickBackLink={handleBackToLink}
+				onClickEdit={handleEdit}
+				onClickNewLink={handleGenerateLink}
+			/>
+		);
+	}
+
+	return <InviteUsersError error={new Error(t('Something_Went_Wrong'))} onClose={closeTab} />;
 };
 
 export default InviteUsersWithData;