refactor userData query

src/app/ui/header/userMenuButton.tsx

@@ -3,27 +3,15 @@
 import { useState, useRef, useEffect } from 'react';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import Link from 'next/link';
-import { getUserData } from '@/app/actions/action';
-import { useQuery } from '@tanstack/react-query';
 import { logout } from '@/app/actions/auth';
 import { useTranslations } from 'next-intl';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function UserMenuButton() {
 	const [isOpen, setIsOpen] = useState(false);
 	const menuRef = useRef<HTMLDivElement | null>(null);
 	const t = useTranslations("Global");
-	const {
-		data: userData,
-		isLoading,
-		isError,
-		error
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		}
-	})
-
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 
 	useClickOutside(
 		menuRef,
@@ -50,7 +38,7 @@ export default function UserMenuButton() {
 			<div
 				className="user-avatar"
 				id="user-menu-btn"
-				title={userData?.fullName ? userData.fullName : ''}
+				title={userData?.fullName ?? ''}
 			>
 				{userData?.fullName ? userData.fullName[0] : ''}
 			</div>
@@ -61,10 +49,10 @@ export default function UserMenuButton() {
 					</div>
 					<div className="user-details">
 						<div className="user-name">
-							{userData?.fullName ? userData.fullName : ''}
+							{userData?.fullName ?? ''}
 						</div>
 						<div className="user-email">
-							{userData?.email ? userData.email : ''}
+							{userData?.email ?? ''}
 						</div>
 						<div className="user-subscription">
 							<span className="text-[14px]">{t('rate')}: </span>