update search pagination

src/app/actions/searchActions.ts

@@ -33,6 +33,7 @@ export async function searchGlobalFiles(fileId: string, currentPage: number) {
 	console.log('searchGlobalFiles');
 	console.log(currentPage);
 
+	//удалить когда поиск будет нормально работать
 	/* 	return {
 			images: [
 				{
@@ -62,7 +63,7 @@ export async function searchGlobalFiles(fileId: string, currentPage: number) {
 			],
 			page: 0,
 			pageSize: 0,
-		totalPages: 10,
+			totalPages: 11,
 			totalResults: 100,
 		} */
 

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 style={{ display: 'flex', gap: '5px', marginTop: '10px' }}>
-				{/* Кнопка первой страницы */}
+		<div className="pagination-wrapper">
 			{visiblePages[0] > 1 && (
 				<>
-						<button onClick={() => callBack(fileId, 1)}>1</button>
+					<button
+						className={`pagination-button`}
+						onClick={() => callBack(fileId, 1, true)}
+					>
+						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'
-						}}
+					onClick={() => callBack(fileId, page, true)}
+					className={`pagination-button ${page === currentPage ? 'current-page' : ''}`}
 				>
 					{page}
 				</button>
 			))}
 
-				{/* Кнопка последней страницы */}
 			{visiblePages[visiblePages.length - 1] < totalPages && (
 				<>
 					{visiblePages[visiblePages.length - 1] < totalPages - 1 && <span>...</span>}
-						<button onClick={() => callBack(fileId, totalPages)}>{totalPages}</button>
+					<button
+						className={`pagination-button`}
+						onClick={() => callBack(fileId, totalPages, true)}
+					>
+						{totalPages}
+					</button>
 				</>
 			)}
 		</div>
-		</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 [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();
+				const newDate = new Date(item.updatedAt).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> => {
+		if (!actionFromPagination) {
 			setLoading(true);
 			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} />