add pagination for test

src/app/ui/search/file-search-panel.tsx

@@ -3,16 +3,29 @@ import { SearchedGlobalFilesList } from '@/app/ui/search/searched-global-files-l
 import { useCallback, useState, useImperativeHandle } from 'react';
 import { searchUserFiles, searchGlobalFiles } from '@/app/actions/searchActions';
 import { useQueryClient } from '@tanstack/react-query';
+import { Pagination } from '@/app/components/Pagination';
+
+export interface SearchItem {
+	url: string,
+	pageTitle: string,
+	height: number,
+	width: number,
+	host: string,
+	pageUrl: string
+}
 
 export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: any }) {
 	const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
 	const [searchedUserFilesShowNull, setSearchedUserFilesShowNull] = useState<boolean>(false);
-	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
+	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<SearchItem[]>([]);
 	const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
 	const [loading, setLoading] = useState<boolean>(false);
 	const [showGlobalSearch, setShowGlobalSearch] = useState<boolean>(false);
 	const queryClient = useQueryClient();
 
+	const [searchTotalPages, setSearchTotalPages] = useState<number>(0);
+	const [searchCurrentPages, setSearchCurrentPages] = useState<number>(1);
+
 	useImperativeHandle(ref, () => ({
 		clearList: () => {
 			setSearchedUserFiles([]);
@@ -24,7 +37,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 	}));
 
 
-	const handlerSearchUserFile = useCallback(async (fileId: string): Promise<void> => {
+	const handlerSearchUserFile = useCallback(async (fileId: string, page: number): Promise<void> => {
 
 		try {
 			let result = await searchUserFiles(fileId);
@@ -38,21 +51,25 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 
 		}
 		setShowGlobalSearch(true);
-		handlerSearchGlobalFile(fileId)
+		handlerSearchGlobalFile(fileId, page)
 
 	}, [fileId])
 
-	const handlerSearchGlobalFile = useCallback(async (fileId: string): Promise<void> => {
+	const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number): Promise<void> => {
 		setLoading(true);
 		setSearchedGlobalFilesShowNull(false);
 		setSearchedGlobalFiles([]);
 
 
 		try {
-			let result = await searchGlobalFiles(fileId);
+			let result = await searchGlobalFiles(fileId, page);
+			console.log('searchGlobalFiles');
 			console.log(result);
 			if (result.images.length) {
 				setSearchedGlobalFiles(result.images);
+				setSearchTotalPages(result.totalPages);
+				setSearchCurrentPages(page);
+
 			} else {
 				setSearchedGlobalFilesShowNull(true);
 			}
@@ -76,7 +93,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 					disabled={fileId ? false : true}
 					onClick={() => {
 						if (fileId) {
-							handlerSearchUserFile(fileId)
+							handlerSearchUserFile(fileId, 1)
 						}
 					}}
 				>
@@ -187,6 +204,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							<strong>Ошибка глобального поиска:</strong>
 							<span id="global-error-text"></span>
 						</div>
+
+						<Pagination totalPages={searchTotalPages} currentPage={searchCurrentPages} fileId={fileId} callBack={handlerSearchGlobalFile}/>
 					</div>
 				</div>
 			)}

src/app/ui/search/search-stats.tsx

@@ -17,10 +17,6 @@ export function SearchStats() {
 		},
 	});
 
-	useEffect(() => {
-		console.log(userSearchData);
-	}, [userSearchData]);
-
 	return (
 		<div className="stats-search">
 			<div className="stats-title">

src/app/ui/search/searched-global-files-list.tsx

@@ -1,37 +1,43 @@
-export function SearchedGlobalFilesList({ list }: { list: any }) {
+import { SearchItem } from './file-search-panel'
+
+export function SearchedGlobalFilesList({ list }: { list: SearchItem[] }) {
+
 	return (
 		<>
-			{list.map((item: any, index: number) => {
-				return (
-					<div
-						className="global-result-item"
-						key={index}
-					>
-						<div className="global-result-image">
-							<img src={item.url} alt={item.pageTitle} />
-						</div>
-						<div className="global-result-info">
-							<div className="global-result-title">
-								{item.pageTitle}
+			{list.map(
+				(
+					item: SearchItem, index: number
+				) => {
+					return (
+						<div
+							className="global-result-item"
+							key={index}
+						>
+							<div className="global-result-image">
+								<img src={item?.url} alt={item?.pageTitle} />
 							</div>
-							<div className="global-result-meta">
-								<div className="global-result-size">
-									{item.height}x{item.width}
+							<div className="global-result-info">
+								<div className="global-result-title">
+									{item?.pageTitle}
 								</div>
-								<div className="global-result-host">
-									{item.host}
+								<div className="global-result-meta">
+									<div className="global-result-size">
+										{item?.height}x{item?.width}
+									</div>
+									<div className="global-result-host">
+										{item?.host}
+									</div>
 								</div>
+								<div className="global-result-passage">
+									{item?.pageTitle}
+								</div>
+								<a href={item?.pageUrl} target="_blank" className="global-result-url" title={item?.pageUrl}>
+									{item?.pageUrl}
+								</a>
 							</div>
-							<div className="global-result-passage">
-								{item.pageTitle}
-							</div>
-							<a href={item.pageUrl} target="_blank" className="global-result-url" title={item.pageUrl}>
-								{item.pageUrl}
-							</a>
 						</div>
-					</div>
-				)
-			})}
+					)
+				})}
 		</>
 	)
 }