diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx index 04fd2c4..89d20c8 100644 --- a/src/app/[locale]/pages/dashboard/page.tsx +++ b/src/app/[locale]/pages/dashboard/page.tsx @@ -22,7 +22,7 @@ export default function Page() { - + ); diff --git a/src/app/[locale]/pages/marking-audio/page.tsx b/src/app/[locale]/pages/marking-audio/page.tsx index 4286152..1154fee 100644 --- a/src/app/[locale]/pages/marking-audio/page.tsx +++ b/src/app/[locale]/pages/marking-audio/page.tsx @@ -57,7 +57,7 @@ export default async function Page() { - + ) } \ No newline at end of file diff --git a/src/app/[locale]/pages/marking-photo/page.tsx b/src/app/[locale]/pages/marking-photo/page.tsx index 6f433b7..2c2dad9 100644 --- a/src/app/[locale]/pages/marking-photo/page.tsx +++ b/src/app/[locale]/pages/marking-photo/page.tsx @@ -57,7 +57,7 @@ export default async function Page() { - + ) } \ No newline at end of file diff --git a/src/app/[locale]/pages/marking-video/page.tsx b/src/app/[locale]/pages/marking-video/page.tsx index 3123798..c87382b 100644 --- a/src/app/[locale]/pages/marking-video/page.tsx +++ b/src/app/[locale]/pages/marking-video/page.tsx @@ -57,7 +57,7 @@ export default async function Page() { - + ) } \ No newline at end of file diff --git a/src/app/components/tanstakTable.tsx b/src/app/components/tanstakTable.tsx index 6bd3770..fc8aabf 100644 --- a/src/app/components/tanstakTable.tsx +++ b/src/app/components/tanstakTable.tsx @@ -82,7 +82,7 @@ const formatDateTime = (timestamp: number) => { return `${hours}:${minutes}`; }; -export default function TanstakFilesTable() { +export default function TanstakFilesTable({ fileType }: { fileType: string }) { const { data: tableData, isLoading, @@ -120,7 +120,7 @@ export default function TanstakFilesTable() { const [sorting, setSorting] = useState([]); const [columnFilters, setColumnFilters] = useState([]); const [dateFilter, setDateFilter] = useState('all'); - const [typeFilter, setTypeFilter] = useState('all'); + const [typeFilter, setTypeFilter] = useState(fileType); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10, @@ -436,6 +436,11 @@ export default function TanstakFilesTable() { onSuccess: (response, fileId) => { if (response === fileId) { + queryClient.invalidateQueries({ + queryKey: ['userFilesData'], + refetchType: 'active' + }); + setOpenWindow(false); setOpenWindowChildren(null); toast.success(t('file-has-been-deleted')); @@ -580,40 +585,42 @@ export default function TanstakFilesTable() { -
-
{t('type-filter')}:
- { - switch (typeFilter) { - case 'image': - return t('images') - case 'video': - return t('videos') - case 'audio': - return t('audios') - default: - return t('all-types') - } - })() - } - callBack={setTypeFilter} - > -
  • - {t('all-types')} -
    • -
  • - {t('images')} -
    • -
  • - {t('videos')} -
    • -
  • - {t('audios')} -
    • -     -
    + {fileType === "all" && ( +
    +
    {t('type-filter')}:
    + { + switch (typeFilter) { + case 'image': + return t('images') + case 'video': + return t('videos') + case 'audio': + return t('audios') + default: + return t('all-types') + } + })() + } + callBack={setTypeFilter} + > +
  • + {t('all-types')} +
    • +
  • + {t('images')} +
    • +
  • + {t('videos')} +
    • +
  • + {t('audios')} +
    • +     +
    + )}
    diff --git a/src/app/lib/prefetch-queries.ts b/src/app/lib/prefetch-queries.ts index 20dfc66..97636f3 100644 --- a/src/app/lib/prefetch-queries.ts +++ b/src/app/lib/prefetch-queries.ts @@ -10,7 +10,10 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) { }), queryClient.prefetchQuery({ queryKey: ['userFilesData'], - queryFn: () => getUserFilesData(), + queryFn: () => { + console.log('make prefetch userFilesData'); + return getUserFilesData(); + }, staleTime: 30 * 1000 }), ]); diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 7c2c351..fc07a76 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -95,6 +95,15 @@ } } + &.total-files.add-content { + display: flex; + justify-content: center; + + .protection-stat-value { + margin-bottom: 0; + } + } + &-row { display: flex; align-items: center; @@ -110,6 +119,13 @@ &.btn { user-select: none; + transition: all 0.3s ease-in; + padding: 5px; + margin-top: 10px; + + &:hover { + background: v.$shadow-1; + } } } diff --git a/src/app/ui/dashboard/files-table.tsx b/src/app/ui/dashboard/files-table.tsx index e0b6de3..c1c82f6 100644 --- a/src/app/ui/dashboard/files-table.tsx +++ b/src/app/ui/dashboard/files-table.tsx @@ -1,8 +1,13 @@ import TanstakFilesTable from '@/app/components/tanstakTable'; -export default function FilesTable() { + +type FilesTable = { + fileType: string +} + +export default function FilesTable({ fileType }: FilesTable) { return (
    - +
    ) } \ No newline at end of file diff --git a/src/app/ui/dashboard/protection-overview.tsx b/src/app/ui/dashboard/protection-overview.tsx index 2fdc001..1e428b6 100644 --- a/src/app/ui/dashboard/protection-overview.tsx +++ b/src/app/ui/dashboard/protection-overview.tsx @@ -5,6 +5,8 @@ import { PieChartComponent } from '@/app/components/PieChartComponent'; import { useTranslations } from 'next-intl'; import Link from 'next/link'; import { useClickOutside } from '@/app/hooks/useClickOutside'; +import { useQuery } from '@tanstack/react-query'; +import { getUserFilesData } from '@/app/actions/fileEntity'; const data = [ @@ -13,8 +15,12 @@ const data = [ { name: 'audios', value: 25, color: '#1971c2' }, ]; -/* нужно что бы включать выключать кнопки добавления маркировок */ -const totalFiles = 1; + +type FilesInfo = { + totalSize: string; + totalCount: number; +}; + export default function ProtectionOverview() { const [isOpen, setIsOpen] = useState(false); @@ -25,6 +31,32 @@ export default function ProtectionOverview() { setOpenDropDownList(false) }); + const { + data: filesInfo, + isLoading, + isError, + error, + } = useQuery<{ + formattedTotalSize: string, + totalCount: number + }, Error, FilesInfo>({ + queryKey: ['userFilesData'], + queryFn: getUserFilesData, + select: (data): FilesInfo => { + if (!data) { + return { + totalSize: '0', + totalCount: 0 + } + } + + return { + totalSize: data.formattedTotalSize, + totalCount: (data.totalCount) + } + }, + }); + return (

    {t('protecting-your-content')}

    @@ -32,33 +64,24 @@ export default function ProtectionOverview() {
    - {totalFiles ? ( + {filesInfo?.totalCount ? ( <>
    -
    0
    +
    + {filesInfo?.totalCount ? filesInfo?.totalCount : 0} +
    {t('total-files')}
    - - {/*
    -
    -
    0
    -
    {t('check')}
    -
    -
    -
    0
    -
    {t('violations')}
    -
    -
    */}
    0
    {t('check')}
    0
    {t('violations')}
    - +
    ) : ( -
    +
    {t('there-are-no-files-yet')}
    @@ -96,14 +119,14 @@ export default function ProtectionOverview() {
    ) : (
    -
    0 / 0
    +
    {filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0
    {t('disk-space-used')}
    )}
    - {!!totalFiles && ( + {!!filesInfo?.totalCount && (