fix: Register Username form showing before homepage (#29356)

apps/meteor/client/hooks/useUserInfoQuery.ts

@@ -1,10 +1,11 @@
+import type { UsersInfoParamsGet } from '@rocket.chat/rest-typings';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 // a hook using tanstack useQuery and useEndpoint that fetches user information from the `users.info` endpoint
 
-export const useUserInfoQuery = (username: string) => {
+export const useUserInfoQuery = (params: UsersInfoParamsGet) => {
 	const getUserInfo = useEndpoint('GET', '/v1/users.info');
-	const result = useQuery(['users.info', username], () => getUserInfo({ username }), {
+	const result = useQuery(['users.info', params], () => getUserInfo({ ...params }), {
 		refetchOnWindowFocus: false,
 		keepPreviousData: true,
 	});

apps/meteor/client/views/room/components/body/RoomForeword/RoomForewordUsernameListItem.tsx

@@ -13,7 +13,7 @@ type RoomForewordUsernameListItemProps = {
 };
 
 const RoomForewordUsernameListItem: VFC<RoomForewordUsernameListItemProps> = ({ username, href, useRealName }) => {
-	const { data, isLoading, isError } = useUserInfoQuery(username);
+	const { data, isLoading, isError } = useUserInfoQuery({ username });
 
 	return (
 		<Box mi='x4' is='a' href={href}>

apps/meteor/client/views/root/MainLayout/RegisterUsername.tsx

@@ -17,6 +17,7 @@ import React, { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import AccountsCustomFields from '../../../components/AccountsCustomFields';
+import { queryClient } from '../../../lib/queryClient';
 
 type RegisterUsernamePayload = {
 	username: Exclude<IUser['username'], undefined>;
@@ -64,6 +65,7 @@ const RegisterUsername = () => {
 		},
 		onSuccess: () => {
 			dispatchToastMessage({ type: 'success', message: t('Username_has_been_updated') });
+			queryClient.invalidateQueries(['users.info']);
 		},
 		onError: (error: any, { username }) => {
 			if ([error.error, error.errorType].includes('error-blocked-username')) {

apps/meteor/client/views/root/MainLayout/UsernameCheck.tsx

@@ -1,21 +1,24 @@
-import { useUserId, useSetting, useUser } from '@rocket.chat/ui-contexts';
+import { useUserId, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import React, { useCallback } from 'react';
 
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
+import { useUserInfoQuery } from '../../../hooks/useUserInfoQuery';
 import PasswordChangeCheck from './PasswordChangeCheck';
 import RegisterUsername from './RegisterUsername';
 
 const UsernameCheck = ({ children }: { children: ReactNode }): ReactElement => {
-	const uid = useUserId();
-	const user = useUser();
-	const hasUserInCollection = !!user;
-	const username = user?.username;
+	const userId = useUserId();
+	const { data: userData, isLoading } = useUserInfoQuery({ userId: userId || '' });
+
 	const allowAnonymousRead = useSetting<boolean>('Accounts_AllowAnonymousRead') ?? false;
 
 	const shouldRegisterUsername = useReactiveValue(
 		useCallback(() => {
-			if (!uid) {
+			const hasUserInCollection = !!userData?.user;
+			const hasUsername = !!userData?.user?.username;
+
+			if (!userId) {
 				return !allowAnonymousRead;
 			}
 
@@ -23,11 +26,11 @@ const UsernameCheck = ({ children }: { children: ReactNode }): ReactElement => {
 				return true;
 			}
 
-			return !username;
-		}, [uid, hasUserInCollection, username, allowAnonymousRead]),
+			return !hasUsername;
+		}, [userData?.user, userId, allowAnonymousRead]),
 	);
 
-	if (shouldRegisterUsername) {
+	if (!isLoading && shouldRegisterUsername) {
 		return <RegisterUsername />;
 	}