refactor userFilesInfo query

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.39.0",
+	"version": "0.40.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/actions/action.ts

@@ -62,7 +62,7 @@ export async function getUserFilesInfo() {
 			}
 		}
 	} catch (error) {
-		console.error(`error: ${error}`);
+		return null
 	}
 }
 

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

@@ -0,0 +1,96 @@
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+
+export interface FilesInfo {
+	total: {
+		size: number;
+		quantity: number;
+		check: number;
+		violation: number;
+		protected: number;
+	};
+	images: {
+		quantity: number;
+		size: number;
+		check: number;
+		violation: number;
+		protected: number;
+	};
+	videos: {
+		quantity: number;
+		size: number;
+		check: number;
+		violation: number;
+		protected: number;
+	};
+	audios: {
+		quantity: number;
+		size: number;
+		check: number;
+		violation: number;
+		protected: number;
+	};
+	documents: {
+		quantity: number;
+		size: number;
+		check: number;
+		violation: number;
+		protected: number;
+	};
+}
+
+export const useUserFilesInfo = () => {
+	return useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+		select: (data): FilesInfo => {
+			if (!data) {
+				return {
+					total: { size: 0, quantity: 0, check: 0, violation: 0, protected: 0 },
+					images: { quantity: 0, size: 0, check: 0, violation: 0, protected: 0 },
+					videos: { quantity: 0, size: 0, check: 0, violation: 0, protected: 0 },
+					audios: { quantity: 0, size: 0, check: 0, violation: 0, protected: 0 },
+					documents: { quantity: 0, size: 0, check: 0, violation: 0, protected: 0 },
+				};
+			}
+
+			return {
+				total: {
+					size: data.all_files_size,
+					quantity: data.all_files_quantity,
+					check: data.all_files_check,
+					violation: data.all_files_violation,
+					protected: data.protected_files_count,
+				},
+				images: {
+					quantity: data.images_quantity,
+					size: data.images_size,
+					check: data.images_check,
+					violation: data.images_violations,
+					protected: data.protected_image_files_count,
+				},
+				videos: {
+					quantity: data.videos_quantity,
+					size: data.videos_size,
+					check: data.videos_check,
+					violation: data.videos_violations,
+					protected: data.protected_video_files_count,
+				},
+				audios: {
+					quantity: data.audios_quantity,
+					size: data.audios_size,
+					check: data.audios_check,
+					violation: data.audios_violations,
+					protected: data.protected_audio_files_count,
+				},
+				documents: {
+					quantity: data.document_quantity,
+					size: data.document_size,
+					check: data.document_check,
+					violation: data.document_violations,
+					protected: data.protected_document_files_count,
+				},
+			};
+		},
+	});
+};

src/app/lib/getProcents.ts

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

src/app/ui/dashboard/new/dashboard-files-info.tsx

@@ -1,22 +1,12 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import {convertBytes} from '@/app/lib/convertBytes';
+import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function DashboardFilesInfo() {
 	const t = useTranslations("Global");
-
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-	const {
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="dashboard-files-info">
@@ -24,20 +14,20 @@ export default function DashboardFilesInfo() {
 				<div className="stat-type">
 					{t('images')}
 				</div>
-				<div className="stat-value">{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}</div>
+				<div className="stat-value">{filesInfo?.images.quantity ? filesInfo?.images.quantity : 0}</div>
 				<div className="stat-label">{t('your-image')}</div>
 				<div className="type-card-stats">
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('size')}</span>
-						<span className="type-card-stat-value">{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('PROTECTED')}</span>
-						<span className="type-card-stat-value">{filesInfo?.protected_image_files_count ? filesInfo?.protected_image_files_count : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.images.protected ? filesInfo?.images.protected : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('violations')}</span>
-						<span className="type-card-stat-value">{filesInfo?.images_violations ? filesInfo?.images_violations : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.images.violation ? filesInfo?.images.violation : 0}</span>
 					</div>
 				</div>
 			</div>
@@ -46,20 +36,20 @@ export default function DashboardFilesInfo() {
 				<div className="stat-type">
 					{t('videos')}
 				</div>
-				<div className="stat-value">{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}</div>
+				<div className="stat-value">{filesInfo?.videos.quantity ? filesInfo?.videos.quantity : 0}</div>
 				<div className="stat-label">{t('your-videos')}</div>
 				<div className="type-card-stats">
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('size')}</span>
-						<span className="type-card-stat-value">{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('PROTECTED')}</span>
-						<span className="type-card-stat-value">{filesInfo?.protected_video_files_count ? filesInfo?.protected_video_files_count : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.videos.protected ? filesInfo?.videos.protected : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('violations')}</span>
-						<span className="type-card-stat-value">{filesInfo?.videos_violations ? filesInfo?.videos_violations : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.videos.violation ? filesInfo?.videos.violation : 0}</span>
 					</div>
 				</div>
 			</div>
@@ -68,20 +58,20 @@ export default function DashboardFilesInfo() {
 				<div className="stat-type">
 					{t('audios')}
 				</div>
-				<div className="stat-value">{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}</div>
+				<div className="stat-value">{filesInfo?.audios.quantity ? filesInfo?.audios.quantity : 0}</div>
 				<div className="stat-label">{t('your-audios')}</div>
 				<div className="type-card-stats">
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('size')}</span>
-						<span className="type-card-stat-value">{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('PROTECTED')}</span>
-						<span className="type-card-stat-value">{filesInfo?.protected_audio_files_count ? filesInfo?.protected_audio_files_count : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.audios.protected ? filesInfo?.audios.protected : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('violations')}</span>
-						<span className="type-card-stat-value">{filesInfo?.audios_violations ? filesInfo?.audios_violations : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.audios.violation ? filesInfo?.audios.violation : 0}</span>
 					</div>
 				</div>
 			</div>
@@ -90,20 +80,20 @@ export default function DashboardFilesInfo() {
 				<div className="stat-type">
 					{t('documents')}
 				</div>
-				<div className="stat-value">{filesInfo?.documents_quantity ? filesInfo?.documents_quantity : 0}</div>
+				<div className="stat-value">{filesInfo?.documents.quantity ? filesInfo?.documents.quantity : 0}</div>
 				<div className="stat-label">{t('your-documents')}</div>
 				<div className="type-card-stats">
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('size')}</span>
-						<span className="type-card-stat-value">{filesInfo?.documents_check ? convertBytes(filesInfo?.documents_check) : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.documents.check? convertBytes(filesInfo?.documents.check) : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('PROTECTED')}</span>
-						<span className="type-card-stat-value">{filesInfo?.documents_check ? filesInfo?.documents_check : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.documents.protected ? filesInfo?.documents.protected : 0}</span>
 					</div>
 					<div className="type-card-stat-row">
 						<span className="type-card-stat-label">{t('violations')}</span>
-						<span className="type-card-stat-value">{filesInfo?.documents_violations ? filesInfo?.documents_violations : 0}</span>
+						<span className="type-card-stat-value">{filesInfo?.documents.violation ? filesInfo?.documents.violation : 0}</span>
 					</div>
 				</div>
 			</div>

src/app/ui/dashboard/new/dashboard-user-stats.tsx

@@ -1,29 +1,19 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import {convertBytes} from '@/app/lib/convertBytes';
+import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function DashboardUserStats() {
 	const t = useTranslations("Global");
-
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-	const {
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="dashboard-user-stats">
 
 			<div className="stat-card projects">
 				<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
-				<div className="stat-value">{filesInfo?.protected_files_count ? filesInfo?.protected_files_count : 0}</div>
+				<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
 				<div className="stat-label">Файлов под защитой</div>
 				<div className="stat-icon">🛡️</div>
 			</div>
@@ -37,7 +27,7 @@ export default function DashboardUserStats() {
 
 			<div className="stat-card violations">
 				<div className="stat-type">НАРУШЕНИЯ</div>
-				<div className="stat-value">{filesInfo?.all_files_violations ? filesInfo?.all_files_violations : 0}</div>
+				<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
 				<div className="stat-label">Требуют внимания</div>
 				<div className="stat-icon">⚠️</div>
 			</div>
@@ -45,7 +35,7 @@ export default function DashboardUserStats() {
 			<div className="stat-card storage">
 				<div className="stat-type">ХРАНИЛИЩЕ</div>
 				<div className="stat-value">
-					{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}
+					{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
 				</div>
 				<div className="stat-label">Использовано места</div>
 				<div className="stat-icon">💾</div>

src/app/ui/dashboard/new/dashborad-limits-section.tsx

@@ -1,20 +1,11 @@
 'use client'
 
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { getProcents } from '@/app/lib/getProcents';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function DahboardLimitsSection() {
-	const {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="dashboard-limits-section">
@@ -26,13 +17,13 @@ export default function DahboardLimitsSection() {
 							<span>🔍</span>
 							<span>Проверки</span>
 						</div>
-						<div className="limit-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0} / 10,000</div>
+						<div className="limit-value">{filesInfo?.total.check ? filesInfo?.total.check : 0} / 10,000</div>
 					</div>
 					<div className="progress-bar-container">
 						<div className="progress-bar low" style={{ width: '0%' }}></div>
 					</div>
 					<div className="progress-bar-value">
-						{getProcents(filesInfo?.all_files_check, 10000)}%
+						{getProcents(filesInfo?.total.check, 10000)}%
 					</div>
 				</div>
 
@@ -42,13 +33,13 @@ export default function DahboardLimitsSection() {
 							<span>💾</span>
 							<span>Хранилище</span>
 						</div>
-						<div className="limit-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0} / 1,024 МБ</div>
+						<div className="limit-value">{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} / 1,024 МБ</div>
 					</div>
 					<div className="progress-bar-container">
-						<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.all_files_size, 1000000000)}%` }}></div>
+						<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.total.size, 1000000000)}%` }}></div>
 					</div>
 					<div className="progress-bar-value">
-						{getProcents(filesInfo?.all_files_size, 1000000000)}%
+						{getProcents(filesInfo?.total.size, 1000000000)}%
 					</div>
 				</div>
 				<div className="limit-item">
@@ -57,13 +48,13 @@ export default function DahboardLimitsSection() {
 							<span>📁</span>
 							<span>Файлы</span>
 						</div>
-						<div className="limit-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0} / 500</div>
+						<div className="limit-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0} / 500</div>
 					</div>
 					<div className="progress-bar-container">
-						<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.all_files_quantity, 500)}%` }}></div>
+						<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.total.quantity, 500)}%` }}></div>
 					</div>
 					<div className="progress-bar-value">
-						{getProcents(filesInfo?.all_files_quantity, 500)}%
+						{getProcents(filesInfo?.total.quantity, 500)}%
 					</div>
 				</div>
 			</div>

src/app/ui/dashboard/protection-overview.tsx

@@ -5,23 +5,9 @@ import { PieChartComponent } from '@/app/components/PieChartComponent';
 import { useTranslations, useLocale } from 'next-intl';
 import Link from 'next/link';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { pluralize } from '@/app/lib/pluralize';
-
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
-type FilesInfo = {
-	totalSize: number;
-	totalCount: number;
-	imageQuantity: number;
-	videoQuantity: number;
-	audioQuantity: number;
-	imageSize: number;
-	videoSize: number;
-	audioSize: number;
-	documentSize: number;
-};
-
 
 export default function ProtectionOverview() {
 	const [isOpen, setIsOpen] = useState(false);
@@ -42,68 +28,23 @@ export default function ProtectionOverview() {
 		openDropDownList
 	);
 
-	const {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery<{
-		all_files_size: number,
-		all_files_quantity: number,
-		images_quantity: number,
-		videos_quantity: number,
-		audios_quantity: number,
-		images_size: number,
-		videos_size: number,
-		audios_size: number,
-		documents_size: number,
-	}, Error, FilesInfo>({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-		select: (data): FilesInfo => {
-			if (!data) {
-				return {
-					totalSize: 0,
-					totalCount: 0,
-					imageQuantity: 0,
-					videoQuantity: 0,
-					audioQuantity: 0,
-					imageSize: 0,
-					videoSize: 0,
-					audioSize: 0,
-					documentSize: 0,
-				}
-			}
-
-			return {
-				totalSize: data.all_files_size,
-				totalCount: data.all_files_quantity,
-				imageQuantity: data.images_quantity,
-				videoQuantity: data.videos_quantity,
-				audioQuantity: data.audios_quantity,
-				imageSize: data.images_size,
-				videoSize: data.videos_size,
-				audioSize: data.audios_size,
-				documentSize: data.documents_size,
-			}
-		},
-	});
 
 	useEffect(() => {
 		setFilesCount([
 			{
 				name: 'images-few',
-				value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
+				value: filesInfo?.images.size ? filesInfo?.images.size : 0,
 				color: '#f08c00'
 			},
 			{
 				name: 'videos',
-				value: filesInfo?.videoSize ? filesInfo?.videoSize : 0,
+				value: filesInfo?.videos.size ? filesInfo?.videos.size : 0,
 				color: '#2f9e44'
 			},
 			{
 				name: 'audios',
-				value: filesInfo?.audioSize ? filesInfo?.audioSize : 0,
+				value: filesInfo?.audios.size ? filesInfo?.audios.size : 0,
 				color: '#1971c2'
 			},
 		])
@@ -134,14 +75,14 @@ export default function ProtectionOverview() {
 			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
 
 
-				{filesInfo?.totalCount ? (
+				{filesInfo?.total.quantity ? (
 					<>
 						<div className="protection-stat total-files">
 							<span className="protection-stat-value">
-								{filesInfo?.totalCount ? filesInfo?.totalCount : 0}
+								{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}
 							</span>
 							<span className="protection-stat-label">
-								{pluralizeFiles(filesInfo?.totalCount || 0)}
+								{pluralizeFiles(filesInfo?.total.quantity || 0)}
 							</span>
 						</div>
 						<div className="protection-stat total-checks">
@@ -196,18 +137,18 @@ export default function ProtectionOverview() {
 				)}
 				{isOpen ? (
 					<div className="protection-stat total-usage">
-						<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
+						<PieChartComponent data={filesCount} show={filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} />
 					</div>
 				) : (
 					<div className="protection-stat total-usage">
-						<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
+						<div className="protection-stat-value">{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} / 0</div>
 						<div className="protection-stat-label">
 							{t('disk-space-used')}
 						</div>
 					</div>
 				)}
 			</div>
-			{!!filesInfo?.totalCount && (
+			{!!filesInfo?.total.quantity && (
 				<button
 					className="protection-overview-switch cursor-pointer"
 					onClick={() => {

src/app/ui/dashboard/stats-grid.tsx

@@ -2,22 +2,12 @@
 
 import { useTranslations } from 'next-intl';
 import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function StatsGrid() {
 	const t = useTranslations("Global");
-
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-	const {
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="block-wrapper stats-wrapper">
@@ -46,10 +36,10 @@ export default function StatsGrid() {
 					{t('images')}
 				</div>
 				<div className="stats-item second-row">
-					{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}
+					{filesInfo?.images.quantity ? filesInfo?.images.quantity : 0}
 				</div>
 				<div className="stats-item second-row">
-					{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}
+					{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}
 				</div>
 				<div className="stats-item second-row">
 					0
@@ -63,10 +53,10 @@ export default function StatsGrid() {
 					{t('videos')}
 				</div>
 				<div className="stats-item">
-					{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}
+					{filesInfo?.videos.quantity ? filesInfo?.videos.quantity : 0}
 				</div>
 				<div className="stats-item">
-					{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}
+					{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}
 				</div>
 				<div className="stats-item">
 					0
@@ -80,10 +70,10 @@ export default function StatsGrid() {
 					{t('audios')}
 				</div>
 				<div className="stats-item last-row">
-					{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}
+					{filesInfo?.audios.quantity ? filesInfo?.audios.quantity : 0}
 				</div>
 				<div className="stats-item last-row">
-					{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}
+					{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}
 				</div>
 				<div className="stats-item last-row">
 					0

src/app/ui/marking-page/new/protection-statistic.tsx

@@ -1,83 +1,36 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
-
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
-type FilesInfo = {
-	totalSize: number;
-	totalCount: number;
-	totalProtected: number;
-};
 
 export default function ProtectionStatistic({ fileType }: { fileType: string }) {
 	const t = useTranslations('Global');
 
-	const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string, totalProtected: string } => {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
+
+	const getFileTypeData = (fileType: string) => {
 		switch (fileType) {
 			case 'image':
-				return {
+				return filesInfo?.images;
-					totalSize: 'images_size',
-					totalCount: 'images_quantity',
-					totalProtected: 'protected_image_files_count'
-				};
 			case 'video':
-				return {
+				return filesInfo?.videos;
-					totalSize: 'videos_size',
-					totalCount: 'videos_quantity',
-					totalProtected: 'protected_video_files_count'
-				};
 			case 'audio':
-				return {
+				return filesInfo?.audios;
-					totalSize: 'audios_size',
+			case 'document':
-					totalCount: 'audios_quantity',
+				return filesInfo?.documents;
-					totalProtected: 'protected_audio_files_count'
-				};
 			default:
-				return {
+				return filesInfo?.total;
-					totalSize: 'all_files_size',
-					totalCount: 'all_files_quantity',
-					totalProtected: 'protected_files_count'
-				};
 		}
 	};
 
-	const {
+	const currentData = getFileTypeData(fileType);
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery<{
-		all_files_size: number,
-		all_files_quantity: number
-	}, Error, FilesInfo>({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-		select: (data): FilesInfo => {
-			if (!data) {
-				return {
-					totalSize: 0,
-					totalCount: 0,
-					totalProtected: 0
-				}
-			}
-
-			const fields = getFileTypeFields(fileType);
-
-			return {
-				totalSize: data[fields.totalSize as keyof typeof data],
-				totalCount: data[fields.totalCount as keyof typeof data],
-				totalProtected: data[fields.totalProtected as keyof typeof data]
-			}
-		}
-	});
 
 	return (
 		<div className="protection-statistic">
 			<div className="protection-statistic-stat-card">
 				<div className="protection-statistic-stat-number">
-					{filesInfo?.totalProtected ? filesInfo.totalProtected : 0}
+					{currentData?.protected ?? 0}
 				</div>
 				<div className="protection-statistic-stat-label">{t(`${fileType}-protected`)}</div>
 			</div>
@@ -87,7 +40,7 @@ export default function ProtectionStatistic({ fileType }: { fileType: string })
 			</div>
 			<div className="protection-statistic-stat-card">
 				<div className="protection-statistic-stat-number">
-					{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0}
+					{convertBytes(currentData?.size ?? 0)}
 				</div>
 				<div className="protection-statistic-stat-label">{t(`${fileType}-occupy`)}</div>
 			</div>

src/app/ui/marking-page/protection-summary.tsx

@@ -1,11 +1,9 @@
 'use client'
 
 import { useTranslations, useLocale } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { pluralize } from '@/app/lib/pluralize';
-import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 
 type FilesInfo = {
 	totalSize: number;
@@ -15,62 +13,25 @@ type FilesInfo = {
 
 export default function ProtectionSummary({ fileType }: { fileType: string }) {
 	const t = useTranslations('Global');
-	const CHECKS = useStoreWithDevtools(s => s.value1);
-	const VIOLATIONS = useStoreWithDevtools(s => s.value2);
 
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
 
-	const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => {
+	const getFileTypeData = (fileType: string) => {
 		switch (fileType) {
 			case 'image':
-				return {
+				return filesInfo?.images;
-					totalSize: 'images_size',
-					totalCount: 'images_quantity'
-				};
 			case 'video':
-				return {
+				return filesInfo?.videos;
-					totalSize: 'videos_size',
-					totalCount: 'videos_quantity'
-				};
 			case 'audio':
-				return {
+				return filesInfo?.audios;
-					totalSize: 'audios_size',
+			case 'document':
-					totalCount: 'audios_quantity'
+				return filesInfo?.documents;
-				};
 			default:
-				return {
+				return filesInfo?.total;
-					totalSize: 'all_files_size',
-					totalCount: 'all_files_quantity'
-				};
 		}
 	};
 
-	const {
+	const currentData = getFileTypeData(fileType);
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery<{
-		all_files_size: number,
-		all_files_quantity: number
-	}, Error, FilesInfo>({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-		select: (data): FilesInfo => {
-			if (!data) {
-				return {
-					totalSize: 0,
-					totalCount: 0
-				}
-			}
-
-			const fields = getFileTypeFields(fileType);
-
-			return {
-				totalSize: data[fields.totalSize as keyof typeof data],
-				totalCount: data[fields.totalCount as keyof typeof data]
-			}
-		}
-	});
 
 	const locale = useLocale();
 
@@ -95,27 +56,27 @@ export default function ProtectionSummary({ fileType }: { fileType: string }) {
 			<p>{t('current-status-of')}</p>
 			<div className="protection-stats">
 				<div className="protection-stat total-files">
-					<span className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</span>
+					<span className="protection-stat-value">{currentData?.quantity ?? 0}</span>
 					<span className="protection-stat-label">
-						{pluralizeFilesName(filesInfo?.totalCount || 0)}
+						{pluralizeFilesName(currentData?.quantity ?? 0)}
 					</span>
 				</div>
 				<div className="protection-stat total-checks">
 					<div>
-						<span className="protection-stat-value">{CHECKS}</span>
+						<span className="protection-stat-value">{currentData?.check ?? 0}</span>
 						<span className="protection-stat-label">
-							{pluralizeCheks(CHECKS)}
+							{pluralizeCheks(currentData?.check ?? 0)}
 						</span>
 					</div>
 					<div>
-						<span className="protection-stat-value">{VIOLATIONS}</span>
+						<span className="protection-stat-value">{currentData?.violation ?? 0}</span>
 						<span className="protection-stat-label">
-							{pluralizeViolations(VIOLATIONS)}
+							{pluralizeViolations(currentData?.violation ?? 0)}
 						</span>
 					</div>
 				</div>
 				<div className="protection-stat total-usage">
-					<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
+					<div className="protection-stat-value">{convertBytes(currentData?.size ?? 0)} / 0</div>
 					<div className="protection-stat-label">
 						{t('disk-space-used')}
 					</div>

src/app/ui/my-content/my-content-info-block.tsx

@@ -1,28 +1,19 @@
 'use client'
 
 import { IconDocument, IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { useTranslations, useLocale } from 'next-intl';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { pluralize } from '@/app/lib/pluralize';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function MyContentInfoBlock() {
 	const locale = useLocale();
 	const t = useTranslations('Global');
 
-	const {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	const fileTypeSizePercents = () => {
-		if (!filesInfo?.all_files_size) {
+		if (!filesInfo?.total.size) {
 			return {
 				images: 0,
 				videos: 0,
@@ -32,13 +23,13 @@ export default function MyContentInfoBlock() {
 		}
 
 		const sizes = {
-			images: filesInfo?.images_size || 0,
+			images: filesInfo?.images.size || 0,
-			videos: filesInfo?.videos_size || 0,
+			videos: filesInfo?.videos.size || 0,
-			audios: filesInfo?.audios_size || 0,
+			audios: filesInfo?.audios.size || 0,
-			documents: filesInfo?.documents_size || 0,
+			documents: filesInfo?.documents.size || 0,
 		};
 
-		const total = filesInfo?.all_files_size;
+		const total = filesInfo?.total.size;
 
 		const rawPercents = {
 			images: (sizes.images / total) * 100,
@@ -90,10 +81,10 @@ export default function MyContentInfoBlock() {
 						</div>
 						<div className="file-stat-details">
 							<span className="file-stat-count">
-								{filesInfo?.images_quantity || 0} {pluralizeFiles(filesInfo?.images_quantity || 0)}
+								{filesInfo?.images.quantity || 0} {pluralizeFiles(filesInfo?.images.quantity || 0)}
 							</span>
 							<span className="file-stat-size">
-								{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}
+								{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}
 							</span>
 						</div>
 					</div>
@@ -110,10 +101,10 @@ export default function MyContentInfoBlock() {
 						</div>
 						<div className="file-stat-details">
 							<span className="file-stat-count">
-								{filesInfo?.videos_quantity || 0} {pluralizeFiles(filesInfo?.videos_quantity || 0)}
+								{filesInfo?.videos.quantity || 0} {pluralizeFiles(filesInfo?.videos.quantity || 0)}
 							</span>
 							<span className="file-stat-size">
-								{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}
+								{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}
 							</span>
 						</div>
 					</div>
@@ -130,10 +121,10 @@ export default function MyContentInfoBlock() {
 						</div>
 						<div className="file-stat-details">
 							<span className="file-stat-count">
-								{filesInfo?.audios_quantity || 0} {pluralizeFiles(filesInfo?.audios_quantity || 0)}
+								{filesInfo?.audios.quantity || 0} {pluralizeFiles(filesInfo?.audios.quantity || 0)}
 							</span>
 							<span className="file-stat-size">
-								{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}
+								{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}
 							</span>
 						</div>
 					</div>
@@ -150,10 +141,10 @@ export default function MyContentInfoBlock() {
 						</div>
 						<div className="file-stat-details">
 							<span className="file-stat-count">
-								{filesInfo?.documents_quantity || 0} {pluralizeFiles(filesInfo?.documents_quantity || 0)}
+								{filesInfo?.documents.quantity || 0} {pluralizeFiles(filesInfo?.documents.quantity || 0)}
 							</span>
 							<span className="file-stat-size">
-								{filesInfo?.documents_size ? convertBytes(filesInfo?.documents_size) : 0}
+								{filesInfo?.documents.size ? convertBytes(filesInfo?.documents.size) : 0}
 							</span>
 						</div>
 					</div>

src/app/ui/my-content/my-content-pie-chart.tsx

@@ -1,10 +1,9 @@
 'use client'
 
 import { PieChartComponent } from '@/app/components/PieChartComponent';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { useState, useEffect } from 'react';
 import { convertBytes } from '@/app/lib/convertBytes';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 
 
 type FilesInfo = {
@@ -28,76 +27,27 @@ export default function MyContentPieChart() {
 		{ name: 'documents', value: 0, color: '#a561e6' },
 	]);
 
-	const {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery<{
-		all_files_size: number,
-		all_files_quantity: number,
-		images_quantity: number,
-		videos_quantity: number,
-		audios_quantity: number,
-		documents_quantity: number,
-		images_size: number,
-		videos_size: number,
-		audios_size: number,
-		documents_size: number,
-	}, Error, FilesInfo>({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-		select: (data): FilesInfo => {
-			if (!data) {
-				return {
-					totalSize: 0,
-					totalCount: 0,
-					imageQuantity: 0,
-					videoQuantity: 0,
-					audioQuantity: 0,
-					documentQuantity: 0,
-					imageSize: 0,
-					videoSize: 0,
-					audioSize: 0,
-					documentSize: 0,
-				}
-			}
-
-			return {
-				totalSize: data.all_files_size,
-				totalCount: data.all_files_quantity,
-				imageQuantity: data.images_quantity,
-				videoQuantity: data.videos_quantity,
-				audioQuantity: data.audios_quantity,
-				documentQuantity: data.documents_quantity,
-				imageSize: data.images_size,
-				videoSize: data.videos_size,
-				audioSize: data.audios_size,
-				documentSize: data.documents_size,
-			}
-		},
-	});
-
 	useEffect(() => {
 		setFilesCount([
 			{
 				name: 'images-few',
-				value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
+				value: filesInfo?.images.size ? filesInfo?.images.size : 0,
 				color: '#f08c00'
 			},
 			{
 				name: 'videos',
-				value: filesInfo?.videoSize ? filesInfo?.videoSize : 0,
+				value: filesInfo?.videos.size ? filesInfo?.videos.size : 0,
 				color: '#2f9e44'
 			},
 			{
 				name: 'audios',
-				value: filesInfo?.audioSize ? filesInfo?.audioSize : 0,
+				value: filesInfo?.audios.size ? filesInfo?.audios.size : 0,
 				color: '#1971c2'
 			},
 			{
 				name: 'documents',
-				value: filesInfo?.documentSize ? filesInfo?.documentSize : 0,
+				value: filesInfo?.documents.size ? filesInfo?.documents.size : 0,
 				color: '#a561e6'
 			},
 		])
@@ -105,7 +55,7 @@ export default function MyContentPieChart() {
 
 	return (
 		<div className="protection-overview">
-			<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
+			<PieChartComponent data={filesCount} show={convertBytes(filesInfo?.total.size ?? 0)} />
 		</div>
 	)
 }

src/app/ui/my-content/new/my-content-page-title.tsx

@@ -2,21 +2,13 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function MyContentPageTitleColorFrame({ title, description }: { title: string, description: string }) {
 	const t = useTranslations('Global');
-	const {
+
-		data: filesInfo,
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="page-title-color-frame">
@@ -31,7 +23,7 @@ export default function MyContentPageTitleColorFrame({ title, description }: { t
 				</div>
 				<div className="header-stats">
 					<div className="header-stat-item">
-						<div className="header-stat-value">{filesInfo?.all_files_quantity}</div>
+						<div className="header-stat-value">{filesInfo?.total.quantity}</div>
 						<div className="header-stat-label">Файлов</div>
 					</div>
 					<div className="header-stat-divider"></div>
@@ -41,7 +33,7 @@ export default function MyContentPageTitleColorFrame({ title, description }: { t
 					</div>
 					<div className="header-stat-divider"></div>
 					<div className="header-stat-item">
-						<div className="header-stat-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}</div>
+						<div className="header-stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div>
 						<div className="header-stat-label">Хранилище</div>
 					</div>
 				</div>

src/app/ui/my-content/new/my-content-stats-overview.tsx

@@ -1,22 +1,13 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { IconDocument, IconShield, IconSearch, IconDiscet } from '@/app/ui/icons/icons';
+import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function MyContentStatsOverview() {
 	const t = useTranslations('Global');
-	const {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="my-content-stats-overview">
@@ -27,7 +18,7 @@ export default function MyContentStatsOverview() {
 					</div>
 					{/* <div className="stat-trend">+0%</div> */}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_quantity}</div>
+				<div className="stat-value">{filesInfo?.total.quantity}</div>
 				<div className="stat-label">Всего файлов</div>
 			</div>
 
@@ -38,7 +29,7 @@ export default function MyContentStatsOverview() {
 					</div>
 					{/* <div className="stat-trend">+0%</div> */}
 				</div>
-				<div className="stat-value">{filesInfo?.protected_files_count}</div>
+				<div className="stat-value">{filesInfo?.total.protected}</div>
 				<div className="stat-label">Защищено файлов</div>
 			</div>
 
@@ -60,7 +51,7 @@ export default function MyContentStatsOverview() {
 					</div>
 					{/* <div className="stat-trend">+0%</div> */}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}</div>
+				<div className="stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div>
 				<div className="stat-label">Хранилище</div>
 			</div>
 		</div>

src/app/ui/reports/reports-info.tsx

@@ -1,23 +1,13 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
+import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
-import { getUserFilesInfo } from '@/app/actions/action';
-import {convertBytes} from '@/app/lib/convertBytes';
-import { useEffect } from 'react';
 
 export default function ReportsInfo() {
 	const t = useTranslations("Global");
 
-	const {
+
-		data: filesInfo,
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
 
 	return (
 		<div className="dashboard-files-info">
@@ -25,21 +15,21 @@ export default function ReportsInfo() {
 				<div className="stat-type">
 					{t('all-content')}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0}</div>
+				<div className="stat-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}</div>
 			</div>
 
 			<div className="type-card videos">
 				<div className="stat-type">
 					{t('violations-few')}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_violation ? filesInfo?.all_files_violation : 0}</div>
+				<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
 			</div>
 
 			<div className="type-card audio">
 				<div className="stat-type">
 					{t('monitoring')}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0}</div>
+				<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div>
 			</div>
 
 			<div className="type-card scripts">

src/app/ui/violations/violations-statistic.tsx

@@ -1,51 +1,25 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
+import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
-import { getUserFilesInfo } from '@/app/actions/action';
-
-type FilesInfo = {
-	totalSize: number;
-	totalCount: number;
-};
 
 export default function ViolationsStatistic() {
 	const t = useTranslations('Global');
 
-	const {
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery<{
-		all_files_size: number,
-		all_files_quantity: number
-	}, Error, FilesInfo>({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-		select: (data): FilesInfo => {
-			if (!data) {
-				return {
-					totalSize: 0,
-					totalCount: 0
-				}
-			}
-
-			return {
-				totalSize: data.all_files_size,
-				totalCount: data.all_files_quantity
-			}
-		}
-	});
 
 	return (
 		<div className="protection-statistic">
 			<div className="protection-statistic-stat-card">
-				<div className="protection-statistic-stat-number">0</div>
+				<div className="protection-statistic-stat-number">
+					{filesInfo?.total.violation}
+				</div>
 				<div className="protection-statistic-stat-label">{t(`total-violations`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">
-				<div className="protection-statistic-stat-number">0</div>
+				<div className="protection-statistic-stat-number">
+					{filesInfo?.total.violation}
+				</div>
 				<div className="protection-statistic-stat-label">{t(`new`)}</div>
 			</div>
 			<div className="protection-statistic-stat-card">