diff --git a/src/app/tools/ratings/page.tsx b/src/app/tools/ratings/page.tsx index d06299c75..4aed22073 100644 --- a/src/app/tools/ratings/page.tsx +++ b/src/app/tools/ratings/page.tsx @@ -83,6 +83,7 @@ export default function Page() { page * rowsPerPage, page * rowsPerPage + rowsPerPage, ); + const positionInput = useRef(null); const previousPage = () => setPage((page) => Math.max(page - 1, 0)); const nextPage = () => setPage((page) => @@ -152,6 +153,19 @@ export default function Page() { }); } } + const handleJumpToPosition = () => { + const rawPosition = positionInput.current!.valueAsNumber - 1; + const position = Math.max( + 0, + Math.min(rawPosition, (players.data?.length ?? 0) - 1), + ); + setPage(Math.floor(position / rowsPerPage)); + + if (players.data) { + setHighlightedPlayerId(players.data[position].id); + } + }; + const [jumpToPositionOpen, setJumpToPositionOpen] = useState(false); useEffect(() => { setPage(0); @@ -246,98 +260,11 @@ export default function Page() { - - - - - - - - - - setJumpToLeague(parseInt(value))} - > - - - - {ratingsInfo?.detail === undefined && - ratingsInfo?.leagues.map(({ index, title }) => ( - - {title} - - ))} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {searchResults?.map((player) => ( - - - - ))} - - {searchResults?.length === 0 && ( - - )} - - - - - - - - - - - - + + + setRowsPerPage(parseInt(value))} defaultValue={`${rowsPerPage}`} @@ -352,16 +279,135 @@ export default function Page() { ))} + + - - - - - + + + + + + + + + { + if (event.key === 'Enter') { + handleJumpToPosition(); + setJumpToPositionOpen(false); + } + }} + /> + + + + + + + + + + + + + + + + + + + + + setJumpToLeague(parseInt(value))} + > + + + + {ratingsInfo?.detail === undefined && + ratingsInfo?.leagues.map(({ index, title }) => ( + + {title} + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {searchResults?.map((player) => ( + + + + ))} + + {searchResults?.length === 0 && ( + + )} + + + + + + + + + +