update user files info

src/app/ui/my-content/my-content-info-block.tsx

@@ -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>