refactor userFilesInfo query
This commit is contained in:
smanylov
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user