frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor userFilesInfo query

Browse Source
This commit is contained in:
smanylov
2026-02-13 12:50:58 +07:00
parent e36eb4d422
commit d584e68e3a
17 changed files with 232 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/dashboard/new/dashboard-files-info.tsx
+18 -28
View File
@@ -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,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
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
+5 -15
View File
@@ -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,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
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
+10 -19
View File
@@ -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 {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
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
+11 -70
View File
@@ -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';
type FilesInfo = {
totalSize: number;
totalCount: number;
imageQuantity: number;
videoQuantity: number;
audioQuantity: number;
imageSize: number;
videoSize: number;
audioSize: number;
documentSize: number;
};
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function ProtectionOverview() {
const [isOpen, setIsOpen] = useState(false);
@@ -42,68 +28,23 @@ export default function ProtectionOverview() {
openDropDownList
);
const {
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,
}
},
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
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
+9 -19
View File
@@ -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 { 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,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
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