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

update user files info

Browse Source
This commit is contained in:
smanylov
2026-01-07 13:03:50 +07:00
parent 5597fe42a2
commit aa0f9398eb
16 changed files with 371 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/my-content/my-content-info-block.tsx
+98 -16
View File
@@ -1,6 +1,72 @@
'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 } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
export default function MyContentInfoBlock() {
const t = useTranslations('Global');
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const fileTypeSizePercents = () => {
if (!filesInfo?.all_files_size) {
return {
images: 0,
videos: 0,
audios: 0,
documents: 0,
};
}
const sizes = {
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 rawPercents = {
images: (sizes.images / total) * 100,
videos: (sizes.videos / total) * 100,
audios: (sizes.audios / total) * 100,
documents: (sizes.documents / total) * 100,
};
const roundedPercents = {
images: Math.floor(rawPercents.images),
videos: Math.floor(rawPercents.videos),
audios: Math.floor(rawPercents.audios),
documents: Math.floor(rawPercents.documents),
};
const remainder = 100 - Object.values(roundedPercents).reduce((a, b) => a + b, 0);
const fractions = Object.entries(rawPercents).map(([key, value]) => ({
key,
fraction: value - Math.floor(value)
})).sort((a, b) => b.fraction - a.fraction);
const result = { ...roundedPercents };
for (let i = 0; i < remainder; i++) {
result[fractions[i].key as keyof typeof result]++;
}
return result;
};
return (
<div className="block-wrapper auto grow">
<div className="file-stats-container">
@@ -11,13 +77,17 @@ export default function MyContentInfoBlock() {
<IconImageFile />
</div>
<div className="file-stat-info">
<h4 className="file-stat-title">Image</h4>
<span className="file-stat-usage">0%</span>
<h4 className="file-stat-title">{t('images')}</h4>
<span className="file-stat-usage">{fileTypeSizePercents().images}%</span>
</div>
</div>
<div className="file-stat-details">
<span className="file-stat-count">0 files</span>
<span className="file-stat-size">0 GB</span>
<span className="file-stat-count">
{filesInfo.images_quantity ? filesInfo.images_quantity : 0} {t('files')}
</span>
<span className="file-stat-size">
{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
</span>
</div>
</div>
@@ -27,13 +97,17 @@ export default function MyContentInfoBlock() {
<IconVideoFile />
</div>
<div className="file-stat-info">
<h4 className="file-stat-title">Videos</h4>
<span className="file-stat-usage">0%</span>
<h4 className="file-stat-title">{t('videos')}</h4>
<span className="file-stat-usage">{fileTypeSizePercents().videos}%</span>
</div>
</div>
<div className="file-stat-details">
<span className="file-stat-count">0 files</span>
<span className="file-stat-size">0 GB</span>
<span className="file-stat-count">
{filesInfo.videos_quantity ? filesInfo.videos_quantity : 0} {t('files')}
</span>
<span className="file-stat-size">
{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
</span>
</div>
</div>
@@ -43,13 +117,17 @@ export default function MyContentInfoBlock() {
<IconAudioFile />
</div>
<div className="file-stat-info">
<h4 className="file-stat-title">Audios</h4>
<span className="file-stat-usage">0%</span>
<h4 className="file-stat-title">{t('audios')}</h4>
<span className="file-stat-usage">{fileTypeSizePercents().audios}%</span>
</div>
</div>
<div className="file-stat-details">
<span className="file-stat-count">0 files</span>
<span className="file-stat-size">0 GB</span>
<span className="file-stat-count">
{filesInfo.audios_quantity ? filesInfo.audios_quantity : 0} {t('files')}
</span>
<span className="file-stat-size">
{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
</span>
</div>
</div>
@@ -59,13 +137,17 @@ export default function MyContentInfoBlock() {
<IconDocument />
</div>
<div className="file-stat-info">
<h4 className="file-stat-title">Documents</h4>
<span className="file-stat-usage">0%</span>
<h4 className="file-stat-title">{t('documents')}</h4>
<span className="file-stat-usage">{fileTypeSizePercents().documents}%</span>
</div>
</div>
<div className="file-stat-details">
<span className="file-stat-count">0 files</span>
<span className="file-stat-size">0 GB</span>
<span className="file-stat-count">
{filesInfo.documents_quantity ? filesInfo.documents_quantity : 0} {t('files')}
</span>
<span className="file-stat-size">
{filesInfo.documents_size ? convertBytes(filesInfo.documents_size) : 0}
</span>
</div>
</div>
</div>
src/app/ui/my-content/my-content-pie-chart.tsx
+95
View File
@@ -0,0 +1,95 @@
'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';
type FilesInfo = {
totalSize: number;
totalCount: number;
imageQuantity: number;
videoQuantity: number;
audioQuantity: number;
documentQuantity: number;
};
export default function MyContentPieChart() {
const [filesCount, setFilesCount] = useState([
{ name: 'images', value: 0, color: '#f08c00' },
{ name: 'videos', value: 0, color: '#2f9e44' },
{ name: 'audios', value: 0, color: '#1971c2' },
{ 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,
}, Error, FilesInfo>({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: 0,
totalCount: 0,
imageQuantity: 0,
videoQuantity: 0,
audioQuantity: 0,
documentQuantity: 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,
}
},
});
useEffect(() => {
setFilesCount([
{
name: 'images',
value: filesInfo?.imageQuantity ? filesInfo?.imageQuantity : 0,
color: '#f08c00'
},
{
name: 'videos',
value: filesInfo?.videoQuantity ? filesInfo?.videoQuantity : 0,
color: '#2f9e44'
},
{
name: 'audios',
value: filesInfo?.audioQuantity ? filesInfo?.audioQuantity : 0,
color: '#1971c2'
},
{
name: 'documents',
value: filesInfo?.documentQuantity ? filesInfo?.documentQuantity : 0,
color: '#a561e6'
},
])
}, [filesInfo]);
return (
<div className="protection-overview">
<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
</div>
)
}