refactor userData query

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>