feat: page turning in current season

src/app/tools/ratings/components/PageTurner.tsx

@@ -5,10 +5,10 @@ import { useEffect, useRef } from 'react';
 interface PageTurnerProps {
   page: number;
   pages: number;
-  setPage: (page: number | ((page: number) => number)) => void;
+  onPageChange: (page: number) => void;
 }
 
-export function PageTurner({ page, setPage, pages }: PageTurnerProps) {
+export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
   const pageInput = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -20,7 +20,7 @@ export function PageTurner({ page, setPage, pages }: PageTurnerProps) {
       <Flex gap="2">
         <Button
           variant="soft"
-          onClick={() => setPage((page) => Math.max(page - 1, 0))}
+          onClick={() => onPageChange(Math.max(page - 1, 0))}
           disabled={page === 0}
         >
           <CaretLeftIcon />
@@ -32,7 +32,7 @@ export function PageTurner({ page, setPage, pages }: PageTurnerProps) {
             ref={pageInput}
             style={{ width: 64, textAlign: 'center' }}
             onBlur={(event) => {
-              setPage(
+              onPageChange(
                 Math.max(
                   0,
                   Math.min(pages - 1, event.target.valueAsNumber - 1),
@@ -50,7 +50,7 @@ export function PageTurner({ page, setPage, pages }: PageTurnerProps) {
         <Button
           variant="soft"
           onClick={() => {
-            setPage((page) => Math.min(page + 1, pages - 1));
+            onPageChange(Math.min(page + 1, pages - 1));
           }}
           disabled={page === pages - 1}
         >

src/app/tools/ratings/page.tsx

@@ -290,13 +290,12 @@ export default function Page() {
     return neighbors;
   }
 
-  async function handleJumpToPosition() {
+  async function jumpToPosition(position: number) {
     if (!ratingsInfo || ratingsInfo?.detail) return;
 
-    const rawPosition = positionInput.current!.valueAsNumber - 1;
     const targetPosition = Math.max(
       0,
-      Math.min(rawPosition, ratingsInfo.count - 1),
+      Math.min(position, ratingsInfo.count - 1),
     );
 
     if (season === 0) {
@@ -557,7 +556,7 @@ export default function Page() {
                   placeholder="Type a position..."
                   onKeyDown={(event) => {
                     if (event.key === 'Enter') {
-                      handleJumpToPosition();
+                      jumpToPosition(positionInput.current!.valueAsNumber - 1);
                       setJumpToPositionOpen(false);
                     }
                   }}
@@ -568,7 +567,13 @@ export default function Page() {
                     <Button color="red">Cancel</Button>
                   </Dialog.Close>
                   <Dialog.Close>
-                    <Button onClick={handleJumpToPosition}>Jump</Button>
+                    <Button
+                      onClick={() =>
+                        jumpToPosition(positionInput.current!.valueAsNumber - 1)
+                      }
+                    >
+                      Jump
+                    </Button>
                   </Dialog.Close>
                 </Flex>
               </Flex>
@@ -854,7 +859,11 @@ export default function Page() {
         </Flex>
       </Flex>
 
-      <PageTurner page={page} pages={pages} setPage={setPage} />
+      <PageTurner
+        page={page}
+        pages={pages}
+        onPageChange={(page) => jumpToPosition(page * ROWS_PER_PAGE)}
+      />
 
       <Leaderboard.Root>
         {players === null ? (
@@ -893,7 +902,11 @@ export default function Page() {
         )}
       </Leaderboard.Root>
 
-      <PageTurner page={page} pages={pages} setPage={setPage} />
+      <PageTurner
+        page={page}
+        pages={pages}
+        onPageChange={(page) => jumpToPosition(page * ROWS_PER_PAGE)}
+      />
 
       {loadingProgress !== null && (
         <Flex
@@ -930,7 +943,7 @@ export default function Page() {
             <div
               style={{
                 height: '100%',
-                transitionDuration: '200ms',
+                transitionDuration: '10s',
                 width: `${Math.round(
                   (loadingProgress[0] / loadingProgress[1]) * 100,
                 )}%`,