From 5fd8b357620625dffea85cd6cf6853b227433454 Mon Sep 17 00:00:00 2001 From: Owen Rees Date: Wed, 21 Jun 2023 09:47:40 +0200 Subject: [PATCH] scroll to top bug fix --- TODO | 33 ++++++++++++++++++++------ app/api/v1/tournaments/france/route.ts | 2 +- components/ScrollToTopButton.tsx | 33 ++++++++++++++++++-------- components/TournamentMap.tsx | 2 +- components/TournamentTable.tsx | 15 +----------- 5 files changed, 52 insertions(+), 33 deletions(-) diff --git a/TODO b/TODO index 7af26f3..1c99e3f 100644 --- a/TODO +++ b/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 diff --git a/app/api/v1/tournaments/france/route.ts b/app/api/v1/tournaments/france/route.ts index 9b11c04..afcd444 100644 --- a/app/api/v1/tournaments/france/route.ts +++ b/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, })); diff --git a/components/ScrollToTopButton.tsx b/components/ScrollToTopButton.tsx index 528492a..ba63e6a 100644 --- a/components/ScrollToTopButton.tsx +++ b/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(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(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" > - handleScrollToTop(scrollToTopElementRef.current || window) - } + onClick={() => handleScrollToTop(scrollToTopElementRef.current)} /> ); diff --git a/components/TournamentMap.tsx b/components/TournamentMap.tsx index e8a420a..0323030 100644 --- a/components/TournamentMap.tsx +++ b/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"; diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx index 4740b75..ace2453 100644 --- a/components/TournamentTable.tsx +++ b/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} />
- +