update user files info

src/app/ui/my-content/my-content-pie-chart.tsx

@@ -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>
+	)
+}