tanstake-table add remove, update function

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/actions/fileEntity.ts

@@ -9,7 +9,6 @@ const API_BASE_URL = process.env.NODE_ENV === 'development'
 
 export async function getUserFilesData() {
 	const token = await getSessionData('token');
-	console.log('fetch');
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
@@ -48,7 +47,6 @@ export async function getUserFilesData() {
 
 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`, {

src/app/components/modalWindow.tsx

@@ -1,14 +1,12 @@
 import React, { ReactNode } from 'react';
 
 interface ModalWindowtProps {
-	children: ReactNode;
+	children: ReactNode | null;
 	state: boolean;
 	callBack: (value: boolean) => void;
 }
 
 export default function ModalWindow({ children, state, callBack }: ModalWindowtProps) {
-	console.log(state);
-
 	return (
 		<>
 			{state && (
@@ -25,8 +23,7 @@ export default function ModalWindow({ children, state, callBack }: ModalWindowtP
 						{children}
 					</div>
 				</div>
-			)
+			)}
-			}
 		</>
 	)
 }

src/app/components/tanstakTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect, ReactNode } from 'react';
 import {
 	useReactTable,
 	getCoreRowModel,
@@ -16,6 +16,7 @@ import { useTranslations } from 'next-intl';
 import DropDownList from '@/app/components/dropDownList';
 import { useQuery } from '@tanstack/react-query';
 import { getUserFilesData, removeUserFile } from '@/app/actions/fileEntity';
+import ModalWindow from '@/app/components/modalWindow';
 
 // Типы данных
 type FileType = 'image' | 'video' | 'audio';
@@ -71,7 +72,8 @@ export default function TanstakFilesTable() {
 		data: userFilesData,
 		isLoading,
 		isError,
-		error
+		error,
+		refetch
 	} = useQuery({
 		queryKey: ['userFilesData'],
 		queryFn: () => {
@@ -79,9 +81,11 @@ export default function TanstakFilesTable() {
 		}
 	});
 
-	const [tableData] = useState<FileItem[]>(
+	const [tableData, setTableData] = useState<FileItem[]>([]);
-		userFilesData.files.map((item: any) => {
+
-			//когда с бека будет приходить время в милисекундах можно будет удалить
+	useEffect(() => {
+		if (userFilesData?.files) {
+			const formattedData = userFilesData.files.map((item: any) => {
 				const [datePart, timePart] = item.updatedAt.split(' ');
 				const [day, month, year] = datePart.split('-').map(Number);
 				const [hours, minutes, seconds] = timePart.split(':').map(Number);
@@ -94,11 +98,16 @@ export default function TanstakFilesTable() {
 					violations: item.violations,
 					checks: item.checks,
 					lastCheck: newDate
+				};
+			});
+
+			setTableData(formattedData);
 		}
-		})
+	}, [userFilesData]);
-	)
 
 	if (typeof window !== 'undefined') {
+		console.log('typeof window !== undefined');
+		console.log(userFilesData)
 	}
 
 	// Состояния
@@ -106,6 +115,12 @@ export default function TanstakFilesTable() {
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 	const [dateFilter, setDateFilter] = useState<string>('all');
 	const [typeFilter, setTypeFilter] = useState<string>('all');
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
 
 	const t = useTranslations("Global");
 
@@ -361,8 +376,42 @@ export default function TanstakFilesTable() {
 	};
 
 	const handleRemove = async (file: FileItem) => {
+
+		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={async () => {
 								const response = await removeUserFile(file.id);
-		console.log(`Removed: ${response}`);
+								if (response === file.id) {
+									setTableData(
+										prev => prev.filter(item => item.id !== file.id)
+									)
+									setOpenWindow(false);
+									setOpenWindowChildren(null);
+								}
+							}}
+						>
+							{t('yes')}
+						</button>
+						<button className="btn-primary btn-modal"
+							onClick={() => {
+								setOpenWindow(false);
+								setOpenWindowChildren(null);
+							}}
+						>
+							{t('no')}
+						</button>
+					</div>
+				</div>
+			)
+		})
+		setOpenWindow(true);
 	};
 
 	// Фильтрация по типу файла и дате
@@ -422,6 +471,15 @@ export default function TanstakFilesTable() {
 		return result;
 	}, [tableData, typeFilter, dateFilter]);
 
+	useEffect(() => {
+		const currentPageRows = table.getRowModel().rows;
+		const pageCount = table.getPageCount();
+
+		if (currentPageRows.length === 0 && pagination.pageIndex > 0 && pageCount > 0) {
+			table.setPageIndex(pagination.pageIndex - 1);
+		}
+	}, [filteredData, pagination.pageIndex]);
+
 	// Создание таблицы
 	const table = useReactTable({
 		data: filteredData,
@@ -429,7 +487,10 @@ export default function TanstakFilesTable() {
 		state: {
 			sorting,
 			columnFilters,
+			pagination
 		},
+		autoResetPageIndex: false,
+		onPaginationChange: setPagination,
 		onSortingChange: setSorting,
 		onColumnFiltersChange: setColumnFilters,
 		getCoreRowModel: getCoreRowModel(),
@@ -445,7 +506,23 @@ export default function TanstakFilesTable() {
 
 	return (
 		<div className="p-6 mx-auto tanstak-table">
+			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
 			{/* Фильтры */}
+			<button
+				className="mb-2 btn-primary rounded disabled:opacity-50 disabled:cursor-not-allowed"
+				onClick={() => refetch()}
+				disabled={isLoading}
+			>
+				{isLoading ? (
+					<span className="flex items-center gap-2">
+						refreshing...
+					</span>
+				) : (
+					<span className="flex items-center gap-2">
+						refresh
+					</span>
+				)}
+			</button>
 			<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 pt-0 px-0">
 				<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
 					<div className="flex flex-col w-50">

src/app/lib/prefetch-queries.ts

@@ -10,7 +10,8 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) {
 		}),
 		queryClient.prefetchQuery({
 			queryKey: ['userFilesData'],
-			queryFn: () => getUserFilesData()
+			queryFn: () => getUserFilesData(),
+			staleTime: 30 * 1000
 		}),
 	]);
 }

src/app/styles/global-styles.scss

@@ -151,6 +151,13 @@
 }
 
 .tanstak-table {
+	.btn-modal {
+		transition: all 0.3ms ease-in-out;
+		border-radius: 10px;
+		padding: 5px 20px;
+		font-weight: 500;
+	}
+
 	:where(.divide-gray-200 > tr:last-child) {
 		border-bottom: 1px solid var(--color-gray-200);
 	}

src/i18n/messages/en.json

@@ -144,7 +144,10 @@
 		"file-size": "File size",
 		"file-format": "File format",
 		"mb": "MB",
-		"to": "to"
+		"to": "to",
+		"yes": "yes",
+		"no": "no",
+		"you-sure-you-want-to-delete": "Are you sure you want to delete?"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -144,7 +144,10 @@
 		"file-size": "Размер файла",
 		"file-format": "Формат файла",
 		"mb": "МБ",
-		"to": "до"
+		"to": "до",
+		"yes": "да",
+		"no": "нет",
+		"you-sure-you-want-to-delete": "Уверены, что хотите удалить?"
 	},
 	"Login-register-form": {
 		"and": "и",