Merge pull request #1885 from kleros/refactor/jurors-page-scroll

refactor(web): jurors-page-scroll

Author: alcercu

web/src/hooks/useScrollTop.ts

@@ -4,8 +4,11 @@ import { OverlayScrollContext } from "context/OverlayScrollContext";
 export const useScrollTop = () => {
   const osInstanceRef = useContext(OverlayScrollContext);
 
-  const scrollTop = () => {
-    osInstanceRef?.current?.osInstance().elements().viewport.scroll({ top: 0 });
+  const scrollTop = (smooth = false) => {
+    osInstanceRef?.current
+      ?.osInstance()
+      .elements()
+      .viewport.scroll({ top: 0, behavior: smooth ? "smooth" : "auto" });
   };
 
   return scrollTop;

web/src/pages/Jurors/DisplayJurors.tsx

@@ -6,7 +6,6 @@ import { isUndefined } from "utils/index";
 import { StandardPagination } from "@kleros/ui-components-library";
 
 import { useJurorsByCoherenceScore } from "queries/useJurorsByCoherenceScore";
-import useIsDesktop from "hooks/useIsDesktop";
 
 import { OrderDirection } from "src/graphql/graphql";
 
@@ -15,6 +14,7 @@ import JurorCard from "../Home/TopJurors/JurorCard";
 import { ListContainer, StyledLabel } from "../Home/TopJurors";
 import Header from "../Home/TopJurors/Header";
 import { decodeURIFilter } from "utils/uri";
+import { useScrollTop } from "hooks/useScrollTop";
 
 interface IDisplayJurors {
   totalLeaderboardJurors: number;
@@ -28,10 +28,10 @@ const StyledPagination = styled(StandardPagination)`
 
 const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) => {
   const { page, order, filter } = useParams();
+  const scrollTop = useScrollTop();
   const { id: searchValue } = decodeURIFilter(filter ?? "all");
   const navigate = useNavigate();
-  const isDesktop = useIsDesktop();
-  const jurorsPerPage = isDesktop ? 20 : 10;
+  const jurorsPerPage = 10;
   const currentPage = parseInt(page ?? "1");
   const jurorSkip = jurorsPerPage * (currentPage - 1);
   const { data: queryJurors } = useJurorsByCoherenceScore(
@@ -62,6 +62,7 @@ const DisplayJurors: React.FC<IDisplayJurors> = ({ totalLeaderboardJurors }) =>
   );
 
   const handlePageChange = (newPage: number) => {
+    scrollTop(true);
     navigate(`/jurors/${newPage}/${order}/${filter}`);
   };