fix: Invite link registration not navigating to homepage (#30766)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>

.changeset/blue-trainers-explain.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/ui-contexts": patch
+"@rocket.chat/web-ui-registration": patch
+---
+
+Fixed an issue in the invite registration flow in which the user would not be automatically redirected to the homepage upon succesfully submiting the user registration form.

apps/meteor/client/views/invite/InvitePage.tsx

@@ -1,96 +1,36 @@
 import { HeroLayout, HeroLayoutTitle } from '@rocket.chat/layout';
-import {
-	useToastMessageDispatch,
-	useSessionDispatch,
-	useRoute,
-	useRouteParameter,
-	useUserId,
-	useSetting,
-	useTranslation,
-} from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { useRouteParameter, useUserId, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import { sdk } from '../../../app/utils/client/lib/SDKClient';
 import LoginPage from '../root/MainLayout/LoginPage';
 import PageLoading from '../root/PageLoading';
+import { useInviteTokenMutation } from './hooks/useInviteTokenMutation';
+import { useValidateInviteQuery } from './hooks/useValidateInviteQuery';
 
 const InvitePage = (): ReactElement => {
 	const t = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
 
 	const token = useRouteParameter('hash');
-	const registrationForm = useSetting('Accounts_RegistrationForm');
-	const setLoginDefaultState = useSessionDispatch('loginDefaultState');
 	const userId = useUserId();
-	const homeRoute = useRoute('home');
-	const groupRoute = useRoute('group');
-	const channelRoute = useRoute('channel');
+	const { isLoading, data: isValidInvite } = useValidateInviteQuery(userId, token);
 
-	const { isLoading, data } = useQuery(
-		['invite', token],
-		async () => {
-			if (!token) {
-				return false;
-			}
+	const getInviteRoomMutation = useInviteTokenMutation();
 
-			try {
-				const { valid } = await sdk.rest.post('/v1/validateInviteToken', { token });
-
-				return valid;
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: t('Failed_to_validate_invite_token') });
-				return false;
-			}
-		},
-		{
-			onSuccess: async (valid) => {
-				if (!token) {
-					return;
-				}
-
-				if (registrationForm !== 'Disabled') {
-					setLoginDefaultState('register');
-				} else {
-					setLoginDefaultState('login');
-				}
-
-				if (!valid || !userId) {
-					return;
-				}
-
-				try {
-					const result = await sdk.rest.post('/v1/useInviteToken', { token });
-
-					if (!result.room.name) {
-						dispatchToastMessage({ type: 'error', message: t('Failed_to_activate_invite_token') });
-						homeRoute.push();
-						return;
-					}
-
-					if (result.room.t === 'p') {
-						groupRoute.push({ name: result.room.name });
-						return;
-					}
-
-					channelRoute.push({ name: result.room.name });
-				} catch (error) {
-					dispatchToastMessage({ type: 'error', message: t('Failed_to_activate_invite_token') });
-					homeRoute.push();
-				}
-			},
-		},
-	);
-
-	if (data) {
-		return <LoginPage />;
-	}
+	useEffect(() => {
+		if (userId && token) {
+			getInviteRoomMutation(token);
+		}
+	}, [getInviteRoomMutation, token, userId]);
 
 	if (isLoading) {
 		return <PageLoading />;
 	}
 
+	if (isValidInvite) {
+		return <LoginPage />;
+	}
+
 	return (
 		<HeroLayout>
 			<HeroLayoutTitle>{t('Invalid_or_expired_invite_token')}</HeroLayoutTitle>

apps/meteor/client/views/invite/hooks/useInviteTokenMutation.ts

@@ -0,0 +1,35 @@
+import { useEndpoint, useRouter, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+
+export const useInviteTokenMutation = () => {
+	const t = useTranslation();
+	const router = useRouter();
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const getInviteRoom = useEndpoint('POST', '/v1/useInviteToken');
+
+	const { mutate } = useMutation({
+		mutationFn: (token: string) => getInviteRoom({ token }),
+		onSuccess: (result) => {
+			if (!result.room.name) {
+				dispatchToastMessage({ type: 'error', message: t('Failed_to_activate_invite_token') });
+				router.navigate('/home');
+				return;
+			}
+
+			if (result.room.t === 'p') {
+				router.navigate(`/group/${result.room.name}`);
+				return;
+			}
+
+			router.navigate(`/channel/${result.room.name}`);
+		},
+		onError: () => {
+			dispatchToastMessage({ type: 'error', message: t('Failed_to_activate_invite_token') });
+			router.navigate('/home');
+		},
+	});
+
+	return mutate;
+};

apps/meteor/client/views/invite/hooks/useValidateInviteQuery.ts

@@ -0,0 +1,53 @@
+import { useEndpoint, useSessionDispatch, useSetting, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import { useInviteTokenMutation } from './useInviteTokenMutation';
+
+export const useValidateInviteQuery = (userId: string | null, token: string | undefined) => {
+	const t = useTranslation();
+
+	const registrationForm = useSetting('Accounts_RegistrationForm');
+
+	const setLoginDefaultState = useSessionDispatch('loginDefaultState');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const getInviteRoomMutation = useInviteTokenMutation();
+
+	const handleValidateInviteToken = useEndpoint('POST', '/v1/validateInviteToken');
+
+	return useQuery(
+		['invite', token],
+		async () => {
+			if (!token) {
+				return false;
+			}
+
+			try {
+				const { valid } = await handleValidateInviteToken({ token });
+
+				return valid;
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: t('Failed_to_validate_invite_token') });
+				return false;
+			}
+		},
+		{
+			onSuccess: async (valid) => {
+				if (!token) {
+					return;
+				}
+
+				if (registrationForm !== 'Disabled') {
+					setLoginDefaultState('register');
+				} else {
+					setLoginDefaultState('login');
+				}
+
+				if (!valid || !userId) {
+					return;
+				}
+
+				return getInviteRoomMutation(token);
+			},
+		},
+	);
+};