From 94cea267c9f49bebcb33c2fe8baede3eb6ce4e34 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Wed, 11 Oct 2023 08:36:45 +0200
Subject: [PATCH] Simplify burger handling

---
 app/[locale]/components/Hamburger.tsx     | 24 ++++----
 app/[locale]/components/HamburgerMenu.tsx | 57 ++++---------------
 app/atoms.ts                              |  1 +
 components/Map.tsx                        |  2 +-
 components/ScrollToTopButton.tsx          |  2 +-
 hooks/useHamburgerClose.ts                | 67 -----------------------
 {handlers => utils}/scrollHandlers.ts     |  0
 7 files changed, 23 insertions(+), 130 deletions(-)
 delete mode 100644 hooks/useHamburgerClose.ts
 rename {handlers => utils}/scrollHandlers.ts (100%)

diff --git a/app/[locale]/components/Hamburger.tsx b/app/[locale]/components/Hamburger.tsx
index cc3b6de..8b37f76 100644
--- a/app/[locale]/components/Hamburger.tsx
+++ b/app/[locale]/components/Hamburger.tsx
@@ -1,48 +1,44 @@
 "use client";
 
-import { useRef, useState } from "react";
-
+import { useAtom } from "jotai";
 import { twMerge } from "tailwind-merge";
 
+import { burgerMenuIsOpenAtom } from "@/app/atoms";
+
 import HamburgerMenu from "./HamburgerMenu";
 
 const Hamburger = () => {
-  const [menuVisible, setMenuVisible] = useState(false);
-  const hamburgerButtonRef = useRef<HTMLDivElement>(null);
+  const [burgerMenuIsOpen, setBurgerMenuIsOpen] = useAtom(burgerMenuIsOpenAtom);
+
   return (
     <>
       <div
-        ref={hamburgerButtonRef}
         className="hamburger-button relative z-[99999] space-y-2"
         data-test="hamburger-button"
-        onClick={() => setMenuVisible(!menuVisible)}
+        onClick={() => setBurgerMenuIsOpen(!burgerMenuIsOpen)}
       >
         <div
           className={twMerge(
             "h-0.5 w-8 bg-gray-600 transition-all duration-300 ease-in-out dark:bg-white",
-            menuVisible &&
+            burgerMenuIsOpen &&
               "translate-x-[1px] translate-y-2.5 rotate-45 bg-white",
           )}
         ></div>
         <div
           className={twMerge(
             "h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white",
-            menuVisible && "scale-0 bg-white opacity-0",
+            burgerMenuIsOpen && "scale-0 bg-white opacity-0",
           )}
         ></div>
         <div
           className={twMerge(
             "h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white",
-            menuVisible && "-translate-y-2.5 -rotate-45 bg-white",
+            burgerMenuIsOpen && "-translate-y-2.5 -rotate-45 bg-white",
           )}
         ></div>
       </div>
 
-      <HamburgerMenu
-        menuVisible={menuVisible}
-        setMenuVisible={setMenuVisible}
-        hamburgerButtonRef={hamburgerButtonRef}
-      />
+      <HamburgerMenu />
     </>
   );
 };
diff --git a/app/[locale]/components/HamburgerMenu.tsx b/app/[locale]/components/HamburgerMenu.tsx
index d195cb9..cb2a934 100644
--- a/app/[locale]/components/HamburgerMenu.tsx
+++ b/app/[locale]/components/HamburgerMenu.tsx
@@ -1,69 +1,30 @@
 import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
 
+import { useAtom } from "jotai";
 import { useTranslations } from "next-intl";
 import { twMerge } from "tailwind-merge";
 
-import useHamburgerClose from "@/hooks/useHamburgerClose";
+import { burgerMenuIsOpenAtom } from "@/app/atoms";
 import { Link } from "@/utils/navigation";
 
-interface HamburgerMenuState {
-  menuVisible: boolean;
-  setMenuVisible: Dispatch<SetStateAction<boolean>>;
-  hamburgerButtonRef: RefObject<HTMLDivElement>;
-}
-
-const HamburgerMenu = ({
-  menuVisible,
-  setMenuVisible,
-  hamburgerButtonRef,
-}: HamburgerMenuState) => {
+const HamburgerMenu = () => {
   const t = useTranslations("Nav");
-  const [mouseOverMenu, setMouseOverMenu] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | undefined>();
-  const menuRef = useRef<HTMLDivElement>(null);
+  const [burgerMenuIsOpen, setBurgerMenuIsOpen] = useAtom(burgerMenuIsOpenAtom);
 
-  const menuTimeout = () => {
-    timeoutRef.current = setTimeout(() => {
-      setMenuVisible(false);
-      setMouseOverMenu(false);
-    }, 4000);
-  };
-
-  const handleMouseEnterMenu = () => {
-    setMouseOverMenu(true);
-    clearTimeout(timeoutRef.current);
-  };
-
-  const handleMouseLeaveMenu = () => {
-    setMouseOverMenu(false);
-    clearTimeout(timeoutRef.current);
-  };
-
-  useHamburgerClose({
-    menuVisible,
-    setMenuVisible,
-    menuRef,
-    hamburgerButtonRef,
-    mouseOverMenu,
-    setMouseOverMenu,
-    timeoutRef,
-    menuTimeout,
-  });
+  const closeMenu = () => setBurgerMenuIsOpen(false);
 
   return (
     <div
-      ref={menuRef}
       className={twMerge(
-        "fixed right-0 top-0 z-[9999] h-[calc(100svh-5rem)] w-full",
+        "fixed right-0 top-0 z-[9999] h-[calc(100svh-3rem)] w-full",
         "flex items-center justify-center bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden",
-        !menuVisible && "translate-x-full",
+        !burgerMenuIsOpen && "translate-x-full",
       )}
-      onMouseEnter={handleMouseEnterMenu}
-      onMouseLeave={handleMouseLeaveMenu}
     >
       <ul className="list-reset text-white">
         <li className="py-5 text-center text-xl">
           <Link
+            onClick={closeMenu}
             href="/tournaments"
             className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
           >
@@ -73,6 +34,7 @@ const HamburgerMenu = ({
 
         <li className="py-5 text-center text-xl">
           <Link
+            onClick={closeMenu}
             href="/clubs"
             className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
           >
@@ -82,6 +44,7 @@ const HamburgerMenu = ({
 
         <li className="py-5 text-center text-xl">
           <Link
+            onClick={closeMenu}
             href="/elo"
             className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
           >
diff --git a/app/atoms.ts b/app/atoms.ts
index 98e78b6..3807543 100644
--- a/app/atoms.ts
+++ b/app/atoms.ts
@@ -5,6 +5,7 @@ import { Club, TimeControl, Tournament } from "@/types";
 import atomWithDebounce from "@/utils/atomWithDebounce";
 import { normalizedContains } from "@/utils/string";
 
+export const burgerMenuIsOpenAtom = atom(false);
 export const mapBoundsAtom = atom<LatLngBounds | null>(null);
 export const syncVisibleAtom = atom(true);
 export const searchStringAtom = atom("");
diff --git a/components/Map.tsx b/components/Map.tsx
index 7c95170..4edc903 100644
--- a/components/Map.tsx
+++ b/components/Map.tsx
@@ -220,7 +220,7 @@ export const Map = ({
 
   return (
     <section id="tournament-map" className="flex h-content flex-col">
-      <div className="p-3 lg:hidden">{filters}</div>
+      {filters && <div className="p-3 lg:hidden">{filters}</div>}
 
       <MapContainer
         center={center}
diff --git a/components/ScrollToTopButton.tsx b/components/ScrollToTopButton.tsx
index 167e48e..d48d1b3 100644
--- a/components/ScrollToTopButton.tsx
+++ b/components/ScrollToTopButton.tsx
@@ -4,9 +4,9 @@ import { useEffect, useRef, useState } from "react";
 
 import { FaArrowUp } from "react-icons/fa";
 
-import { handleScrollToTop } from "@/handlers/scrollHandlers";
 import { useBreakpoint } from "@/hooks/tailwind";
 import { ScrollableElement } from "@/types";
+import { handleScrollToTop } from "@/utils/scrollHandlers";
 
 const ScrollToTopButton = () => {
   const scrollToTopElementRef = useRef<ScrollableElement | null>(null);
diff --git a/hooks/useHamburgerClose.ts b/hooks/useHamburgerClose.ts
deleted file mode 100644
index 4d0f8e4..0000000
--- a/hooks/useHamburgerClose.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Dispatch, RefObject, SetStateAction, useEffect } from "react";
-
-interface HamburgerClose {
-  menuVisible: boolean;
-  setMenuVisible: Dispatch<SetStateAction<boolean>>;
-  menuRef: RefObject<HTMLDivElement>;
-  hamburgerButtonRef: RefObject<HTMLDivElement>;
-  mouseOverMenu: boolean;
-  setMouseOverMenu: Dispatch<SetStateAction<boolean>>;
-  timeoutRef: RefObject<NodeJS.Timeout | undefined>;
-  menuTimeout: () => void;
-}
-
-const useHamburgerClose = ({
-  menuVisible,
-  setMenuVisible,
-  menuRef,
-  hamburgerButtonRef,
-  mouseOverMenu,
-  setMouseOverMenu,
-  timeoutRef,
-  menuTimeout,
-}: HamburgerClose) => {
-  useEffect(() => {
-    const handleMouseDownOutsideMenu = (event: MouseEvent) => {
-      if (
-        menuVisible &&
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        hamburgerButtonRef.current &&
-        !hamburgerButtonRef.current.contains(event.target as Node)
-      ) {
-        setMenuVisible(false);
-        setMouseOverMenu(false);
-      }
-    };
-
-    const handleLinkClick = () => {
-      setMenuVisible(false);
-    };
-
-    document.addEventListener("mousedown", handleMouseDownOutsideMenu);
-    const links = document.querySelectorAll("a");
-    links.forEach((link) => {
-      link.addEventListener("click", handleLinkClick);
-    });
-
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDownOutsideMenu);
-      links.forEach((link) => {
-        link.removeEventListener("click", handleLinkClick);
-      });
-    };
-  }, [menuVisible]);
-
-  useEffect(() => {
-    if (menuVisible && !mouseOverMenu) {
-      menuTimeout();
-    } else {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    }
-  }, [mouseOverMenu, menuVisible]);
-};
-
-export default useHamburgerClose;
diff --git a/handlers/scrollHandlers.ts b/utils/scrollHandlers.ts
similarity index 100%
rename from handlers/scrollHandlers.ts
rename to utils/scrollHandlers.ts