95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
|
'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>
|
||
|
|
)
|
||
|
|
}
|