refactor userFilesInfo query
This commit is contained in:
@@ -1,22 +1,12 @@
|
||||
'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 DashboardFilesInfo() {
|
||||
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="dashboard-files-info">
|
||||
@@ -24,20 +14,20 @@ export default function DashboardFilesInfo() {
|
||||
<div className="stat-type">
|
||||
{t('images')}
|
||||
</div>
|
||||
<div className="stat-value">{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}</div>
|
||||
<div className="stat-value">{filesInfo?.images.quantity ? filesInfo?.images.quantity : 0}</div>
|
||||
<div className="stat-label">{t('your-image')}</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('size')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.protected_image_files_count ? filesInfo?.protected_image_files_count : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.images.protected ? filesInfo?.images.protected : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('violations')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.images_violations ? filesInfo?.images_violations : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.images.violation ? filesInfo?.images.violation : 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,20 +36,20 @@ export default function DashboardFilesInfo() {
|
||||
<div className="stat-type">
|
||||
{t('videos')}
|
||||
</div>
|
||||
<div className="stat-value">{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}</div>
|
||||
<div className="stat-value">{filesInfo?.videos.quantity ? filesInfo?.videos.quantity : 0}</div>
|
||||
<div className="stat-label">{t('your-videos')}</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('size')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.protected_video_files_count ? filesInfo?.protected_video_files_count : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.videos.protected ? filesInfo?.videos.protected : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('violations')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.videos_violations ? filesInfo?.videos_violations : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.videos.violation ? filesInfo?.videos.violation : 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,20 +58,20 @@ export default function DashboardFilesInfo() {
|
||||
<div className="stat-type">
|
||||
{t('audios')}
|
||||
</div>
|
||||
<div className="stat-value">{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}</div>
|
||||
<div className="stat-value">{filesInfo?.audios.quantity ? filesInfo?.audios.quantity : 0}</div>
|
||||
<div className="stat-label">{t('your-audios')}</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('size')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.protected_audio_files_count ? filesInfo?.protected_audio_files_count : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.audios.protected ? filesInfo?.audios.protected : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('violations')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.audios_violations ? filesInfo?.audios_violations : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.audios.violation ? filesInfo?.audios.violation : 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,20 +80,20 @@ export default function DashboardFilesInfo() {
|
||||
<div className="stat-type">
|
||||
{t('documents')}
|
||||
</div>
|
||||
<div className="stat-value">{filesInfo?.documents_quantity ? filesInfo?.documents_quantity : 0}</div>
|
||||
<div className="stat-value">{filesInfo?.documents.quantity ? filesInfo?.documents.quantity : 0}</div>
|
||||
<div className="stat-label">{t('your-documents')}</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('size')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.documents_check ? convertBytes(filesInfo?.documents_check) : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.documents.check? convertBytes(filesInfo?.documents.check) : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.documents_check ? filesInfo?.documents_check : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.documents.protected ? filesInfo?.documents.protected : 0}</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">{t('violations')}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.documents_violations ? filesInfo?.documents_violations : 0}</span>
|
||||
<span className="type-card-stat-value">{filesInfo?.documents.violation ? filesInfo?.documents.violation : 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,19 @@
|
||||
'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 DashboardUserStats() {
|
||||
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="dashboard-user-stats">
|
||||
|
||||
<div className="stat-card projects">
|
||||
<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
|
||||
<div className="stat-value">{filesInfo?.protected_files_count ? filesInfo?.protected_files_count : 0}</div>
|
||||
<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
|
||||
<div className="stat-label">Файлов под защитой</div>
|
||||
<div className="stat-icon">🛡️</div>
|
||||
</div>
|
||||
@@ -37,7 +27,7 @@ export default function DashboardUserStats() {
|
||||
|
||||
<div className="stat-card violations">
|
||||
<div className="stat-type">НАРУШЕНИЯ</div>
|
||||
<div className="stat-value">{filesInfo?.all_files_violations ? filesInfo?.all_files_violations : 0}</div>
|
||||
<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
|
||||
<div className="stat-label">Требуют внимания</div>
|
||||
<div className="stat-icon">⚠️</div>
|
||||
</div>
|
||||
@@ -45,7 +35,7 @@ export default function DashboardUserStats() {
|
||||
<div className="stat-card storage">
|
||||
<div className="stat-type">ХРАНИЛИЩЕ</div>
|
||||
<div className="stat-value">
|
||||
{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}
|
||||
{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
|
||||
</div>
|
||||
<div className="stat-label">Использовано места</div>
|
||||
<div className="stat-icon">💾</div>
|
||||
|
||||
@@ -1,20 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getUserFilesInfo } from '@/app/actions/action';
|
||||
import { convertBytes } from '@/app/lib/convertBytes';
|
||||
import { getProcents } from '@/app/lib/getProcents';
|
||||
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
|
||||
|
||||
export default function DahboardLimitsSection() {
|
||||
const {
|
||||
data: filesInfo,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ['userFilesInfo'],
|
||||
queryFn: getUserFilesInfo,
|
||||
});
|
||||
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
|
||||
|
||||
return (
|
||||
<div className="dashboard-limits-section">
|
||||
@@ -26,13 +17,13 @@ export default function DahboardLimitsSection() {
|
||||
<span>🔍</span>
|
||||
<span>Проверки</span>
|
||||
</div>
|
||||
<div className="limit-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0} / 10,000</div>
|
||||
<div className="limit-value">{filesInfo?.total.check ? filesInfo?.total.check : 0} / 10,000</div>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar low" style={{ width: '0%' }}></div>
|
||||
</div>
|
||||
<div className="progress-bar-value">
|
||||
{getProcents(filesInfo?.all_files_check, 10000)}%
|
||||
{getProcents(filesInfo?.total.check, 10000)}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,13 +33,13 @@ export default function DahboardLimitsSection() {
|
||||
<span>💾</span>
|
||||
<span>Хранилище</span>
|
||||
</div>
|
||||
<div className="limit-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0} / 1,024 МБ</div>
|
||||
<div className="limit-value">{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} / 1,024 МБ</div>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.all_files_size, 1000000000)}%` }}></div>
|
||||
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.total.size, 1000000000)}%` }}></div>
|
||||
</div>
|
||||
<div className="progress-bar-value">
|
||||
{getProcents(filesInfo?.all_files_size, 1000000000)}%
|
||||
{getProcents(filesInfo?.total.size, 1000000000)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="limit-item">
|
||||
@@ -57,13 +48,13 @@ export default function DahboardLimitsSection() {
|
||||
<span>📁</span>
|
||||
<span>Файлы</span>
|
||||
</div>
|
||||
<div className="limit-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0} / 500</div>
|
||||
<div className="limit-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0} / 500</div>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.all_files_quantity, 500)}%` }}></div>
|
||||
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.total.quantity, 500)}%` }}></div>
|
||||
</div>
|
||||
<div className="progress-bar-value">
|
||||
{getProcents(filesInfo?.all_files_quantity, 500)}%
|
||||
{getProcents(filesInfo?.total.quantity, 500)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user