frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add pagination for test

Browse Source
This commit is contained in:
smanylov
2026-02-10 15:40:18 +07:00
parent 0898ea9aa0
commit 40e6172c0b
5 changed files with 162 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/actions/searchActions.ts
+37 -2
View File
@@ -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();
src/app/components/Pagination.tsx
+67
View File
@@ -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 (
<div>
<div style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
{/* Кнопка первой страницы */}
{visiblePages[0] > 1 && (
<>
<button onClick={() => callBack(fileId, 1)}>1</button>
{visiblePages[0] > 2 && <span>...</span>}
</>
)}
{/* Видимые страницы */}
{visiblePages.map(page => (
<button
key={page}
onClick={() => callBack(fileId, page)}
style={{
padding: '5px 10px',
border: '1px solid #ddd',
background: currentPage === page ? '#007bff' : 'white',
color: currentPage === page ? 'white' : 'black',
cursor: 'pointer',
fontWeight: currentPage === page ? 'bold' : 'normal'
}}
>
{page}
</button>
))}
{/* Кнопка последней страницы */}
{visiblePages[visiblePages.length - 1] < totalPages && (
<>
{visiblePages[visiblePages.length - 1] < totalPages - 1 && <span>...</span>}
<button onClick={() => callBack(fileId, totalPages)}>{totalPages}</button>
</>
)}
</div>
</div>
);
}
src/app/ui/search/file-search-panel.tsx
+25 -6
View File
@@ -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
-4
View File
@@ -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
+33 -27
View File
@@ -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>
)
})}
)
})}
</>
)
}