add monitoring action button for tanstak-table

src/app/components/TanstakTable.tsx

@@ -11,7 +11,7 @@ import {
 	SortingState,
 	ColumnFiltersState,
 } from '@tanstack/react-table';
-import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation } from '@/app/ui/icons/icons';
+import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconInfo } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/DropDownList';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -21,6 +21,7 @@ import { toast } from 'sonner';
 import { pluralize } from '@/app/lib/pluralize';
 import { convertBytes } from '@/app/lib/convertBytes';
 import { FileInfoModalWindow } from '@/app/ui/modal-windows/file-info-modal-window';
+import { FileMonitoringModalWindow } from '@/app/ui/modal-windows/file-monitoring-modal-window';
 import { FileTypeIcon } from '@/app/components/FileTypeIcon';
 
 type FileType = 'image' | 'video' | 'audio';
@@ -404,12 +405,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				},
 				cell: ({ row }) => (
 					<div className="actions">
-						<div className="actions-group" style={{ display: "none" }}>
+						<div className="actions-group">
 							<button
-								onClick={() => handleProtect(row.original)}
+								onClick={() => handleMonitoring(row.original)}
 								className="bg-violet-500 hover:bg-violet-600"
+								title={t('monitoring')}
 							>
-								<IconShieldExclamation />
+								<IconEye />
 							</button>
 							{/* <button
 								onClick={() => handleOpenWindowForRemove(row.original)}
@@ -427,11 +429,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 									onClick={() => handleDownload(row.original)}
 									disabled={isFileLoading}
 									className="table-action-download"
+									title={t('download')}
 								>
 									<IconFileDownload />
-									<span>
-										{t('download')}
-									</span>
 								</button>
 							)}
 							<button
@@ -439,11 +439,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 									handleView(row.original)
 								}}
 								className="table-action-view"
+								title={t('make-check')}
 							>
-								<IconEye />
-								<span>
-									{t('make-check')}
-								</span>
+								<IconInfo />
 							</button>
 						</div>
 
@@ -461,7 +459,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		console.log(file);
 
 		const fileInfo = await viewFileInfo(file.id);
-		console.log(fileInfo);
 
 		setOpenWindowChildren(() => {
 			return (
@@ -498,85 +495,19 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		}
 	};
 
-	const handleProtect = (file: FileItem) => {
-		console.log(`Щиток: ${file.fileName}`);
-	};
+	const handleMonitoring = async (file: FileItem) => {
+		console.log(`Мониторинг:`, file);
 
-	const handleOpenWindowForRemove = async (file: FileItem) => {
+		const fileInfo = await viewFileInfo(file.id);
 
 		setOpenWindowChildren(() => {
 			return (
-				<div>
-					<h3 className="text-2xl">
-						{t('you-sure-you-want-to-delete')}
-					</h3>
-					<div className="mt-2 mb-8 text-center">{file.fileName}</div>
-					<div className="flex justify-center gap-4">
-						<button className="btn-primary btn-modal"
-							onClick={() => {
-								deleteMutation.mutate({
-									fileId: file.id,
-									removeParam: 1,
-								})
-							}}
-							disabled={deleteMutation.isPending}
-						>
-							{deleteMutation.isPending ? '...' : t('yes')}
-						</button>
-						<button className="btn-primary btn-modal"
-							onClick={() => {
-								setOpenWindow(false);
-								setOpenWindowChildren(null);
-							}}
-						>
-							{t('no')}
-						</button>
-					</div>
-				</div>
+				<FileMonitoringModalWindow file={fileInfo} setWindowClose={setOpenWindow} setWindowChildren={setOpenWindowChildren} />
 			)
 		})
 		setOpenWindow(true);
 	};
 
-	const deleteMutation = useMutation({
-		mutationFn: ({ fileId, removeParam }: { fileId: string; removeParam: number }) =>
-			removeUserFile(fileId, removeParam),
-
-		onMutate: async ({ fileId, removeParam }: { fileId: string; removeParam: number }) => {
-			await queryClient.cancelQueries({ queryKey: ['userFilesData'] });
-
-			queryClient.setQueryData<ApiResponse>(['userFilesData'], (old) => {
-				if (!old?.files) return old;
-				return {
-					...old,
-					files: old.files.filter(file => file.id !== fileId)
-				};
-			});
-		},
-
-		onError: () => {
-			queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
-			toast.error(t('error'));
-		},
-
-		onSuccess: (response, { fileId }) => {
-			if (response === fileId) {
-				queryClient.invalidateQueries({
-					queryKey: ['userFilesData'],
-					refetchType: 'active'
-				});
-
-				queryClient.invalidateQueries({
-					queryKey: ['userFilesInfo']
-				});
-
-				setOpenWindow(false);
-				setOpenWindowChildren(null);
-				toast.success(t('file-has-been-deleted'));
-			}
-		},
-	});
-
 	// Фильтрация по типу файла и дате
 	const filteredData = useMemo(() => {
 		let result = tableData;
@@ -693,7 +624,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					}
 				})()}
 			</h3>
-			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
+			<ModalWindow state={openWindow} callBack={setOpenWindow}>
+				{openWindowChildren}
+			</ModalWindow>
 			{/* Фильтры */}
 			<div className="tanstak-table-filtres">
 				<div className="table-filtres-wrapper">