refactor userData query

src/app/actions/action.ts

@@ -27,7 +27,7 @@ export async function getUserData() {
 			return await response.json();
 		}
 	} catch (error) {
-		console.error('error');
+		return null
 	}
 }
 

src/app/hooks/react-query/useUserDataInfo.ts

@@ -0,0 +1,81 @@
+import { useQuery } from '@tanstack/react-query';
+import { getUserData } from '@/app/actions/action';
+
+export interface Tariff {
+	id: number;
+	type: string;
+	name: string;
+	price: number;
+	tokens: number;
+	maxFilesCount: number;
+	diskSize: number;
+	maxUsers?: number;
+}
+
+export interface TariffInfo {
+	id: string;
+	status: string;
+	startTariff: string;
+	endTariff: string;
+	tariffId: number | null;
+	tariffName: string | null;
+	tokens: number | null;
+	maxFileOnDisk: number | null;
+	currentFileOnDisk: number;
+	currentFileCounts: number;
+	maxFileCounts: number;
+}
+
+export interface UserData {
+	fullName: string;
+	company: string | null;
+	email: string;
+	active: boolean;
+	phone: string;
+	genderType: string | null;
+	birthday: string | null;
+	createdAt: string;
+	subscriptionType: string;
+	tariffs: Tariff[];
+	tariffInfo: TariffInfo;
+	permission: number;
+}
+
+export const useUserProfile = () => {
+	return useQuery({
+		queryKey: ['userData'],
+		queryFn: getUserData,
+		select: (data): UserData => {
+			if (!data) {
+				return {
+					fullName: '',
+					company: null,
+					email: '',
+					active: false,
+					phone: '',
+					genderType: '',
+					birthday: null,
+					createdAt: '',
+					subscriptionType: '',
+					tariffs: [],
+					tariffInfo: {
+						id: '',
+						status: '',
+						startTariff: '',
+						endTariff: '',
+						tariffId: 0,
+						tariffName: null,
+						tokens: 0,
+						maxFileOnDisk: null,
+						currentFileOnDisk: 0,
+						currentFileCounts: 0,
+						maxFileCounts: 0,
+					},
+					permission: 0,
+				};
+			}
+
+			return data;
+		},
+	});
+};

src/app/hooks/react-query/useUserFilesInfo.ts

@@ -43,7 +43,7 @@ export const useUserFilesInfo = () => {
 	return useQuery({
 		queryKey: ['userFilesInfo'],
 		queryFn: getUserFilesInfo,
-		select: (data): FilesInfo => {
+		select: (data): FilesInfo | null => {
 			if (!data) {
 				return {
 					total: { size: 0, quantity: 0, check: 0, violation: 0, protected: 0 },

src/app/lib/getProcents.ts

@@ -1,13 +1,13 @@
 export function getProcents(
 	currentNumber: number | undefined,
-	totalNumber: number,
+	totalNumber: number | undefined,
 	decimals: number = 0
 ): number {
 	if (!currentNumber && !totalNumber) {
 		return 0;
 	}
 
-	if (totalNumber === 0 || typeof currentNumber === 'undefined') {
+	if (totalNumber === 0 || typeof currentNumber === 'undefined' || typeof totalNumber === 'undefined') {
 		return 0;
 	}
 

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>

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>

src/app/ui/payment/user-usage.tsx

@@ -1,37 +1,11 @@
 'use client'
 
-import { getUserData } from '@/app/actions/action';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect } from 'react';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { getProcents } from '@/app/lib/getProcents';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function UserUsage() {
-	const {
-		data: userData,
-		isLoading,
-		isError,
-		error
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		},
-		select: (data) => {
-			if (data.tariffInfo) {
-				return {
-					diskSize: data.tariffInfo?.maxFileOnDisk,
-					id: data.tariffInfo?.id,
-					maxFilesCount: data.tariffInfo?.maxFileCounts,
-					name: data.tariffInfo?.tariffName,
-					endTariff: data.tariffInfo?.endTariff,
-					tokens: data.tariffInfo?.tokens,
-					currentFileCounts: data.tariffInfo?.currentFileCounts,
-					currentFileOnDisk: data.tariffInfo?.currentFileOnDisk,
-				}
-			}
-		}
-	});
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 
 	return (
 		<div className="usage-stats">
@@ -41,27 +15,27 @@ export default function UserUsage() {
 			<div className="stats-grid">
 				<div className="stat-card">
 					<div className="stat-value">
-						{userData?.currentFileCounts} / {userData?.maxFilesCount}
+						{userData?.tariffInfo.currentFileCounts} / {userData?.tariffInfo.maxFileCounts}
 					</div>
 					<div className="stat-label">Файлов в месяц</div>
 					<div className="progress-bar">
 						<div
 							className="progress-fill"
-							style={{ width: `${getProcents(userData?.currentFileCounts, userData?.maxFilesCount)}%` }}
+							style={{ width: `${getProcents(userData?.tariffInfo.currentFileCounts, userData?.tariffInfo.maxFileCounts)}%` }}
 						>
 						</div>
 					</div>
 				</div>
 				<div className="stat-card">
 					<div className="stat-value">
-						{userData?.currentFileOnDisk ? convertBytes(userData?.currentFileOnDisk) : 0} / {userData?.diskSize ? convertBytes(userData?.diskSize) : 0}
+						{convertBytes(userData?.tariffInfo.currentFileOnDisk ?? 0)} / {convertBytes(userData?.tariffInfo.maxFileOnDisk ?? 0)}
 					</div>
 					<div className="stat-label">Объём хранилища</div>
 					<div className="progress-bar">
 						<div
 							className="progress-fill"
 							style={
-								{ width: `${getProcents(userData?.currentFileOnDisk, userData?.diskSize)}%` }
+								{ width: `${getProcents(userData?.tariffInfo.currentFileOnDisk, userData?.tariffInfo.maxFileOnDisk ?? 0)}%` }
 							}
 						>
 						</div>
@@ -69,13 +43,13 @@ export default function UserUsage() {
 				</div>
 				<div className="stat-card">
 					<div className="stat-value">
-						{userData?.tokens ? userData?.tokens : 0}
+						{userData?.tariffInfo.tokens ?? 0}
 					</div>
 					<div className="stat-label">Токенов на балансе</div>
 				</div>
 				<div className="stat-card">
 					<div className="stat-value">
-						{userData?.name ? userData?.name : 'ERROR'}
+						{userData?.tariffInfo.tariffName ? userData?.tariffInfo.tariffName : 'ERROR'}
 					</div>
 					<div className="stat-label">Текущий план</div>
 				</div>

src/app/ui/settings/company-users-setting-panel.tsx

@@ -12,21 +12,12 @@ import * as z from 'zod';
 import PhoneInput from '@/app/ui/inputs/phone-input';
 import { IconEye } from '@/app/ui/icons/icons';
 import { toast } from 'sonner';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export function CompanyUsersSettingPanel() {
-	const {
-		data: userData,
-		isLoading,
-		isError,
-		error
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		}
-	});
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 
-	if (userData.permission !== 3) {
+	if (userData?.permission !== 3) {
 		return null
 	}
 

src/app/ui/settings/personal-data-settings.tsx

@@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl';
 import { useActionState, useState, useEffect } from 'react';
 import { getUserData } from '@/app/actions/action';
 import { useQuery } from '@tanstack/react-query';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function PersonalDataSettings() {
 	const [errorMessage, formAction, isPending] = useActionState(
@@ -13,17 +14,7 @@ export default function PersonalDataSettings() {
 		undefined
 	);
 
-	const {
-		data: userData,
-		isLoading,
-		isError,
-		error
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		}
-	});
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 
 	useEffect(() => {
 		console.log(userData)

src/app/ui/settings/subscription-settings.tsx

@@ -4,37 +4,23 @@ import { useTranslations } from 'next-intl';
 import { getUserData } from '@/app/actions/action';
 import { useQuery } from '@tanstack/react-query';
 import { convertBytes } from '@/app/lib/convertBytes';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function SubscriptionSettings() {
 	const t = useTranslations('Global');
-	const {
-		data: userData,
-		isLoading,
-		isError,
-		error
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		},
-		select: (data) => {
-			if (data.tariffInfo) {
-				return {
-					diskSize: data.tariffInfo?.maxFileOnDisk,
-					id: data.tariffInfo?.id,
-					maxFilesCount: data.tariffInfo?.maxFileCounts,
-					name: data.tariffInfo?.tariffName,
-					endTariff: data.tariffInfo?.endTariff
-				}
-			}
-		}
-	});
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 
-	function dateHandler(date: string) {
+	function dateHandler(date: string | undefined) {
 		if (!date) {
 			return 'error'
 		}
-		return date.split(' ')[0];
+
+		const newDate = new Date(date);
+		const day = newDate.getDate().toString().padStart(2, '0');
+		const month = (newDate.getMonth() + 1).toString().padStart(2, '0');
+		const year = newDate.getFullYear();
+
+		return `${day}.${month}.${year}`;
 	}
 
 	return (
@@ -46,18 +32,18 @@ export default function SubscriptionSettings() {
 				<div className="subscription-info">
 					<div className="subscription-info-header">
 						<div>
-							<h4 className="subscription-info-title">Подписка {userData?.name}</h4>
-							<p>📅 Активна до {dateHandler(userData?.endTariff)}</p>
+							<h4 className="subscription-info-title">Подписка {userData?.tariffInfo.tariffName}</h4>
+							<p>📅 Активна до {dateHandler(userData?.tariffInfo.endTariff)}</p>
 						</div>
 						<div style={{ textAlign: "right" }}>
-							<div className="subscription-info-title">{userData?.maxFilesCount}</div>
+							<div className="subscription-info-title">{userData?.tariffInfo.maxFileCounts}</div>
 							<p>файлов в месяц</p>
 						</div>
 					</div>
 					<div className="subscription-info-main">
 						<div className="subscription-info-item">
 							<div>💾 Хранилище</div>
-							<span>{userData?.diskSize ? convertBytes(userData?.diskSize) : 0}</span>
+							<span>{userData?.tariffInfo.maxFileOnDisk ? convertBytes(userData?.tariffInfo.maxFileOnDisk) : 0}</span>
 						</div>
 						<div className="subscription-info-item">
 							<div>🔌 API доступ</div>

src/app/ui/test.tsx

@@ -1,20 +1,9 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query';
-import { getUserData } from '@/app/actions/action';
+import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';
 
 export default function HomePage() {
-	const {
-		data: userData,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userData'],
-		queryFn: () => {
-			return getUserData();
-		},
-	});
+	const { data: userData, isLoading, isError, error } = useUserProfile();
 
 	if (isLoading) return <div>Loading...</div>;
 	if (isError) return <div>Error: {error.message}</div>;
@@ -23,7 +12,7 @@ export default function HomePage() {
 		<div>
 			<h1>user email</h1>
 			<span>
-				{userData.email}
+				{userData?.email}
 			</span>
 		</div>
 	);