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/my-content/my-content-info-block.tsx
+17 -26
View File
@@ -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>
src/app/ui/my-content/my-content-pie-chart.tsx
+7 -57
View File
@@ -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>
)
}
src/app/ui/my-content/new/my-content-page-title.tsx
+5 -13
View File
@@ -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>
src/app/ui/my-content/new/my-content-stats-overview.tsx
+5 -14
View File
@@ -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>