update search pagination

src/app/actions/searchActions.ts

@@ -33,38 +33,39 @@ export async function searchGlobalFiles(fileId: string, currentPage: number) {
 	console.log('searchGlobalFiles');
 	console.log(currentPage);
 
-/* 	return {
+	//удалить когда поиск будет нормально работать
-		images: [
+	/* 	return {
-			{
+			images: [
-				url: 'string1',
+				{
-				pageTitle: `string1 from page ${currentPage}`,
+					url: 'string1',
-				height: 100,
+					pageTitle: `string1 from page ${currentPage}`,
-				width: 100,
+					height: 100,
-				host: 'string1',
+					width: 100,
-				pageUrl: 'string1'
+					host: 'string1',
-			},
+					pageUrl: 'string1'
-			{
+				},
-				url: 'string1',
+				{
-				pageTitle: `string2 from page ${currentPage}`,
+					url: 'string1',
-				height: 100,
+					pageTitle: `string2 from page ${currentPage}`,
-				width: 100,
+					height: 100,
-				host: 'string1',
+					width: 100,
-				pageUrl: 'string1'
+					host: 'string1',
-			},
+					pageUrl: 'string1'
-			{
+				},
-				url: 'string1',
+				{
-				pageTitle: `string3 from page ${currentPage}`,
+					url: 'string1',
-				height: 100,
+					pageTitle: `string3 from page ${currentPage}`,
-				width: 100,
+					height: 100,
-				host: 'string1',
+					width: 100,
-				pageUrl: 'string1'
+					host: 'string1',
-			}
+					pageUrl: 'string1'
-		],
+				}
-		page: 0,
+			],
-		pageSize: 0,
+			page: 0,
-		totalPages: 10,
+			pageSize: 0,
-		totalResults: 100,
+			totalPages: 11,
-	} */
+			totalResults: 100,
+		} */
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {

src/app/components/Pagination.tsx

@@ -2,6 +2,10 @@
 
 export function Pagination({ totalPages, currentPage, fileId, callBack }: any) {
 
+	if (totalPages === 0) {
+		return null;
+	}
+
 	const getVisiblePages = () => {
 		const pages = [];
 		const maxVisible = 7;
@@ -26,42 +30,40 @@ export function Pagination({ totalPages, currentPage, fileId, callBack }: any) {
 	const visiblePages = getVisiblePages();
 
 	return (
-		<div>
+		<div className="pagination-wrapper">
-			<div style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
+			{visiblePages[0] > 1 && (
-				{/* Кнопка первой страницы */}
+				<>
-				{visiblePages[0] > 1 && (
-					<>
-						<button onClick={() => callBack(fileId, 1)}>1</button>
-						{visiblePages[0] > 2 && <span>...</span>}
-					</>
-				)}
-
-				{/* Видимые страницы */}
-				{visiblePages.map(page => (
 					<button
-						key={page}
+						className={`pagination-button`}
-						onClick={() => callBack(fileId, page)}
+						onClick={() => callBack(fileId, 1, true)}
-						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}
+						1
 					</button>
-				))}
+					{visiblePages[0] > 2 && <span>...</span>}
+				</>
+			)}
 
-				{/* Кнопка последней страницы */}
+			{visiblePages.map(page => (
-				{visiblePages[visiblePages.length - 1] < totalPages && (
+				<button
-					<>
+					key={page}
-						{visiblePages[visiblePages.length - 1] < totalPages - 1 && <span>...</span>}
+					onClick={() => callBack(fileId, page, true)}
-						<button onClick={() => callBack(fileId, totalPages)}>{totalPages}</button>
+					className={`pagination-button ${page === currentPage ? 'current-page' : ''}`}
-					</>
+				>
-				)}
+					{page}
-			</div>
+				</button>
+			))}
+
+			{visiblePages[visiblePages.length - 1] < totalPages && (
+				<>
+					{visiblePages[visiblePages.length - 1] < totalPages - 1 && <span>...</span>}
+					<button
+						className={`pagination-button`}
+						onClick={() => callBack(fileId, totalPages, true)}
+					>
+						{totalPages}
+					</button>
+				</>
+			)}
 		</div>
 	);
 }

src/app/components/TanstakTable.tsx

@@ -116,10 +116,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			if (!data?.files) return [];
 
 			return data.files.map((item: ApiFile) => {
-				const [datePart, timePart] = item.updatedAt.split(' ');
+				const newDate = new Date(item.updatedAt).getTime();
-				const [day, month, year] = datePart.split('-').map(Number);
-				const [hours, minutes, seconds] = timePart.split(':').map(Number);
-				const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime();
 
 				return {
 					id: item.id,

src/app/styles/pages-styles.scss

@@ -3839,11 +3839,35 @@
 	}
 }
 
+.pagination-wrapper {
+	display: flex;
+	gap: 5px;
+	margin-top: 10px;
+
+	.pagination-button {
+		border: 2px solid #e2e8f0;
+		padding: 0.25rem 0.75rem;
+		border-radius: 10px;
+		color: v.$p-color;
+		cursor: pointer;
+
+		&.current-page {
+			background-color: v.$p-color;
+			color: v.$white;
+		}
+
+		&:hover {
+			background-color: v.$bg-light;
+		}
+	}
+}
+
 .loading-animation {
 	display: block;
 	text-align: center;
 
 	.global-spinner {
+		display: block;
 		width: 24px;
 		height: 24px;
 		margin: 0 auto;

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

@@ -20,6 +20,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<SearchItem[]>([]);
 	const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
 	const [loading, setLoading] = useState<boolean>(false);
+	const [paginationLoading, setPaginationLoading] = useState<boolean>(false);
 	const [showGlobalSearch, setShowGlobalSearch] = useState<boolean>(false);
 	const queryClient = useQueryClient();
 
@@ -33,6 +34,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			setSearchedUserFilesShowNull(false);
 			setSearchedGlobalFilesShowNull(false);
 			setShowGlobalSearch(false);
+			setSearchCurrentPages(1);
+			setSearchTotalPages(0);
 		}
 	}));
 
@@ -55,11 +58,14 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 
 	}, [fileId])
 
-	const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number): Promise<void> => {
+	const handlerSearchGlobalFile = useCallback(async (fileId: string, page: number, actionFromPagination?: boolean): Promise<void> => {
-		setLoading(true);
+		if (!actionFromPagination) {
-		setSearchedGlobalFilesShowNull(false);
+			setLoading(true);
-		setSearchedGlobalFiles([]);
+			setSearchedGlobalFilesShowNull(false);
-
+			setSearchedGlobalFiles([]);
+		} else {
+			setPaginationLoading(true);
+		}
 
 		try {
 			let result = await searchGlobalFiles(fileId, page);
@@ -79,6 +85,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			await queryClient.invalidateQueries({ queryKey: ['userData'] });
 			await queryClient.invalidateQueries({ queryKey: ['userSearchData'] });
 			setLoading(false);
+			setPaginationLoading(false);
 		}
 
 	}, [fileId])
@@ -185,6 +192,11 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							<div className="global-result-card">
 								<div className="global-result-header">
 									<span>Найдено в интернете</span>
+									{paginationLoading && (
+										<div className="loading-animation">
+											<span className="global-spinner"></span>
+										</div>
+									)}
 								</div>
 								<div className="global-result-content">
 									<SearchedGlobalFilesList list={searchedGlobalFiles} />
@@ -205,7 +217,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							<span id="global-error-text"></span>
 						</div>
 
-						<Pagination totalPages={searchTotalPages} currentPage={searchCurrentPages} fileId={fileId} callBack={handlerSearchGlobalFile}/>
+						<Pagination totalPages={searchTotalPages} currentPage={searchCurrentPages} fileId={fileId} callBack={handlerSearchGlobalFile} />
 					</div>
 				</div>
 			)}