fix: abstract scroll top component

Author: kemuru

web/src/components/ScrollTop.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+
+import { useScrollTop } from "hooks/useScrollTop";
+
+const ScrollTop: React.FC = () => {
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  });
+
+  return <></>;
+};
+export default ScrollTop;

web/src/pages/Cases/AttachmentDisplay/index.tsx

@@ -1,13 +1,12 @@
-import React, { lazy, Suspense, useEffect } from "react";
+import React, { lazy, Suspense } from "react";
 import styled from "styled-components";
 
 import { useSearchParams } from "react-router-dom";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
+import ScrollTop from "components/ScrollTop";
 
 import Header from "./Header";
 
@@ -42,11 +41,6 @@ const StyledNewTabIcon = styled(NewTabIcon)`
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
   const url = searchParams.get("url");
-  const scrollTop = useScrollTop();
-
-  useEffect(() => {
-    scrollTop();
-  }, []);
 
   return (
     <Container>
@@ -67,6 +61,7 @@ const AttachmentDisplay: React.FC = () => {
           </Suspense>
         </>
       ) : null}
+      <ScrollTop />
     </Container>
   );
 };

web/src/pages/Cases/CaseDetails/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { Route, Routes, useParams, Navigate } from "react-router-dom";
@@ -7,7 +7,6 @@ import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 import { VotingContextProvider } from "hooks/useVotingContext";
-import { useScrollTop } from "hooks/useScrollTop";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
@@ -20,6 +19,7 @@ import Overview from "./Overview";
 import Tabs from "./Tabs";
 import Timeline from "./Timeline";
 import Voting from "./Voting";
+import ScrollTop from "components/ScrollTop";
 
 const Container = styled.div``;
 
@@ -44,15 +44,10 @@ const Header = styled.h1`
 const CaseDetails: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
-  const scrollTop = useScrollTop();
   const dispute = data?.dispute;
   const currentPeriodIndex = (dispute ? Periods[dispute.period] : 0) as number;
   const arbitrable = dispute?.arbitrated.id as `0x${string}`;
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <VotingContextProvider>
       <Container>
@@ -76,6 +71,7 @@ const CaseDetails: React.FC = () => {
             <Route path="*" element={<Navigate to="overview" replace />} />
           </Routes>
         </StyledCard>
+        <ScrollTop />
       </Container>
     </VotingContextProvider>
   );

web/src/pages/Cases/CasesFetcher.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 
 import { useParams, useNavigate } from "react-router-dom";
 
 import useIsDesktop from "hooks/useIsDesktop";
-import { useScrollTop } from "hooks/useScrollTop";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
@@ -14,6 +13,7 @@ import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql";
 
 import CasesDisplay from "components/CasesDisplay";
+import ScrollTop from "components/ScrollTop";
 
 const calculateStats = (
   isCourtFilter: boolean,
@@ -48,7 +48,6 @@ const CasesFetcher: React.FC = () => {
   const location = useRootPath();
   const navigate = useNavigate();
   const isDesktop = useIsDesktop();
-  const scrollTop = useScrollTop();
   const casesPerPage = isDesktop ? 9 : 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -71,20 +70,19 @@ const CasesFetcher: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
-    <CasesDisplay
-      disputes={data?.disputes as DisputeDetailsFragment[]}
-      numberDisputes={totalCases}
-      numberClosedDisputes={ruledCases}
-      currentPage={pageNumber}
-      setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
-      totalPages={totalPages}
-      {...{ casesPerPage }}
-    />
+    <>
+      <CasesDisplay
+        disputes={data?.disputes as DisputeDetailsFragment[]}
+        numberDisputes={totalCases}
+        numberClosedDisputes={ruledCases}
+        currentPage={pageNumber}
+        setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
+        totalPages={totalPages}
+        {...{ casesPerPage }}
+      />
+      <ScrollTop />
+    </>
   );
 };
 

web/src/pages/Courts/CourtDetails/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -9,8 +9,6 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library";
 import { isProductionDeployment } from "consts/index";
 import { isUndefined } from "utils/index";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
@@ -23,6 +21,7 @@ import LatestCases from "components/LatestCases";
 import Staking from "components/Popup/MiniGuides/Staking";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { Divider } from "components/Divider";
+import ScrollTop from "components/ScrollTop";
 
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -85,7 +84,6 @@ const CourtDetails: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const { data } = useCourtTree();
   const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
-  const scrollTop = useScrollTop();
 
   const courtPath = getCourtsPath(data?.court, id);
 
@@ -97,10 +95,6 @@ const CourtDetails: React.FC = () => {
     })) ?? [])
   );
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <Container>
       <StyledCard>
@@ -126,6 +120,7 @@ const CourtDetails: React.FC = () => {
         <Description />
       </StyledCard>
       <LatestCases filters={{ court: id }} />
+      <ScrollTop />
     </Container>
   );
 };

web/src/pages/Dashboard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -7,8 +7,6 @@ import { useAccount } from "wagmi";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
 
@@ -18,6 +16,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
+import ScrollTop from "components/ScrollTop";
 
 import Courts from "./Courts";
 import JurorInfo from "./JurorInfo";
@@ -51,7 +50,6 @@ const Dashboard: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
   const navigate = useNavigate();
-  const scrollTop = useScrollTop();
   const casesPerPage = 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -71,10 +69,6 @@ const Dashboard: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <Container>
       {isConnected ? (
@@ -99,6 +93,7 @@ const Dashboard: React.FC = () => {
           <ConnectWallet />
         </ConnectWalletContainer>
       )}
+      <ScrollTop />
     </Container>
   );
 };

web/src/pages/GetPnk/index.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { isProductionDeployment } from "consts/index";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import ClaimPnkButton from "components/ClaimPnkButton";
 import HeroImage from "components/HeroImage";
+import ScrollTop from "components/ScrollTop";
 
 import { Widget } from "./Widget";
 
@@ -29,22 +28,14 @@ const Container = styled.div`
   gap: 24px;
 `;
 
-const GetPnk: React.FC = () => {
-  const scrollTop = useScrollTop();
-
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
-  return (
-    <Wrapper>
-      <HeroImage />
-      <Container>
-        {!isProductionDeployment() && <ClaimPnkButton />}
-        <Widget />
-      </Container>
-    </Wrapper>
-  );
-};
-
+const GetPnk: React.FC = () => (
+  <Wrapper>
+    <HeroImage />
+    <Container>
+      {!isProductionDeployment() && <ClaimPnkButton />}
+      <Widget />
+    </Container>
+    <ScrollTop />
+  </Wrapper>
+);
 export default GetPnk;

web/src/pages/Home/index.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { HomePageProvider } from "hooks/useHomePageContext";
-import { useScrollTop } from "hooks/useScrollTop";
 import { getOneYearAgoTimestamp } from "utils/date";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import HeroImage from "components/HeroImage";
 import LatestCases from "components/LatestCases";
+import ScrollTop from "components/ScrollTop";
 
 import Community from "./Community";
 import CourtOverview from "./CourtOverview";
@@ -26,26 +26,19 @@ const Container = styled.div`
   margin: 0 auto;
 `;
 
-const Home: React.FC = () => {
-  const scrollTop = useScrollTop();
-
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
-  return (
-    <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-      <Wrapper>
-        <HeroImage />
-        <Container>
-          <CourtOverview />
-          <LatestCases />
-          <TopJurors />
-          <Community />
-        </Container>
-      </Wrapper>
-    </HomePageProvider>
-  );
-};
+const Home: React.FC = () => (
+  <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+    <Wrapper>
+      <HeroImage />
+      <Container>
+        <CourtOverview />
+        <LatestCases />
+        <TopJurors />
+        <Community />
+      </Container>
+      <ScrollTop />
+    </Wrapper>
+  </HomePageProvider>
+);
 
 export default Home;