scroll to top bug fix

components/ScrollToTopButton.tsx

@@ -1,17 +1,32 @@
 "use client";
 
+import { ScrollableElement } from "@/types";
+
 import { FaArrowUp } from "react-icons/fa";
 import { handleScrollToTop } from "@/handlers/scrollHandlers";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+
+const ScrollToTopButton = () => {
+  const scrollToTopElementRef = useRef<ScrollableElement | null>(null);
+  const [isLgScreen, setIsLgScreen] = useState(false);
+
+  // calculate screen size
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLgScreen(window.innerWidth >= 1024);
+    };
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  });
 
-const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
-  const scrollToTopElementRef = useRef<HTMLElement | null>(null);
   // determine scrollable element based on screen size - window or div
   useEffect(() => {
-    if (isLgScreen) {
-      scrollToTopElementRef.current =
-        document.getElementById("tournament-table");
-    }
+    isLgScreen
+      ? (scrollToTopElementRef.current =
+          document.getElementById("tournament-table"))
+      : (scrollToTopElementRef.current = window);
   }, [isLgScreen]);
 
   const scrollToTopButtonClass = isLgScreen
@@ -24,9 +39,7 @@ const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
       data-cy="scroll-to-top-button"
     >
       <FaArrowUp
-        onClick={() =>
-          handleScrollToTop(scrollToTopElementRef.current || window)
-        }
+        onClick={() => handleScrollToTop(scrollToTopElementRef.current)}
       />
     </button>
   );

components/TournamentMap.tsx

@@ -6,7 +6,7 @@ import { LatLngLiteral } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet-defaulticon-compatibility";
-import { MapContainer, TileLayer, LayersControl, useMap } from "react-leaflet";
+import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
 
 import { createLayerGroups } from "@/utils/layerGroups";
 import Legend from "@/components/Legend";

components/TournamentTable.tsx

@@ -12,7 +12,6 @@ export default function TournamentTable({
   const [searchQuery, setSearchQuery] = useState(""); // text from search bar
   const [filteredTournamentData, setFilteredTournamentData] =
     useState(tournamentData);
-  const [isLgScreen, setIsLgScreen] = useState(false);
 
   useEffect(() => {
     setFilteredTournamentData(
@@ -20,18 +19,6 @@ export default function TournamentTable({
     );
   }, [searchQuery]);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setIsLgScreen(window.innerWidth >= 1024);
-    };
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   // TODO move this section into its own function
   if (filteredTournamentData.length === 0) {
     tableData = (
@@ -83,7 +70,7 @@ export default function TournamentTable({
           setTournamentFilter={setSearchQuery}
         />
         <div>
-          <ScrollToTopButton isLgScreen={isLgScreen} />
+          <ScrollToTopButton />
         </div>
       </div>
       <table