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>
 			)}