add tanstack/react-query

src/app/ui/header/userMenuButton.tsx

@@ -3,12 +3,23 @@
 import { useState, useRef } from 'react';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import Link from 'next/link';
-import { useDataContext } from '@/app/context/data-context';
+import { getUserData } from '@/app/lib/action';
+import { useQuery } from '@tanstack/react-query';
 
 export default function UserMenuButton() {
 	const [isOpen, setIsOpen] = useState(false);
 	const menuRef = useRef<HTMLDivElement | null>(null);
-	const { dataContext } = useDataContext()
+	const {
+		data: userData,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['userData'],
+		queryFn: () => {
+			return getUserData();
+		}
+	})
 
 
 	useClickOutside(menuRef, () => {
@@ -17,7 +28,6 @@ export default function UserMenuButton() {
 
 	const handleButtonClick = () => {
 		if (!isOpen) {
-			console.log(dataContext);
 			setIsOpen(true);
 		} else {
 			setIsOpen(false);
@@ -30,18 +40,29 @@ export default function UserMenuButton() {
 			onClick={handleButtonClick}
 			ref={menuRef}
 		>
-			<div className="user-avatar" id="user-menu-btn" title="Валерка">
-				User
+			<div
+				className="user-avatar"
+				id="user-menu-btn"
+				title={userData?.fullName ? userData.fullName : ''}
+			>
+				{userData?.fullName ? userData.fullName : ''}
 			</div>
 			<div className={`user-dropdown ${isOpen ? 'show' : ''}`} id="user-dropdown">
 				<div className="user-info-header">
-					<div className="user-avatar-large">User</div>
+					<div className="user-avatar-large">
+						{userData?.fullName ? userData.fullName : ''}
+					</div>
 					<div className="user-details">
-						<div className="user-name">Валерка</div>
-						<div className="user-email">va@no-copy.ru</div>
+						<div className="user-name">
+							{userData?.fullName ? userData.fullName : ''}
+						</div>
+						<div className="user-email">
+							{userData?.email ? userData.email : ''}
+						</div>
 						<div className="user-subscription">
 							<span className="subscription-badge">
-								СТАРТ</span>
+								{userData?.subscriptionType ? userData.subscriptionType : ''}
+							</span>
 						</div>
 					</div>
 				</div>