add life data for tanstak table

src/app/[locale]/pages/layout.tsx

@@ -3,17 +3,12 @@ import styles from '@/app/styles/page.module.scss'
 import HeaderPanel from '@/app/ui/header/headerPanel';
 import { getQueryClient } from '@/app/providers/getQueryClient';
 import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
-import { getUserData } from '@/app/actions/action';
+import { prefetchLayoutQueries } from '@/app/lib/prefetch-queries';
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
 	const queryClient = getQueryClient();
 
-	await Promise.all([
+	await prefetchLayoutQueries(queryClient);
-		queryClient.prefetchQuery({
-			queryKey: ['userData'],
-			queryFn: () => getUserData()
-		})
-	])
 
 	return (
 		<div className="flex">

src/app/actions/auth.ts

@@ -224,7 +224,6 @@ export async function registration(
 			if (parsed.message_desc === 'Operation successful') {
 				await createSession(parsed.message_body.token, email);
 			} else {
-				console.log('error');
 				throw parsed;
 			}
 		} else {
@@ -234,8 +233,6 @@ export async function registration(
 		if (error) {
 			const typedError = error as any;
 			const errors: Record<string, string> = {};
-			console.log(typedError);
-			console.log(typedError.message_body);
 
 			switch (typedError.message_code) {
 				case 1:
@@ -273,8 +270,7 @@ export async function registration(
 				error: errors
 			};
 		}
-		console.log('finale error');
+
-		console.log(error);
 		throw error;
 	}
 

src/app/actions/fileEntity.ts

@@ -0,0 +1,86 @@
+'use server'
+
+import { getSessionData } from '@/app/actions/session';
+import { localDevelopmentUrl } from '@/app/actions/definitions';
+const API_BASE_URL = process.env.NODE_ENV === 'development'
+	? localDevelopmentUrl
+	: 'http://app:8080';
+
+
+export async function getUserFilesData() {
+	const token = await getSessionData('token');
+	console.log('fetch');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 20005,
+				message_body: {
+					action: 'user_files',
+					page: 1,
+					page_size: 20,
+					token: token
+				}
+			}),
+			headers: {
+				"Content-Type": "application/json",
+				"Accept": "application/json"
+			}
+		});
+
+		if (response.ok) {
+			let parsed = await response.json();
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
+			} else {
+				throw parsed;
+			}
+		} else {
+			throw (`${response.status}`);
+		}
+
+	} catch (error) {
+		return error
+	}
+}
+
+export async function removeUserFile(fileId : string) {
+	const token = await getSessionData('token');
+	console.log('remove');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 20005,
+				message_body: {
+					action: 'delete_file',
+					file_id: fileId,
+					token: token
+				}
+			}),
+			headers: {
+				"Content-Type": "application/json",
+				"Accept": "application/json"
+			}
+		});
+
+		if (response.ok) {
+			let parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.file_id;
+			} else {
+				throw parsed;
+			}
+		} else {
+			throw (`${response.status}`);
+		}
+
+	} catch (error) {
+		return error
+	}
+}

src/app/actions/fileUpload.ts

@@ -1,7 +1,7 @@
 'use server'
 
 import { localDevelopmentUrl } from '@/app/actions/definitions';
-import { getSessionData, createSession } from '@/app/actions/session';
+import { getSessionData } from '@/app/actions/session';
 
 const API_BASE_URL = process.env.NODE_ENV === 'development'
 	? localDevelopmentUrl
@@ -93,7 +93,6 @@ export async function cancelUpload(udloadId: string) {
 			};
 
 			if (parsed.message_desc === 'Upload cancelled successfully') {
-				console.log('cancelUpload done');
 				return parsed.message_body;
 			} else {
 				throw parsed;
@@ -102,7 +101,6 @@ export async function cancelUpload(udloadId: string) {
 			throw (`${response.status}`);
 		}
 	} catch (error) {
-		console.log('cancelUpload error');
 		return error;
 	}
 }
@@ -190,7 +188,6 @@ export async function getAllowedFilesExtensions(type: string) {
 			if (parsed.message_desc === 'Operation successful') {
 				return parsed.message_body;
 			} else {
-				console.log('error cancel getAllowedFilesExtensions');
 				throw parsed;
 			}
 		} else {

src/app/components/tanstakTable.tsx

@@ -11,19 +11,21 @@ import {
 	SortingState,
 	ColumnFiltersState,
 } from '@tanstack/react-table';
-import {IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileOpen, IconShieldExclamation} from '@/app/ui/icons/icons';
+import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileOpen, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
 import { useTranslations } from 'next-intl';
 import DropDownList from '@/app/components/dropDownList';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesData, removeUserFile } from '@/app/actions/fileEntity';
 
 // Типы данных
 type FileType = 'image' | 'video' | 'audio';
 type FileItem = {
-	id: number;
+	id: string;
 	fileName: string;
 	fileType: FileType;
-	violations: number;
+	violations?: number | undefined;
-	checks: number;
+	checks?: number | undefined;
-	lastCheck: number; // timestamp в миллисекундах
+	lastCheck?: number; // timestamp в миллисекундах
 };
 
 // Иконки для типов файлов
@@ -52,29 +54,52 @@ const formatDate = (timestamp: number) => {
 	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}`;
 };
 
-// Компонент таблицы
+const formatDateTime = (timestamp: number) => {
+	const date = new Date(timestamp);
+	const hours = date.getHours().toString().padStart(2, '0');
+	const minutes = date.getMinutes().toString().padStart(2, '0');
+
+	return `${hours}:${minutes}`;
+};
+
 export default function TanstakFilesTable() {
-	// Данные с timestamp вместо Date объектов
+	const {
-	const [data] = useState<FileItem[]>([
+		data: userFilesData,
-		{ id: 1, fileName: 'image1.jpg', fileType: 'image', violations: 5, checks: 12, lastCheck: 1705267200000 }, // 15.01.2024
+		isLoading,
-		{ id: 2, fileName: 'prespresentationpresentationprpresentationpresentationesentationentation.mp4', fileType: 'video', violations: 2, checks: 8, lastCheck: 1705180800000 }, // 14.01.2024
+		isError,
-		{ id: 3, fileName: 'song.mp3', fileType: 'audio', violations: 0, checks: 5, lastCheck: 1705094400000 }, // 13.01.2024
+		error
-		{ id: 4, fileName: 'photo1.jpg', fileType: 'image', violations: 3, checks: 10, lastCheck: 1705008000000 }, // 12.01.2024
+	} = useQuery({
-		{ id: 5, fileName: 'movie.mp4', fileType: 'video', violations: 1, checks: 7, lastCheck: 1704921600000 }, // 11.01.2024
+		queryKey: ['userFilesData'],
-		{ id: 6, fileName: 'podcast.mp3', fileType: 'audio', violations: 4, checks: 9, lastCheck: 1704835200000 }, // 10.01.2024
+		queryFn: () => {
-		{ id: 7, fileName: 'screenshot.png', fileType: 'image', violations: 0, checks: 3, lastCheck: 1704748800000 }, // 09.01.2024
+			return getUserFilesData();
-		{ id: 8, fileName: 'tutorial.mp4', fileType: 'video', violations: 2, checks: 6, lastCheck: 1704662400000 }, // 08.01.2024
+		}
-		{ id: 9, fileName: 'music.mp3', fileType: 'audio', violations: 1, checks: 4, lastCheck: 1704576000000 }, // 07.01.2024
+	});
-		{ id: 10, fileName: 'image2.jpg', fileType: 'image', violations: 5, checks: 11, lastCheck: 1704489600000 }, // 06.01.2024
+
-		{ id: 11, fileName: 'film.mov', fileType: 'video', violations: 0, checks: 2, lastCheck: 1704403200000 }, // 05.01.2024
+	const [tableData] = useState<FileItem[]>(
-		{ id: 12, fileName: 'sound.wav', fileType: 'audio', violations: 3, checks: 8, lastCheck: 1704316800000 }, // 04.01.2024
+		userFilesData.files.map((item: any) => {
-		{ id: 13, fileName: 'picture.png', fileType: 'image', violations: 2, checks: 7, lastCheck: 1704230400000 }, // 03.01.2024
+			//когда с бека будет приходить время в милисекундах можно будет удалить
-		{ id: 14, fileName: 'video2.mp4', fileType: 'video', violations: 1, checks: 5, lastCheck: 1704144000000 }, // 02.01.2024
+			const [datePart, timePart] = item.updatedAt.split(' ');
-		{ id: 15, fileName: 'audio2.mp3', fileType: 'audio', violations: 0, checks: 3, lastCheck: 1704057600000 }, // 01.01.2024
+			const [day, month, year] = datePart.split('-').map(Number);
-	]);
+			const [hours, minutes, seconds] = timePart.split(':').map(Number);
+			const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime();
+
+			return {
+				id: item.id,
+				fileName: item.originalFileName,
+				fileType: item.mimeType.toLocaleLowerCase(),
+				violations: item.violations,
+				checks: item.checks,
+				lastCheck: newDate
+			}
+		})
+	)
+
+	if (typeof window !== 'undefined') {
+	}
 
 	// Состояния
 	const [sorting, setSorting] = useState<SortingState>([]);
@@ -124,6 +149,41 @@ export default function TanstakFilesTable() {
 				),
 				enableColumnFilter: false,
 			},
+			{
+				accessorKey: 'status',
+				header: ({ column }) => (
+					<div className="flex items-center justify-center">
+						<span>
+							status
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="ml-2 p-1 hover:bg-gray-200 rounded"
+						>
+							{
+								column.getIsSorted() === 'asc' ?
+									<span>
+										<IconArrowUp />
+									</span>
+									: column.getIsSorted() === 'desc' ?
+										<span>
+											<IconArrowDown />
+										</span>
+										: <span>
+											<IconFilter />
+										</span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => {
+					return (
+						<div className={`text-center font-semibold`}>
+							status
+						</div>
+					)
+				},
+			},
 			{
 				accessorKey: 'violations',
 				header: ({ column }) => (
@@ -151,11 +211,20 @@ export default function TanstakFilesTable() {
 						</button>
 					</div>
 				),
-				cell: ({ row }) => (
+				cell: ({ row }) => {
-					<div className={`text-center font-semibold ${row.original.violations > 0 ? 'text-red-600' : 'text-green-600'}`}>
+					let classCollor = () => {
-						{row.original.violations}
+						let result = ''
-					</div>
+						if (row.original.violations !== undefined) {
-				),
+							result = row.original.violations > 0 ? 'text-red-600' : 'text-green-600'
+						}
+						return result;
+					}
+					return (
+						<div className={`text-center font-semibold ${classCollor()}`}>
+							{row.original.violations !== undefined ? row.original.violations : '-'}
+						</div>
+					)
+				},
 			},
 			{
 				accessorKey: 'checks',
@@ -186,7 +255,7 @@ export default function TanstakFilesTable() {
 				),
 				cell: ({ row }) => (
 					<div className="text-center">
-						{row.original.checks}
+						{row.original.checks !== undefined ? row.original.checks : '-'}
 					</div>
 				),
 			},
@@ -217,11 +286,21 @@ export default function TanstakFilesTable() {
 						</button>
 					</div>
 				),
-				cell: ({ row }) => (
+				cell: ({ row }) => {
-					<div className="text-center">
+					return (
-						{formatDate(row.original.lastCheck)}
+						<div className="text-center">
-					</div>
+							{row.original.lastCheck ? (
-				),
+								<>
+									{formatDate(row.original.lastCheck)}
+									<br />
+									{formatDateTime(row.original.lastCheck)}
+								</>
+							) : (
+								<div>-</div>
+							)}
+						</div>
+					)
+				},
 				enableColumnFilter: false,
 			},
 			{
@@ -253,6 +332,12 @@ export default function TanstakFilesTable() {
 						>
 							<IconShieldExclamation />
 						</button>
+						<button
+							onClick={() => handleRemove(row.original)}
+							className="px-3 py-1 bg-red-700 text-white rounded hover:bg-red-800 text-sm"
+						>
+							<IconDelete />
+						</button>
 					</div>
 				),
 				enableSorting: false,
@@ -275,9 +360,14 @@ export default function TanstakFilesTable() {
 		console.log(`Щиток: ${file.fileName}`);
 	};
 
+	const handleRemove = async (file: FileItem) => {
+		const response = await removeUserFile(file.id);
+		console.log(`Removed: ${response}`);
+	};
+
 	// Фильтрация по типу файла и дате
 	const filteredData = useMemo(() => {
-		let result = data;
+		let result = tableData;
 
 		// Фильтр по типу файла
 		if (typeFilter !== 'all') {
@@ -294,25 +384,43 @@ export default function TanstakFilesTable() {
 			switch (dateFilter) {
 				case 'today':
 					const todayStart = new Date().setHours(0, 0, 0, 0);
-					result = result.filter(item => item.lastCheck >= todayStart);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck >= todayStart
+						} else {
+							return 0
+						}
+					});
 					break;
 				case 'week':
 					const weekAgo = now - sevenDays;
-					result = result.filter(item => item.lastCheck >= weekAgo);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck >= weekAgo;
+						}
+					});
 					break;
 				case 'month':
 					const monthAgo = now - thirtyDays;
-					result = result.filter(item => item.lastCheck >= monthAgo);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck >= monthAgo;
+						}
+					});
 					break;
 				case 'older':
 					const monthAgo2 = now - thirtyDays;
-					result = result.filter(item => item.lastCheck < monthAgo2);
+					result = result.filter(item => {
+						if (item.lastCheck) {
+							return item.lastCheck < monthAgo2;
+						}
+					});
 					break;
 			}
 		}
 
 		return result;
-	}, [data, typeFilter, dateFilter]);
+	}, [tableData, typeFilter, dateFilter]);
 
 	// Создание таблицы
 	const table = useReactTable({

src/app/lib/prefetch-queries.ts

@@ -0,0 +1,16 @@
+import { QueryClient } from '@tanstack/react-query';
+import { getUserData } from '@/app/actions/action';
+import {getUserFilesData} from '@/app/actions/fileEntity';
+
+export async function prefetchLayoutQueries(queryClient: QueryClient) {
+	await Promise.all([
+		queryClient.prefetchQuery({
+			queryKey: ['userData'],
+			queryFn: () => getUserData()
+		}),
+		queryClient.prefetchQuery({
+			queryKey: ['userFilesData'],
+			queryFn: () => getUserFilesData()
+		}),
+	]);
+}

src/app/ui/icons/icons.tsx

@@ -117,6 +117,12 @@ export function IconFileOpen() {
 
 export function IconShieldExclamation() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.25 5c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75m-8.993 2.63a.75.75 0 0 1 1.486 0l.007.102v6.5l-.007.102a.75.75 0 0 1-1.486 0l-.007-.102v-6.5zM12 18a1 1 0 1 1 0-2a1 1 0 0 1 0 2"/></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M20.25 5c-2.663 0-5.258-.943-7.8-2.85a.75.75 0 0 0-.9 0C9.008 4.057 6.413 5 3.75 5a.75.75 0 0 0-.75.75V11c0 5.001 2.958 8.676 8.725 10.948a.75.75 0 0 0 .55 0C18.042 19.676 21 16 21 11V5.75a.75.75 0 0 0-.75-.75m-8.993 2.63a.75.75 0 0 1 1.486 0l.007.102v6.5l-.007.102a.75.75 0 0 1-1.486 0l-.007-.102v-6.5zM12 18a1 1 0 1 1 0-2a1 1 0 0 1 0 2" /></svg>
+	)
+}
+
+export function IconDelete() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z" /></svg>
 	)
 }