refactor userData query

src/app/ui/header/headerPanel.tsx

@@ -6,37 +6,17 @@ import Link from 'next/link';
 import LanguageSwitcher from '@/app/components/LanguageSwitcher';
 import { useTranslations } from 'next-intl';
 import BurgerMenu from '@/app/ui/navigation/burger-menu';
-import { getUserData } from '@/app/actions/action';
-import { useQuery } from '@tanstack/react-query';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function HeaderPanel() {
 	const t = useTranslations("Global");
-	const {
-		data: tokens,
-		isLoading,
-		isError,
-		error
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		},
-		select: (data) => {
-			if (typeof data?.tariffInfo?.tokens === 'number') {
-				return data?.tariffInfo?.tokens
-			} else {
-				return null;
-			}
-
-		}
-	});
-
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 	return (
 		<header className="header">
 			<BurgerMenu />
 			<div className="header-action">
 				{/* <LanguageSwitcher /> */}
-				{typeof tokens === 'number' && (
+				{typeof userData?.tariffInfo.tokens === 'number' && (
 					<Link
 						href={'/pages/payment'}
 						className="tokens-balance"
@@ -45,7 +25,7 @@ export default function HeaderPanel() {
 							<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "16px", height: "16px" }}>
 								<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path>
 							</svg>
-							<span className="tokens-count">{tokens}</span>
+							<span className="tokens-count">{userData?.tariffInfo.tokens}</span>
 							<span className="tokens-label">
 								{t('tokens')}
 							</span>