refactor userFilesInfo query
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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';
|
||||
|
||||
type FilesInfo = {
|
||||
totalSize: number;
|
||||
totalCount: number;
|
||||
totalProtected: number;
|
||||
};
|
||||
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
|
||||
|
||||
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 {
|
||||
totalSize: 'images_size',
|
||||
totalCount: 'images_quantity',
|
||||
totalProtected: 'protected_image_files_count'
|
||||
};
|
||||
return filesInfo?.images;
|
||||
case 'video':
|
||||
return {
|
||||
totalSize: 'videos_size',
|
||||
totalCount: 'videos_quantity',
|
||||
totalProtected: 'protected_video_files_count'
|
||||
};
|
||||
return filesInfo?.videos;
|
||||
case 'audio':
|
||||
return {
|
||||
totalSize: 'audios_size',
|
||||
totalCount: 'audios_quantity',
|
||||
totalProtected: 'protected_audio_files_count'
|
||||
};
|
||||
return filesInfo?.audios;
|
||||
case 'document':
|
||||
return filesInfo?.documents;
|
||||
default:
|
||||
return {
|
||||
totalSize: 'all_files_size',
|
||||
totalCount: 'all_files_quantity',
|
||||
totalProtected: 'protected_files_count'
|
||||
};
|
||||
return filesInfo?.total;
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
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]
|
||||
}
|
||||
}
|
||||
});
|
||||
const currentData = getFileTypeData(fileType);
|
||||
|
||||
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>
|
||||
|
||||
@@ -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 { useTranslations, useLocale } from 'next-intl';
|
||||
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 {
|
||||
totalSize: 'images_size',
|
||||
totalCount: 'images_quantity'
|
||||
};
|
||||
return filesInfo?.images;
|
||||
case 'video':
|
||||
return {
|
||||
totalSize: 'videos_size',
|
||||
totalCount: 'videos_quantity'
|
||||
};
|
||||
return filesInfo?.videos;
|
||||
case 'audio':
|
||||
return {
|
||||
totalSize: 'audios_size',
|
||||
totalCount: 'audios_quantity'
|
||||
};
|
||||
return filesInfo?.audios;
|
||||
case 'document':
|
||||
return filesInfo?.documents;
|
||||
default:
|
||||
return {
|
||||
totalSize: 'all_files_size',
|
||||
totalCount: 'all_files_quantity'
|
||||
};
|
||||
return filesInfo?.total;
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
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 currentData = getFileTypeData(fileType);
|
||||
|
||||
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>
|
||||
|
||||
@@ -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 { 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 {
|
||||
data: filesInfo,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ['userFilesInfo'],
|
||||
queryFn: getUserFilesInfo,
|
||||
});
|
||||
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
|
||||
|
||||
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,
|
||||
videos: filesInfo?.videos_size || 0,
|
||||
audios: filesInfo?.audios_size || 0,
|
||||
documents: filesInfo?.documents_size || 0,
|
||||
images: filesInfo?.images.size || 0,
|
||||
videos: filesInfo?.videos.size || 0,
|
||||
audios: filesInfo?.audios.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>
|
||||
|
||||
@@ -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 {
|
||||
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,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ['userFilesInfo'],
|
||||
queryFn: getUserFilesInfo,
|
||||
});
|
||||
|
||||
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
|
||||
|
||||
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>
|
||||
|
||||
@@ -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 {
|
||||
data: filesInfo,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ['userFilesInfo'],
|
||||
queryFn: getUserFilesInfo,
|
||||
});
|
||||
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
|
||||
|
||||
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>
|
||||
|
||||
@@ -1,23 +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 { useEffect } from 'react';
|
||||
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
|
||||
|
||||
export default function ReportsInfo() {
|
||||
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">
|
||||
@@ -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">
|
||||
|
||||
@@ -1,51 +1,25 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getUserFilesInfo } from '@/app/actions/action';
|
||||
|
||||
type FilesInfo = {
|
||||
totalSize: number;
|
||||
totalCount: number;
|
||||
};
|
||||
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
|
||||
|
||||
export default function ViolationsStatistic() {
|
||||
const t = useTranslations('Global');
|
||||
|
||||
const {
|
||||
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
|
||||
}
|
||||
}
|
||||
});
|
||||
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
|
||||
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user