From 40e6172c0b4d18d8848d2120b8ef45b4847bbe61 Mon Sep 17 00:00:00 2001 From: smanylov Date: Tue, 10 Feb 2026 15:40:18 +0700 Subject: [PATCH] add pagination for test --- src/app/actions/searchActions.ts | 39 ++++++++++- src/app/components/Pagination.tsx | 67 +++++++++++++++++++ src/app/ui/search/file-search-panel.tsx | 31 +++++++-- src/app/ui/search/search-stats.tsx | 4 -- .../ui/search/searched-global-files-list.tsx | 60 +++++++++-------- 5 files changed, 162 insertions(+), 39 deletions(-) create mode 100644 src/app/components/Pagination.tsx diff --git a/src/app/actions/searchActions.ts b/src/app/actions/searchActions.ts index e4689fc..a49ba2f 100644 --- a/src/app/actions/searchActions.ts +++ b/src/app/actions/searchActions.ts @@ -28,8 +28,43 @@ export async function searchUserFiles(fileId: string) { } } -export async function searchGlobalFiles(fileId: string) { +export async function searchGlobalFiles(fileId: string, currentPage: number) { const token = await getSessionData('token'); + console.log('searchGlobalFiles'); + console.log(currentPage); + +/* return { + images: [ + { + url: 'string1', + pageTitle: `string1 from page ${currentPage}`, + height: 100, + width: 100, + host: 'string1', + pageUrl: 'string1' + }, + { + url: 'string1', + pageTitle: `string2 from page ${currentPage}`, + height: 100, + width: 100, + host: 'string1', + pageUrl: 'string1' + }, + { + url: 'string1', + pageTitle: `string3 from page ${currentPage}`, + height: 100, + width: 100, + host: 'string1', + pageUrl: 'string1' + } + ], + page: 0, + pageSize: 0, + totalPages: 10, + totalResults: 100, + } */ try { const response = await fetch(`${API_BASE_URL}/api/v1/data`, { @@ -77,7 +112,7 @@ export async function getSearchStats() { } }); - + if (response.ok) { let parsed = await response.json(); diff --git a/src/app/components/Pagination.tsx b/src/app/components/Pagination.tsx new file mode 100644 index 0000000..85e85bd --- /dev/null +++ b/src/app/components/Pagination.tsx @@ -0,0 +1,67 @@ +'use client' + +export function Pagination({ totalPages, currentPage, fileId, callBack }: any) { + + const getVisiblePages = () => { + const pages = []; + const maxVisible = 7; + let start = Math.max(1, currentPage - 3); + let end = Math.min(totalPages, currentPage + 3); + + if (end - start + 1 < maxVisible) { + if (start === 1) { + end = Math.min(totalPages, start + maxVisible - 1); + } else if (end === totalPages) { + start = Math.max(1, end - maxVisible + 1); + } + } + + for (let i = start; i <= end; i++) { + pages.push(i); + } + + return pages; + }; + + const visiblePages = getVisiblePages(); + + return ( +
+
+ {/* Кнопка первой страницы */} + {visiblePages[0] > 1 && ( + <> + + {visiblePages[0] > 2 && ...} + + )} + + {/* Видимые страницы */} + {visiblePages.map(page => ( + + ))} + + {/* Кнопка последней страницы */} + {visiblePages[visiblePages.length - 1] < totalPages && ( + <> + {visiblePages[visiblePages.length - 1] < totalPages - 1 && ...} + + + )} +
+
+ ); +} \ No newline at end of file diff --git a/src/app/ui/search/file-search-panel.tsx b/src/app/ui/search/file-search-panel.tsx index 6230642..9c397ef 100644 --- a/src/app/ui/search/file-search-panel.tsx +++ b/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([]); const [searchedUserFilesShowNull, setSearchedUserFilesShowNull] = useState(false); - const [searchedGlobalFiles, setSearchedGlobalFiles] = useState([]); + const [searchedGlobalFiles, setSearchedGlobalFiles] = useState([]); const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState(false); const [loading, setLoading] = useState(false); const [showGlobalSearch, setShowGlobalSearch] = useState(false); const queryClient = useQueryClient(); + const [searchTotalPages, setSearchTotalPages] = useState(0); + const [searchCurrentPages, setSearchCurrentPages] = useState(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 => { + const handlerSearchUserFile = useCallback(async (fileId: string, page: number): Promise => { 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 => { + const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number): Promise => { 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 Ошибка глобального поиска: + + )} diff --git a/src/app/ui/search/search-stats.tsx b/src/app/ui/search/search-stats.tsx index 5bb8466..9055c11 100644 --- a/src/app/ui/search/search-stats.tsx +++ b/src/app/ui/search/search-stats.tsx @@ -17,10 +17,6 @@ export function SearchStats() { }, }); - useEffect(() => { - console.log(userSearchData); - }, [userSearchData]); - return (
diff --git a/src/app/ui/search/searched-global-files-list.tsx b/src/app/ui/search/searched-global-files-list.tsx index eeea81c..170c51a 100644 --- a/src/app/ui/search/searched-global-files-list.tsx +++ b/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 ( -
-
- {item.pageTitle} -
-
-
- {item.pageTitle} + {list.map( + ( + item: SearchItem, index: number + ) => { + return ( +
+
+ {item?.pageTitle}
-
-
- {item.height}x{item.width} +
+
+ {item?.pageTitle}
-
- {item.host} +
+
+ {item?.height}x{item?.width} +
+
+ {item?.host} +
+
+ {item?.pageTitle} +
+ + {item?.pageUrl} +
-
- {item.pageTitle} -
- - {item.pageUrl} -
-
- ) - })} + ) + })} ) } \ No newline at end of file