update tanstack-table

src/app/actions/fileEntity.ts

@@ -4,8 +4,25 @@ import { getSessionData } from '@/app/actions/session';
 import { API_BASE_URL } from '@/app/actions/definitions';
 
 
-export async function getUserFilesData(page: number, pageSize: number) {
+export async function getUserFilesData({
+	page,
+	pageSize,
+	sortBy,
+	sortOrder,
+	type,
+	date,
+	query = ''
+}: {
+	page: number;
+	pageSize: number;
+	sortBy?: string;
+	sortOrder?: 'asc' | 'desc' | string;
+	type?: string;
+	date?: string;
+	query?: string;
+}) {
 	const token = await getSessionData('token');
+	/* console.log('getUserFilesData', { page, pageSize, sortBy, sortOrder, type, date, query }); */
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
@@ -14,10 +31,15 @@ export async function getUserFilesData(page: number, pageSize: number) {
 				version: 1,
 				msg_id: 20005,
 				message_body: {
-					action: 'user_files',
+					action: 'search_files',
+					token: token,
 					page: page,
 					page_size: pageSize,
-					token: token
+					query: query,
+					sort_by: sortBy || '', // protectStatus, fileName, fileSize, createdAt, updatedAt, supportId
+					type: type || '', // image, video, document, audio
+					date: date || '', // today, week, month
+					sort_order: sortOrder
 				}
 			}),
 			headers: {
@@ -28,17 +50,19 @@ export async function getUserFilesData(page: number, pageSize: number) {
 
 		if (response.ok) {
 			let parsed = await response.json();
+			console.log(parsed);
 			if (parsed.message_code === 0) {
 				return parsed.message_body;
 			} else {
-				throw parsed;
+				throw new Error(parsed.message_text || 'API error');
 			}
 		} else {
-			throw (`${response.status}`);
+			throw new Error(`${response.status}`);
 		}
 
 	} catch (error) {
-		return error
+		console.error('getUserFilesData error:', error);
+		return error;
 	}
 }
 

src/app/components/tanstak-table/TanstakTable.tsx

@@ -10,8 +10,9 @@ import {
 	ColumnDef,
 	SortingState,
 	ColumnFiltersState,
+	PaginationState
 } from '@tanstack/react-table';
-import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconInfo } from '@/app/ui/icons/icons';
+import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/DropDownList';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -27,12 +28,8 @@ import { fetchReferralUserStats } from '@/app/actions/referralsActions';
 import { MonitoringDropDown } from '@/app/components/tanstak-table/MonitoringDropDown';
 import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 import { useViewport } from '@/app/hooks/useViewport';
-import { API_BASE_URL } from '@/app/actions/definitions';
-import { getSessionData } from '@/app/actions/session';
-
-import { downloadFile } from '@/app/actions/fileEntity'
-
-type FileType = 'image' | 'video' | 'audio';
+import { downloadFile } from '@/app/actions/fileEntity';
+import { useDebouncedCallback } from 'use-debounce';
 
 export type FileItem = {
 	id: string;
@@ -64,6 +61,9 @@ type ApiFile = {
 
 type ApiResponse = {
 	files?: ApiFile[];
+	total_count: number;
+	page: number;
+	page_size: number;
 };
 
 const cutFileExtension = (fileName: string) => {
@@ -73,37 +73,107 @@ const cutFileExtension = (fileName: string) => {
 }
 
 export default function TanstakFilesTable({ fileType }: { fileType: string }) {
+
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [dateFilter, setDateFilter] = useState<string>('month');
+	const [typeFilter, setTypeFilter] = useState<string>(fileType);
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const [query, setQuery] = useState<string>('');
+
+
+	const getSortParams = useMemo(() => {
+		if (sorting.length === 0) {
+			return { sortBy: '', sortOrder: undefined };
+		}
+
+		const sort = sorting[0];
+		const sortByMap: Record<string, string> = {
+			'id': 'supportId',
+			'fileName': 'fileName',
+			'size': 'fileSize',
+			'uploadDate': 'updatedAt',
+			'monitoring': 'monitoring'
+		};
+
+		return {
+			sortBy: sortByMap[sort.id] || sort.id,
+			sortOrder: sort.desc ? 'desc' : 'asc'
+		};
+	}, [sorting]);
+
+	// Преобразование фильтра типа
+	const getTypeParam = useMemo(() => {
+		return typeFilter !== 'all' ? typeFilter : '';
+	}, [typeFilter]);
+
+	// Преобразование фильтра даты
+	const getDateParam = useMemo(() => {
+		return dateFilter !== 'all' ? dateFilter : '';
+	}, [dateFilter]);
+
 	const {
-		data: tableData,
+		data: apiResponse,
 		isLoading,
 		isError,
 		error,
-	} = useQuery<ApiResponse, Error, FileItem[], ['userFilesData', number, number]>({
-		queryKey: ['userFilesData', 1, 10000],
-		queryFn: () => getUserFilesData(1, 10000),
+		refetch
+	} = useQuery({
+		queryKey: [
+			'userFilesData',
+			pagination.pageIndex,
+			pagination.pageSize,
+			getSortParams.sortBy,
+			getSortParams.sortOrder,
+			getTypeParam,
+			getDateParam,
+			query
+		],
+		queryFn: () => getUserFilesData({
+			page: pagination.pageIndex + 1,
+			pageSize: pagination.pageSize,
+			sortBy: getSortParams.sortBy,
+			sortOrder: getSortParams?.sortOrder,
+			type: getTypeParam,
+			date: getDateParam,
+			query: query
+		}),
+		select: (data: any): {
+			items: FileItem[];
+			total_count: number;
+			page: number;
+			pageSize: number;
+		} => {
+			if (!data?.files) {
+				return { items: [], total_count: 0, page: 1, pageSize: pagination.pageSize };
+			}
 
-		select: (data: ApiResponse): FileItem[] => {
-			if (!data?.files) return [];
+			const items = data.files.map((item: ApiFile) => ({
+				id: item.id,
+				fileName: item.originalFileName,
+				fileType: item.mimeType.toLowerCase(),
+				violations: item.violations,
+				size: item.fileSize,
+				uploadDate: new Date(item.updatedAt).getTime(),
+				status: item.status,
+				monitoring: item.monitoring,
+				protectStatus: item.protectStatus,
+				supportId: item.supportId,
+				_original: item
+			}));
 
-			return data.files.map((item: ApiFile) => {
-				const newDate = new Date(item.updatedAt).getTime();
-
-				return {
-					id: item.id,
-					fileName: item.originalFileName,
-					fileType: item.mimeType.toLocaleLowerCase(),
-					violations: item.violations,
-					size: item.fileSize,
-					uploadDate: newDate,
-					status: item.status,
-					monitoring: item.monitoring,
-					protectStatus: item.protectStatus,
-					supportId: item.supportId,
-					_original: item
-				};
-			});
+			return {
+				items,
+				total_count: data.total_count || data.files.length, // предполагаем, что сервер возвращает total
+				page: data.page || pagination.pageIndex + 1,
+				pageSize: data.page_size || pagination.pageSize
+			};
 		},
-		refetchInterval: 30000
+		refetchInterval: 30000,
+		placeholderData: (previousData) => previousData // для оптимистичных обновлений
 	});
 
 	const {
@@ -124,15 +194,12 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 
 	const queryClient = useQueryClient();
 
-	// Состояния
-	const [sorting, setSorting] = useState<SortingState>([]);
-	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-	const [dateFilter, setDateFilter] = useState<string>('all');
-	const [typeFilter, setTypeFilter] = useState<string>(fileType);
-	const [pagination, setPagination] = useState({
-		pageIndex: 0,
-		pageSize: 10,
-	});
+	// Данные для таблицы
+	const tableData = apiResponse?.items || [];
+	const totalItems = apiResponse?.total_count || 0;
+	const totalPages = Math.ceil(totalItems / pagination.pageSize);
+
+
 	const [openWindow, setOpenWindow] = useState<boolean>(false);
 	const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
 
@@ -256,48 +323,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				),
 				enableColumnFilter: false,
 			},
-			/* 			{
-							accessorKey: 'violations',
-							header: ({ column }) => (
-								<div className="column">
-									<span>
-										{t('violations')}
-									</span>
-									<button
-										onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-										className="sort-button"
-									>
-										{
-											column.getIsSorted() === 'asc' ?
-												<span>
-													<IconArrowUp />
-												</span>
-												: column.getIsSorted() === 'desc' ?
-													<span>
-														<IconArrowDown />
-													</span>
-													: <span>
-														<IconFilter />
-													</span>
-										}
-									</button>
-								</div>
-							),
-							cell: ({ row }) => {
-								let classCollor = () => {
-									let result = ''
-									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: 'size',
 				header: ({ column }) => (
@@ -420,12 +445,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						</div>
 					)
 				},
-				/* sortingFn: (rowA, rowB) => {
-					console.log(rowA.original.monitoring, rowB.original.monitoring)
-					const monitoringA = rowA.original.monitoring;
-					const monitoringB = rowA.original.monitoring;
-					return monitoringA - monitoringB;
-				}, */
 			},
 			{
 				id: 'actions',
@@ -439,22 +458,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				cell: ({ row }) => (
 					<div className="actions">
 						<div className="actions-group">
-							{/* 							<button
-								onClick={() => handleMonitoring(row.original)}
-								className="bg-violet-500 hover:bg-violet-600"
-								title={t('monitoring')}
-							>
-								<IconEye />
-							</button> */}
-							{/* <button
-								onClick={() => handleOpenWindowForRemove(row.original)}
-								className="table-action-delete"
-							>
-								<IconDelete />
-								<span>
-									{t('delete')}
-								</span>
-							</button> */}
 						</div>
 						<div className="actions-group">
 							{row.original.protectStatus === 'PROTECTED' && (
@@ -603,7 +606,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		}
 
 		return result;
-	}, [tableData, typeFilter, dateFilter]);
+	}, [query, typeFilter, dateFilter]);
 
 	useEffect(() => {
 		const currentPageRows = table.getRowModel().rows;
@@ -616,33 +619,53 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 
 	// Создание таблицы
 	const table = useReactTable({
-		data: filteredData,
+		data: tableData,
 		columns,
 		state: {
 			sorting,
-			columnFilters,
-			pagination
+			pagination,
 		},
-		autoResetPageIndex: false,
+		pageCount: totalPages,
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
 		onPaginationChange: setPagination,
-		onSortingChange: setSorting,
-		onColumnFiltersChange: setColumnFilters,
+		onSortingChange: (updater) => {
+			const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+			setSorting(newSorting);
+			setPagination(prev => ({ ...prev, pageIndex: 0 }));
+		},
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getPaginationRowModel: getPaginationRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		initialState: {
-			pagination: {
-				pageSize: 10,
-			},
-		},
 	});
 
+	const handleDateFilterChange = (newDateFilter: string) => {
+		setDateFilter(newDateFilter);
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	};
+
+	const handleTypeFilterChange = (newTypeFilter: string) => {
+		setTypeFilter(newTypeFilter);
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	};
+
+	const handleQueryChange = (newQuery: string) => {
+		setQuery(newQuery);
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	};
+
 	const pluralizeFiles = (number: number) => {
 		const translate = [t('file'), t('files-few'), t('files')];
 		return pluralize(number, translate[0], translate[1], translate[2], locale);
 	};
 
+	useEffect(() => {
+		if (tableData.length === 0 && pagination.pageIndex > 0 && totalPages > 0) {
+			setPagination(prev => ({ ...prev, pageIndex: Math.max(0, totalPages - 1) }));
+		}
+	}, [tableData, pagination.pageIndex, totalPages]);
+
 	return (
 		<div className="tanstak-table-wrapper">
 			<h3
@@ -674,34 +697,23 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							translatedValue={(() => {
 								switch (dateFilter) {
 									case 'all':
-										return t('all-dates')
+										return t('all-dates');
+									case 'today':
+										return t('today');
 									case 'week':
-										return t('for-a-week')
+										return t('for-a-week');
 									case 'month':
-										return t('for-a-month')
-									case 'older':
-										return t('older-than-a-month')
+										return t('for-a-month');
 									default:
-										return t('today')
+										return t('all-dates');
 								}
 							})()}
-							callBack={setDateFilter}
+							callBack={handleDateFilterChange}
 						>
-							<li value="all">
-								{t('all-dates')}
-							</li>
-							<li value="today">
-								{t('today')}
-							</li>
-							<li value="week">
-								{t('for-a-week')}
-							</li>
-							<li value="month">
-								{t('for-a-month')}
-							</li>
-							<li value="older">
-								{t('older-than-a-month')}
-							</li>
+							<li value="all">{t('all-dates')}</li>
+							<li value="today">{t('today')}</li>
+							<li value="week">{t('for-a-week')}</li>
+							<li value="month">{t('for-a-month')}</li>
 						</DropDownList>
 					</div>
 
@@ -710,57 +722,55 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 							<div className="table-filtres-label">{t('type-filter')}:</div>
 							<DropDownList
 								value={typeFilter}
-								translatedValue={
-									(() => {
-										switch (typeFilter) {
-											case 'image':
-												return t('images')
-											case 'video':
-												return t('videos')
-											case 'audio':
-												return t('audios')
-											case 'document':
-												return t('documents')
-											default:
-												return t('all-types')
-										}
-									})()
-								}
-								callBack={setTypeFilter}
+								translatedValue={(() => {
+									switch (typeFilter) {
+										case 'image':
+											return t('images');
+										case 'video':
+											return t('videos');
+										case 'audio':
+											return t('audios');
+										case 'document':
+											return t('documents');
+										default:
+											return t('all-types');
+									}
+								})()}
+								callBack={handleTypeFilterChange}
 							>
-								<li value="all">
-									{t('all-types')}
-								</li>
-								<li value="image">
-									{t('images-few')}
-								</li>
-								<li value="video">
-									{t('videos')}
-								</li>
-								<li value="audio">
-									{t('audios')}
-								</li>
+								<li value="all">{t('all-types')}</li>
+								<li value="image">{t('images-few')}</li>
+								<li value="video">{t('videos')}</li>
+								<li value="audio">{t('audios')}</li>
 								{!referralLink && (
-									<li value="document">
-										{t('documents')}
-									</li>
+									<li value="document">{t('documents')}</li>
 								)}
 							</DropDownList>
 						</div>
 					)}
+					<div className="table-filtres-item">
+						<div className="table-filtres-label">{t('search')}:</div>
+						<input
+							type="text"
+							className="table-filtres-text-filter"
+							value={query}
+							onChange={(e) => handleQueryChange(e.target.value)}
+							placeholder={t('search')}
+						/>
+					</div>
 				</div>
 
-				<div
-					className="table-filtres-wrapper"
-				>
+				<div className="table-filtres-wrapper">
 					<div className="table-filtres-item">
 						<div className="table-filtres-label">{t('items-per-page')}:</div>
 						<DropDownList
 							value={table.getState().pagination.pageSize}
-							//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
-							callBack={table.setPageSize}
+							callBack={(newSize: string) => {
+								table.setPageSize(Number(newSize));
+								setPagination(prev => ({ ...prev, pageIndex: 0 }));
+							}}
 						>
-							{[5, 10, 20, 50, 100].map(pageSize => (
+							{['5', '10', '20', '50', '100'].map(pageSize => (
 								<li key={pageSize} value={pageSize}>
 									{t('show')} {pageSize}
 								</li>
@@ -768,9 +778,14 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						</DropDownList>
 					</div>
 				</div>
-
 			</div>
 
+			{/* {isLoading && (
+				<div className="loading-indicator">
+					loading...
+				</div>
+			)} */}
+
 			{/* Таблица */}
 			<div className="tanstak-table-block">
 				<table className="tanstak-table">
@@ -821,53 +836,50 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					<span className="pagination-info-pages">
 						{t('page')}{' '}
 						<strong>
-							{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
+							{pagination.pageIndex + 1} {t('out-of')} {totalPages || 1}
 						</strong>
 					</span>
 					<span className="pagination-info-files">
-						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {pluralizeFiles(filteredData.length || 0)}
+						| {t('shown')} {tableData.length} {t('out-of')} {totalItems} {pluralizeFiles(totalItems)}
 					</span>
 				</div>
 
 				<div className="pagination-controls">
-					{table.getCanPreviousPage() && (
-						<button
-							className="arrow"
-							onClick={() => table.firstPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							<IconDoubleArrowLeft />
-						</button>
-					)}
-					{table.getCanPreviousPage() && (
-						<button
-							className="arrow"
-							onClick={() => table.previousPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							<IconArrowLeft />
-						</button>
-					)}
+					<button
+						className="arrow"
+						onClick={() => table.firstPage()}
+						disabled={!table.getCanPreviousPage() || isLoading}
+					>
+						<IconDoubleArrowLeft />
+					</button>
+					<button
+						className="arrow"
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage() || isLoading}
+					>
+						<IconArrowLeft />
+					</button>
 
 					<div className="pagination-controls-pages">
-						{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
-							const pageIndex = Math.max(
-								0,
-								Math.min(
-									table.getPageCount() - 5,
-									table.getState().pagination.pageIndex - 2
-								)
-							) + i;
+						{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+							let pageIndex;
+							if (totalPages <= 5) {
+								pageIndex = i;
+							} else if (pagination.pageIndex <= 2) {
+								pageIndex = i;
+							} else if (pagination.pageIndex >= totalPages - 3) {
+								pageIndex = totalPages - 5 + i;
+							} else {
+								pageIndex = pagination.pageIndex - 2 + i;
+							}
 
-							if (pageIndex < table.getPageCount()) {
+							if (pageIndex >= 0 && pageIndex < totalPages) {
 								return (
 									<button
 										key={pageIndex}
-										className={`${table.getState().pagination.pageIndex === pageIndex
-											? 'current'
-											: 'other'
-											}`}
+										className={pagination.pageIndex === pageIndex ? 'current' : 'other'}
 										onClick={() => table.setPageIndex(pageIndex)}
+										disabled={isLoading}
 									>
 										{pageIndex + 1}
 									</button>
@@ -877,24 +889,20 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						})}
 					</div>
 
-					{table.getCanNextPage() && (
-						<button
-							className="arrow"
-							onClick={() => table.nextPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							<IconArrowRight />
-						</button>
-					)}
-					{table.getCanNextPage() && (
-						<button
-							className="arrow"
-							onClick={() => table.lastPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							<IconDoubleArrowRight />
-						</button>
-					)}
+					<button
+						className="arrow"
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage() || isLoading}
+					>
+						<IconArrowRight />
+					</button>
+					<button
+						className="arrow"
+						onClick={() => table.lastPage()}
+						disabled={!table.getCanNextPage() || isLoading}
+					>
+						<IconDoubleArrowRight />
+					</button>
 				</div>
 			</div>
 		</div >

src/app/styles/pages-styles.scss

@@ -624,6 +624,29 @@
 				font-weight: 500;
 				margin-bottom: 0.25rem;
 			}
+
+
+			.table-filtres-text-filter {
+				background-color: #fff;
+				border: 2px solid #e2e8f0;
+				border-radius: 12px;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				padding: 8px 16px;
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 1.25;
+				transition: background-color .2s ease-in-out;
+				display: flex;
+				box-shadow: 0 1px 2px #0000000d;
+
+				&:focus {
+					outline-offset: 2px;
+					outline: 2px solid #0000;
+					box-shadow: 0 0 0 2px #6365f187;
+				}
+			}
 		}
 	}