scroll to top bug fix

TODO

@@ -1,18 +1,37 @@
+TESTS
 // TODO tests for tournament page:
     - map and table mounts in tournament page <- get data to send to map/table
-----------------------------------------------------------------
-//TODO SRP for web and API data fetching
-//TODO about page
-//TODO contact page needs working mailer
-//TODO font size on mobile screen
-//TODO SEO - next headers etc
 //TODO data fetching tests
 //TODO redo layer groups tests
+
+-----------------------------------------------------------------
+BUGS
+//TODO small screen scroll to top button only works after a refresh. The bug appears after a screen resize - TournamentTable.tsx useEffect
+//TODO about page is not centred in Safari
+//TODO tournament page load is weird on 2nd click. On safari it pauses for a few seconds. Is it trying to load the entire page before displaying?
+
 ----------------------------------------------------------------
+PAGES
+//TODO about page
+//TODO contact page needs working mailer
+
+----------------------------------------------------------------
+DESIGN CHANGES
+//TODO font size on mobile screen
+//TODO bottom of map is a few pixels short
+//TODO mobile navbar is creeping into the page by a few pixels when hidden - move it to the right a bit. It is easier to see in light mode
 //TODO logo for navbar and favicon
 //TODO mobile map needs improving
-//TODO multi-language i18n support - https://nextjs.org/docs/app/building-your-application/routing/internationalization
+
+----------------------------------------------------------------
+LOGIC
+//TODO SRP for web and API data fetching
 //TODO error handling
 //TODO consider offering GraphQL support
+
+MISC
+----------------------------------------------------------------
+//TODO SEO - next headers etc
+//TODO multi-language i18n support - https://nextjs.org/docs/app/building-your-application/routing/internationalization
 //TODO move smaller ui components into a new folder, and make them reusable - such as using generic prop names
 //TODO readme

app/api/v1/tournaments/france/route.ts

@@ -16,7 +16,7 @@ export async function GET() {
     const db = client.db("tournamentsFranceDB");
 
     const results = await dateOrderingFrance(db);
-    const data = results.map(({ _id, __v, ...rest }) => ({
+    const data = results.map(({ _id, ...rest }) => ({
       id: _id,
       ...rest,
     }));

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) {
+    isLgScreen
-      scrollToTopElementRef.current =
+      ? (scrollToTopElementRef.current =
-        document.getElementById("tournament-table");
+          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={() =>
+        onClick={() => handleScrollToTop(scrollToTopElementRef.current)}
-          handleScrollToTop(scrollToTopElementRef.current || window)
-        }
       />
     </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