add debounce for tanstak table

src/app/actions/fileEntity.ts

@@ -50,7 +50,9 @@ export async function getUserFilesData({
 
 		if (response.ok) {
 			let parsed = await response.json();
-			console.log(parsed);
+
+			/* console.log(parsed); */
+
 			if (parsed.message_code === 0) {
 				return parsed.message_body;
 			} else {

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo, useEffect, ReactNode } from 'react';
+import { useState, useMemo, useEffect, ReactNode, useCallback } from 'react';
 import {
 	useReactTable,
 	getCoreRowModel,
@@ -22,7 +22,6 @@ 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';
 import { fetchReferralUserStats } from '@/app/actions/referralsActions';
 import { MonitoringDropDown } from '@/app/components/tanstak-table/MonitoringDropDown';
@@ -75,7 +74,6 @@ 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({
@@ -83,7 +81,29 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		pageSize: 10,
 	});
 	const [query, setQuery] = useState<string>('');
+	const [searchInputValue, setSearchInputValue] = useState<string>('');
+	const [searchQuery, setSearchQuery] = useState<string>('');
 
+	const debouncedSetSearchQuery = useDebouncedCallback(
+		(value: string) => {
+			setSearchQuery(value);
+			setPagination(prev => ({ ...prev, pageIndex: 0 }));
+		},
+		500
+	);
+
+	const handleSearchInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		const value = e.target.value;
+		setSearchInputValue(value);
+		debouncedSetSearchQuery(value);
+	}, [debouncedSetSearchQuery]);
+
+	const handleClearSearch = useCallback(() => {
+		setSearchInputValue('');
+		setSearchQuery('');
+		debouncedSetSearchQuery.cancel();
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	}, [debouncedSetSearchQuery]);
 
 	const getSortParams = useMemo(() => {
 		if (sorting.length === 0) {
@@ -130,7 +150,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			getSortParams.sortOrder,
 			getTypeParam,
 			getDateParam,
-			query
+			searchQuery
 		],
 		queryFn: () => getUserFilesData({
 			page: pagination.pageIndex + 1,
@@ -139,7 +159,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			sortOrder: getSortParams?.sortOrder,
 			type: getTypeParam,
 			date: getDateParam,
-			query: query
+			query: searchQuery
 		}),
 		select: (data: any): {
 			items: FileItem[];
@@ -535,19 +555,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		}
 	}
 
-	const handleMonitoring = async (file: FileItem) => {
-		console.log(`Мониторинг:`, file);
-
-		const fileInfo = await viewFileInfo(file.id);
-
-		setOpenWindowChildren(() => {
-			return (
-				<FileMonitoringModalWindow file={fileInfo} setWindowClose={setOpenWindow} setWindowChildren={setOpenWindowChildren} />
-			)
-		})
-		setOpenWindow(true);
-	};
-
 	// Фильтрация по типу файла и дате
 	const filteredData = useMemo(() => {
 		let result = tableData;
@@ -650,11 +657,6 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 		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);
@@ -753,8 +755,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						<input
 							type="text"
 							className="table-filtres-text-filter"
-							value={query}
+							value={searchInputValue}
-							onChange={(e) => handleQueryChange(e.target.value)}
+							onChange={handleSearchInputChange}
 							placeholder={t('search')}
 						/>
 					</div>