151 lines
3.6 KiB
TypeScript
151 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getUserFilesData } from '@/app/actions/fileEntity';
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import { FileTypeIcon } from '@/app/components/FileTypeIcon';
|
|
import { convertBytes } from '@/app/lib/convertBytes';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useClickOutside } from '@/app/hooks/useClickOutside';
|
|
import Link from 'next/link';
|
|
|
|
type FileItem = {
|
|
id: string;
|
|
fileName: string;
|
|
fileType: string;
|
|
size?: number | undefined;
|
|
uploadDate?: number;
|
|
protectStatus: string;
|
|
supportId: number;
|
|
};
|
|
|
|
type ApiFile = {
|
|
id: string;
|
|
originalFileName: string;
|
|
mimeType: string;
|
|
fileSize: number;
|
|
updatedAt: string;
|
|
protectStatus: string;
|
|
supportId: number;
|
|
};
|
|
|
|
type ApiResponse = {
|
|
files?: ApiFile[];
|
|
};
|
|
|
|
export default function DashboardUserFiles() {
|
|
const {
|
|
data: tableData,
|
|
isLoading,
|
|
isError,
|
|
error,
|
|
} = useQuery<ApiResponse, Error, FileItem[], ['userFilesData', number, number]>({
|
|
queryKey: ['userFilesData', 1, 5],
|
|
queryFn: () => getUserFilesData(1, 5),
|
|
|
|
select: (data: ApiResponse): FileItem[] => {
|
|
if (!data?.files) return [];
|
|
|
|
return data.files.map((item: ApiFile) => {
|
|
const newDate = new Date(item.updatedAt).getTime();
|
|
|
|
return {
|
|
id: item.id,
|
|
fileName: item.originalFileName,
|
|
fileType: item.mimeType.toLocaleLowerCase(),
|
|
size: item.fileSize,
|
|
uploadDate: newDate,
|
|
protectStatus: item.protectStatus,
|
|
supportId: item.supportId,
|
|
};
|
|
});
|
|
},
|
|
});
|
|
|
|
const t = useTranslations('Global');
|
|
const [openDropDownList, setOpenDropDownList] = useState(false);
|
|
const dropDownList = useRef(null);
|
|
useClickOutside(
|
|
dropDownList,
|
|
() => {
|
|
setOpenDropDownList(false)
|
|
},
|
|
openDropDownList
|
|
);
|
|
|
|
const formatDate = (timestamp: number) => {
|
|
const date = new Date(timestamp);
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const year = date.getFullYear();
|
|
|
|
return `${day}.${month}.${year}`;
|
|
};
|
|
|
|
return (
|
|
<div className="content-section">
|
|
<div className="section-header">
|
|
<h3 className="section-title">Ваши файлы</h3>
|
|
<div
|
|
className="section-add-file btn view-all-link"
|
|
onClick={() => {
|
|
setOpenDropDownList(!openDropDownList);
|
|
}}
|
|
ref={dropDownList}
|
|
>
|
|
{t('add')}
|
|
<div
|
|
className={`section-drop-down-list ${openDropDownList ? 'opened' : ''}`}
|
|
>
|
|
<div
|
|
className="flex flex-col text-center"
|
|
>
|
|
<Link href='/pages/marking-images'>
|
|
{t('photo-marking')}
|
|
</Link>
|
|
<Link href='/pages/marking-video'>
|
|
{t('video-marking')}
|
|
</Link>
|
|
<Link href='/pages/marking-audio'>
|
|
{t('audio-marking')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="user-files-list">
|
|
|
|
{tableData?.length ? (
|
|
tableData?.map((file) => {
|
|
return (
|
|
<div
|
|
key={file.id}
|
|
className="file-item"
|
|
>
|
|
<div className="file-icon">
|
|
<FileTypeIcon type={file.fileType} />
|
|
</div>
|
|
<div className="file-info">
|
|
<div className="file-name" title={file.fileName}>
|
|
{file.fileName}
|
|
</div>
|
|
<div className="file-meta">
|
|
{convertBytes(file.size ? file.size : 0)} • {formatDate(file.uploadDate ? file.uploadDate : 0)}
|
|
</div>
|
|
</div>
|
|
<div className="file-badge protected">
|
|
{file.protectStatus ? t(file.protectStatus) : t('error')}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
) : (
|
|
<div>
|
|
{t('there-are-no-files-yet')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |