From bcc3c7497320a2a0c40224777e5e3d72f434f18d Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Tue, 20 Jun 2023 15:00:59 +0200
Subject: [PATCH] scroll to top button added

---
 TODO                             |  3 +-
 app/tournois/page.tsx            |  2 +-
 components/Footer.tsx            |  2 +-
 components/ScrollToTopButton.tsx | 25 ++++++++++++++
 components/SearchBar.tsx         | 56 +++++++++++++++-----------------
 components/TournamentTable.tsx   | 39 +++++++++++++++++-----
 handlers/scrollHandlers.ts       |  8 +++++
 types.ts                         |  2 ++
 8 files changed, 97 insertions(+), 40 deletions(-)
 create mode 100644 components/ScrollToTopButton.tsx
 create mode 100644 handlers/scrollHandlers.ts

diff --git a/TODO b/TODO
index aa654f0..883743c 100644
--- a/TODO
+++ b/TODO
@@ -5,7 +5,8 @@
 //TODO about page
 //TODO contact page needs working mailer
 //TODO font size on mobile screen
-//TODO need a 'return to top' arrow button on smaller screens
+//TODO scroll to top button positioning
+//TODO add test for return to top button
 //TODO SEO - next headers etc
 ----------------------------------------------------------------
 //TODO logo for navbar and favicon
diff --git a/app/tournois/page.tsx b/app/tournois/page.tsx
index f5176a1..8d4c38f 100644
--- a/app/tournois/page.tsx
+++ b/app/tournois/page.tsx
@@ -37,7 +37,7 @@ export default async function Tournaments() {
 
   return (
     <Layout>
-      <main className="grid lg:grid-cols-2">
+      <main className="relative grid lg:grid-cols-2">
         <div className="">
           <TournamentMap tournamentData={JSON.parse(tournamentData)} />
         </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 20b7e05..540e283 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -4,7 +4,7 @@ import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 export default function Footer() {
   return (
     <footer
-      className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700"
+      className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700 z-30"
       data-cy="footer"
     >
       <div className="p-2">
diff --git a/components/ScrollToTopButton.tsx b/components/ScrollToTopButton.tsx
new file mode 100644
index 0000000..450e79b
--- /dev/null
+++ b/components/ScrollToTopButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { FaArrowUp } from "react-icons/fa";
+import { handleScrollToTop } from "@/handlers/scrollHandlers";
+
+const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
+  // determine scrollable element based on screen size - window or div
+  const scrollToTopElement = isLgScreen
+    ? document.getElementById("tournament-table")
+    : window;
+
+  const scrollToTopButtonClass = isLgScreen
+    ? "absolute bottom-0 right-3 p-10"
+    : "sticky top-20";
+
+  return (
+    <button
+      className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
+    >
+      <FaArrowUp onClick={() => handleScrollToTop(scrollToTopElement)} />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index de644e4..069b9a4 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -10,37 +10,35 @@ const SearchBar = ({
   setTournamentFilter,
 }: SearchBarProps) => {
   return (
-    <>
-      <div className="p-3 bg-white dark:bg-gray-800">
-        <label htmlFor="table-search" className="sr-only">
-          Search
-        </label>
-        <div className="relative mt-1">
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg
-              className="w-5 h-5 text-gray-500 dark:text-gray-400"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
-          </div>
-          <input
-            type="text"
-            id="table-search"
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder="Search for items"
-            value={tournamentFilter}
-            onChange={(e) => setTournamentFilter(e.target.value)}
-          />
+    <div className="p-3 bg-white dark:bg-gray-800">
+      <label htmlFor="table-search" className="sr-only">
+        Search
+      </label>
+      <div className="relative mt-1">
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <svg
+            className="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
         </div>
+        <input
+          type="text"
+          id="table-search"
+          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="Search for items"
+          value={tournamentFilter}
+          onChange={(e) => setTournamentFilter(e.target.value)}
+        />
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx
index c250db5..b096933 100644
--- a/components/TournamentTable.tsx
+++ b/components/TournamentTable.tsx
@@ -3,6 +3,7 @@
 import { TournamentDataProps } from "@/types";
 import { useEffect, useState } from "react";
 import SearchBar from "@/components/SearchBar";
+import ScrollToTopButton from "@/components/ScrollToTopButton";
 
 export default function TournamentTable({
   tournamentData,
@@ -11,6 +12,7 @@ export default function TournamentTable({
   const [searchQuery, setSearchQuery] = useState(""); // text from search bar
   const [filteredTournamentData, setFilteredTournamentData] =
     useState(tournamentData);
+  const [isLgScreen, setIsLgScreen] = useState(false);
 
   useEffect(() => {
     setFilteredTournamentData(
@@ -18,6 +20,18 @@ 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 = (
@@ -57,25 +71,34 @@ export default function TournamentTable({
     ));
   }
 
-  const stickyHeader =
-    "sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600";
-
   return (
-    <section className="w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-174px)] lg:col-start-2 lg:col-end-3">
+    <section
+      className="tournament-table w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-174px)] lg:col-start-2 lg:col-end-3 lg:overflow-y-scroll"
+      id="tournament-table"
+    >
       <SearchBar
         tournamentFilter={searchQuery}
         setTournamentFilter={setSearchQuery}
       />
+      <ScrollToTopButton isLgScreen={isLgScreen} />
       <table
         className="relative table-fixed w-full text-center text-xs"
         data-cy="tournament-table"
       >
         <thead>
           <tr>
-            <th className={stickyHeader}>Date</th>
-            <th className={stickyHeader}>Ville</th>
-            <th className={stickyHeader}>Tournois</th>
-            <th className={stickyHeader}>Cadence</th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Date
+            </th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Ville
+            </th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Tournois
+            </th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Cadence
+            </th>
           </tr>
         </thead>
         <tbody>{tableData}</tbody>
diff --git a/handlers/scrollHandlers.ts b/handlers/scrollHandlers.ts
new file mode 100644
index 0000000..6f3b9d5
--- /dev/null
+++ b/handlers/scrollHandlers.ts
@@ -0,0 +1,8 @@
+import { ScrollableElement } from "@/types";
+
+const isBrowser = () => typeof window !== "undefined";
+
+export const handleScrollToTop = (element: ScrollableElement | null) => {
+  if (!isBrowser()) return;
+  element?.scrollTo({ top: 0, behavior: "smooth" });
+};
diff --git a/types.ts b/types.ts
index 8ec911f..573d2f3 100644
--- a/types.ts
+++ b/types.ts
@@ -12,3 +12,5 @@ export interface Tournament {
 export interface TournamentDataProps {
   tournamentData: Tournament[];
 }
+
+export type ScrollableElement = Window | HTMLElement;