121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getUserFilesData } from '@/app/actions/fileEntity';
|
|
import { getUserFilesInfo } from '@/app/actions/action';
|
|
import { convertBytes } from '@/app/lib/convertBytes';
|
|
import { pluralize } from '@/app/lib/pluralize';
|
|
|
|
type FilesInfo = {
|
|
totalSize: number;
|
|
totalCount: number;
|
|
};
|
|
|
|
|
|
export default function ProtectionSummary({ fileType }: { fileType: string }) {
|
|
const t = useTranslations('Global');
|
|
console.log(fileType);
|
|
|
|
const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => {
|
|
switch (fileType) {
|
|
case 'image':
|
|
return {
|
|
totalSize: 'images_size',
|
|
totalCount: 'images_quantity'
|
|
};
|
|
case 'video':
|
|
return {
|
|
totalSize: 'videos_size',
|
|
totalCount: 'videos_quantity'
|
|
};
|
|
case 'audio':
|
|
return {
|
|
totalSize: 'audios_size',
|
|
totalCount: 'audios_quantity'
|
|
};
|
|
default:
|
|
return {
|
|
totalSize: 'all_files_size',
|
|
totalCount: 'all_files_quantity'
|
|
};
|
|
}
|
|
};
|
|
|
|
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 pluralizeFilesName = (number: number) => {
|
|
const translate = [t(`${fileType}`), t(`${fileType}s-few`), t(`${fileType}s`)];
|
|
return pluralize(number, translate[0], translate[1], translate[2]);
|
|
};
|
|
|
|
const pluralizeCheks = (number: number) => {
|
|
const translate = [t('check'), t('checks-few'), t('checks')];
|
|
return pluralize(number, translate[0], translate[1], translate[2]);
|
|
};
|
|
|
|
const pluralizeViolations = (number: number) => {
|
|
const translate = [t('violation'), t('violations-few'), t('violations')];
|
|
return pluralize(number, translate[0], translate[1], translate[2]);
|
|
};
|
|
|
|
const CHECKS = 6;
|
|
const VIOLATIONS = 2;
|
|
|
|
return (
|
|
<div className="protection-overview grow">
|
|
<h3>{t('protecting-your-content')}</h3>
|
|
<p>{t('current-status-of')}</p>
|
|
<div className="protection-stats">
|
|
<div className="protection-stat total-files">
|
|
<div className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</div>
|
|
<div className="protection-stat-label">
|
|
{pluralizeFilesName(filesInfo?.totalCount || 0)}
|
|
</div>
|
|
</div>
|
|
<div className="protection-stat total-checks">
|
|
<div className="protection-stat-value">{CHECKS}</div>
|
|
<div className="protection-stat-label">
|
|
{pluralizeCheks(CHECKS)}
|
|
</div>
|
|
<div className="protection-stat-value">{VIOLATIONS}</div>
|
|
<div className="protection-stat-label">
|
|
{pluralizeViolations(VIOLATIONS)}
|
|
</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-label">
|
|
{t('disk-space-used')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |