1

frontend/src/Pages/picpagination.tsx

-import React from "react";
+import React, { useRef } from "react";
 
 type num = {
     total: number,
     page: number,
-    setPage : Function
+    setPage: Function
 }
 
-export function PaginationLeft ({total, page,setPage} : num) {
+export function Pagination({ total, page, setPage }: num) {
     const numPages = Math.ceil(total / 15);
+    const firstLeftClick = useRef(true);
+    const firstRightClick = useRef(true);
 
-    const left =()=>{
+    const left = () => {
+        if (firstLeftClick.current) {
+            firstLeftClick.current = false;
+            firstRightClick.current = true;
+        } else {
             setPage(page - 1)
+        }
+    };
+
+    const right = () => {
+        if (firstRightClick.current) {
+            firstLeftClick.current = true;
+            firstRightClick.current = false;
+        } else {
+            setPage(page + 1)
+        }
     };
 
     return (
@@ -25,21 +41,34 @@ export function PaginationLeft ({total, page,setPage} : num) {
                         {i + 1}
                     </button>
                 ))} */}
-        </div>
-    );
-};
-export function PaginationRight ({total, page,setPage} : num) {
-    const numPages = Math.ceil(total / 15);
-
-    const right =()=>{
-        setPage(page + 1)
-    };
 
-    return (
-        <div>
             <button onClick={right} disabled={page === numPages}>
                 &gt;
             </button>
+
         </div>
     );
 };
+// export function PaginationRight({ total, page, setPage }: num) {
+//     const numPages = Math.ceil(total / 15);
+//     const firstLeftClick = useRef(true);
+//     const firstRightClick = useRef(true);
+
+
+//     const right = () => {
+//         if (firstRightClick.current) {
+//             firstLeftClick.current = true;
+//             firstRightClick.current = false;
+//         } else {
+//             setPage(page + 1)
+//         }
+//     };
+
+//     return (
+//         <div>
+//             <button onClick={right} disabled={page === numPages}>
+//                 &gt;
+//             </button>
+//         </div>
+//     );
+// };

frontend/src/home/body.tsx

@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "../Pages/citylist";
 import { getPicure } from "../Pages/pic";
-import { PaginationLeft, PaginationRight } from "../Pages/picpagination";
+import { Pagination} from "../Pages/picpagination";
 
 const initSearchParams = { theme: "", city: "" };
 
@@ -14,7 +14,6 @@ export default function Body() {
   const offset1 = (page - 1) * limit;
   const offset2 = page * limit;
   const offset3 = (page + 1) * limit;
-  const renderRef = useRef() as React.MutableRefObject<HTMLDivElement>
   let getPics = getPicure();
 
   useEffect(() => {
@@ -22,11 +21,6 @@ export default function Body() {
     setSearchParams(searchParams)
   }, []);
 
-  useEffect(() => {
-    renderRef.current.style.transition = "all 0.5s ease-in-out"
-    renderRef.current.style.transform = `translateX(-${page - 1}00%)`
-  }, [page]);
-
   const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
     console.log(`theme id= ${event.currentTarget.id}`);
     setSearchParams({
@@ -55,14 +49,6 @@ export default function Body() {
     );
   });
 
-  // const pre = () => {
-  //   setSelected(selected - 1)
-  // };
-
-  // const next = () => {
-  //   setSelected(selected + 1)
-  // };
-
   return (
     <div className="flex flex-col px-1 py-1">
       <Theme handleClick={themeHandleClick} />
@@ -71,10 +57,8 @@ export default function Body() {
           <Citylist handleClick={cityHandleClick} />
         </div>
         <div className="flex flex-col  overflow-hidden">
-          <PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
-          <PaginationRight total={Idpics.length} page={page} setPage={setPage} />
-          <div className=" md:mr-10 md:basis-4/5  flex flex-row relative w-full " ref={renderRef}>
-            {/* <div className=" md:mr-10 md:basis-4/5  flex flex-row  transition duration-500 relative w-full " style={{"transform" : "translate(-"+(page-1)*100+"%)"}}>   */}
+          <Pagination total={Idpics.length} page={page} setPage={setPage} />
+          <div className=" md:mr-10 md:basis-4/5  flex flex-row  transition duration-500 relative w-full " style={{"transform" : "translate(-"+(page-1)*100+"%)"}}>  
             <div className="min-w-full">
               <div className="inline-grid grid-cols-5">
                 {Idpics.slice(offset1, offset1 + limit).map((pic, index: number) => (