fix: preserve newest scripts pagination (#10882)

frontend/src/app/scripts/_components/script-info-blocks.tsx

@@ -1,5 +1,5 @@
 import { CalendarPlus } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -26,9 +26,15 @@ export function getDisplayValueFromType(type: string) {
   }
 }
 
-export function LatestScripts({ items }: { items: Category[] }) {
-  const [page, setPage] = useState(1);
-
+export function LatestScripts({
+  items,
+  page,
+  onPageChange,
+}: {
+  items: Category[];
+  page: number;
+  onPageChange: (page: number) => void;
+}) {
   const latestScripts = useMemo(() => {
     if (!items)
       return [];
@@ -48,12 +54,20 @@ export function LatestScripts({ items }: { items: Category[] }) {
     );
   }, [items]);
 
+  const totalPages = Math.max(1, Math.ceil(latestScripts.length / ITEMS_PER_PAGE));
+
+  useEffect(() => {
+    if (page > totalPages) {
+      onPageChange(totalPages);
+    }
+  }, [page, totalPages, onPageChange]);
+
   const goToNextPage = () => {
-    setPage(prevPage => prevPage + 1);
+    onPageChange(Math.min(totalPages, page + 1));
   };
 
   const goToPreviousPage = () => {
-    setPage(prevPage => prevPage - 1);
+    onPageChange(Math.max(1, page - 1));
   };
 
   const startIndex = (page - 1) * ITEMS_PER_PAGE;

frontend/src/app/scripts/page.tsx

@@ -18,6 +18,7 @@ function ScriptContent() {
   const [selectedCategory, setSelectedCategory] = useQueryState("category");
   const [links, setLinks] = useState<Category[]>([]);
   const [item, setItem] = useState<Script>();
+  const [latestPage, setLatestPage] = useState(1);
 
   useEffect(() => {
     if (selectedScript && links.length > 0) {
@@ -50,14 +51,16 @@ function ScriptContent() {
           />
         </div>
         <div className="px-4 w-full sm:max-w-[calc(100%-350px-16px)]">
-          {selectedScript && item ? (
-            <ScriptItem item={item} setSelectedScript={setSelectedScript} />
-          ) : (
-            <div className="flex w-full flex-col gap-5">
-              <LatestScripts items={links} />
-              <MostViewedScripts items={links} />
-            </div>
-          )}
+          {selectedScript && item
+            ? (
+                <ScriptItem item={item} setSelectedScript={setSelectedScript} />
+              )
+            : (
+                <div className="flex w-full flex-col gap-5">
+                  <LatestScripts items={links} page={latestPage} onPageChange={setLatestPage} />
+                  <MostViewedScripts items={links} />
+                </div>
+              )}
         </div>
       </div>
     </div>