Merge develop into main for CAN-89, CAN-60 & CAN-80 (#73)

* [CAN-89] Disable Scrolling on Mobile Nav Problem - When mobile overlay up, scrolling still enabled Solution - When component is mounted - disable scrolling on events - DOM Mouse Scrolls - Wheel Events (checked by searching property on div element) - Touch Move - Any Key Events - Package as a helper hook that can be reused on other component - Enable Scrolling when unmount the overlay - ASIDE: Passive Event listeners prevent blocking js code when scrolling - We need to tell the browser (if it is supported) to not block our event listeners as when need to check if the user is scrolling Note * [CAn-60] Overlay Not Closing on Logo Click Mobile Problem - Overlay not closing on logo click Solution - Change the condition to match exact matches instead of regex matches Note - This will need to be changed in future to suit params * [CAN-60] Refactor Logo To Accept OnClick Problem - Clicking on mobile logo doesn't close Solution - Enable onclick to be a prop - Pass close overlay to logo - Close Note * [CAN-60] Refactor Logo to Accept onClick Problem - Logo doesn't close overlay when already on homepage Solution - Refactor logo to accept onClick - If on homepage and component is clicked, execute onClick Note * [CAN-60] Refactor click handlers readability Problem - onClick doesn't really describe what is happening Solution - Refactor hamburger button from .jsx to .tsx - Refactor prop name on overlaynav form handleClick to closeOverlay - Refactor prop name hamburger button from handleClick to showOverlay Note * CAN-80 - Generate custom description and keywords for each club (#70) Problem: need custom meta for SEO Solution: painstakingly generate and paste in --------- Co-authored-by: Fabrizio <[email protected]> Co-authored-by: Fabrizio Catinella <[email protected]>
marcaufderheyde · Apr 22, 2024 · c5df426 · c5df426
1 parent c7d3e94
commit c5df426
Show file tree

Hide file tree

Showing 10 changed files with 500 additions and 240 deletions.
diff --git a/app/[locale]/clubs/clubsListContent.tsx b/app/[locale]/clubs/clubsListContent.tsx
@@ -216,7 +216,7 @@ const clubs: Club[] = [
         description: '',
         offerings: '',
         harm_reduction: '',
-        imageUrl: '/berlinBud1.webp',
+        imageUrl: '/club16.png',
         clubPageUrl: 'https://www.high-society-cannabis-club.de/',
         slug: '',
         geoLocation: [52.5170365, 13.3888599],

diff --git a/app/[locale]/clubs/getClubMetadata.tsx b/app/[locale]/clubs/getClubMetadata.tsx
@@ -10,8 +10,8 @@ export const getClubMetadata = async (clubSlug: string) => {
 
         return {
             title: club.name,
-            description: club.description,
-            keywords: club.offerings + ', ' + club.name,
+            description: t(`${club.slug}.meta_description`),
+            keywords: t(`${club.slug}.meta_keywords`) + ', ' + club.name,
         };
     }
 };
diff --git a/app/helpers/usePreventScrolling.tsx b/app/helpers/usePreventScrolling.tsx
@@ -0,0 +1,88 @@
+'use client';
+import { useEffect } from 'react';
+
+const scrollKeys: Set<String> = new Set([
+    'Enter',
+    'Return',
+    ' ',
+    'PageUp',
+    'PageDown',
+    'End',
+    'Home',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowRight',
+    'ArrowDown',
+]);
+
+export default function usePreventScrolling() {
+    useEffect(() => {
+        const preventDefault = (e: Event) => e.preventDefault();
+        const preventDefaultOnScrollKeys = (e: KeyboardEvent) => {
+            if (scrollKeys.has(e.key)) e.preventDefault();
+            return false;
+        };
+
+        // Needed in Modern Browsers
+        // See: https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners
+        var supportsPassive = false;
+
+        try {
+            const options = Object.defineProperty({}, 'passive', {
+                get: function () {
+                    supportsPassive = true;
+                },
+            });
+
+            window.addEventListener(
+                'testPassiveIsSupported',
+                null as any,
+                options
+            );
+
+            window.removeEventListener(
+                'testPassiveIsSupported',
+                null as any,
+                options
+            );
+        } catch (e) {}
+
+        var wheelOpt = supportsPassive ? { passive: false } : false;
+        var wheelEvent =
+            'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
+
+        function preventScroll() {
+            window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
+            window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
+            window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
+            window.addEventListener(
+                'keydown',
+                preventDefaultOnScrollKeys,
+                false
+            );
+        }
+
+        function enableScroll() {
+            window.removeEventListener('DOMMouseScroll', preventDefault, false);
+            window.removeEventListener(
+                wheelEvent,
+                preventDefault,
+                wheelOpt as any
+            );
+            window.removeEventListener(
+                'touchmove',
+                preventDefault,
+                wheelOpt as any
+            );
+            window.removeEventListener(
+                'keydown',
+                preventDefaultOnScrollKeys,
+                false
+            );
+        }
+
+        preventScroll();
+
+        return () => enableScroll();
+    }, []);
+}
diff --git a/app/ui/Navigation/hamburgerbutton.jsx → app/ui/Navigation/hamburgerbutton.tsx b/app/ui/Navigation/hamburgerbutton.jsx → app/ui/Navigation/hamburgerbutton.tsx
@@ -1,9 +1,13 @@
 import Burger from '@/app/ui/Navigation/burger';
 
-export default function HamburgerButton({ handleClick }) {
+export default function HamburgerButton({
+    showOverlay,
+}: {
+    showOverlay: Function;
+}) {
     return (
         <div
-            onClick={() => handleClick()}
+            onClick={() => showOverlay()}
             className='py-3 px-3 backdrop-blur-xl background-white rounded-[2rem] bg-[rgba(255,255,255,0.11)]'
         >
             <Burger color={'white'} />

diff --git a/app/ui/Navigation/logo.tsx b/app/ui/Navigation/logo.tsx
@@ -1,11 +1,21 @@
-"use client"
+'use client';
 import { useLocale } from 'next-intl';
+import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 
-export default function Logo() {
+export default function Logo({ onClick }: { onClick?: Function }) {
     const localActive = useLocale();
+    const pathname = usePathname();
+    const home = `/${localActive}`;
+
+    const handleClick: Function = onClick
+        ? () => {
+              if (home == pathname) onClick();
+          }
+        : () => {};
+
     return (
-        <Link href={`/${localActive}`}>
+        <Link onClick={() => handleClick()} href={home}>
             <div className='font-bold text-xl'>
                 <p>Cannabis</p>
                 <p>Clubs</p>

diff --git a/app/ui/Navigation/mobilenav.tsx b/app/ui/Navigation/mobilenav.tsx
@@ -8,10 +8,10 @@ import { useState } from 'react';
 export default function MobileNav({ links }: { links: Array<LinkInfo> }) {
     const [showOverlay, setShowOverlay] = useState(false);
     const hamburgerButton = (
-        <HamburgerButton handleClick={() => setShowOverlay(true)} />
+        <HamburgerButton showOverlay={() => setShowOverlay(true)} />
     );
     const overlayNav = (
-        <OverlayNav handleClick={() => setShowOverlay(false)} links={links} />
+        <OverlayNav closeOverlay={() => setShowOverlay(false)} links={links} />
     );
 
     return <div>{showOverlay ? overlayNav : hamburgerButton}</div>;

diff --git a/app/ui/Navigation/overlaynav.tsx b/app/ui/Navigation/overlaynav.tsx
@@ -5,25 +5,27 @@ import LinkInfo from '@/app/ui/Navigation/linkinfo';
 import Logo from '@/app/ui/Navigation/logo';
 import Close from '@/app/ui/Navigation/close';
 import LocalSwitcher from './translation-switch';
-import { useEffect, useState, useRef, MutableRefObject } from 'react';
+import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import usePrevious from '@/app/helpers/usePrevious';
+import usePreventScrolling from '@/app/helpers/usePreventScrolling';
 
 export default function OverlayNav({
-    handleClick,
+    closeOverlay,
     links,
 }: {
-    handleClick: Function;
+    closeOverlay: Function;
     links: Array<LinkInfo>;
 }) {
     const pathname = usePathname();
     const prevPathnameRef = usePrevious(pathname);
+    const preventScroll = usePreventScrolling();
 
     useEffect(() => {
         const prevPathname = prevPathnameRef.current as string;
         if (prevPathname !== null && pathname !== null) {
-            if (!prevPathname.match(pathname)) {
-                handleClick();
+            if (prevPathname !== pathname) {
+                closeOverlay();
                 prevPathnameRef.current = pathname;
             }
         }
@@ -32,23 +34,23 @@ export default function OverlayNav({
     return (
         <div
             onClick={(e) => {
-                handleClick();
+                closeOverlay();
             }}
-            className="fixed bg-[rgba(255,255,255,0.30)] z-10 min-w-full min-h-full backdrop-blur-md top-0 left-0 flex flex-col justify-start items-center"
+            className='fixed bg-[rgba(255,255,255,0.30)] z-10 min-w-full min-h-full backdrop-blur-md top-0 left-0 flex flex-col justify-start items-center'
         >
             <div
                 onClick={(e) => {
                     e.stopPropagation();
                 }}
-                className="bg-white rounded-[2rem] flex flex-col z-20 w-[90%] my-3 py-8 px-8 shadow-md"
+                className='bg-white rounded-[2rem] flex flex-col z-20 w-[90%] my-3 py-8 px-8 shadow-md'
             >
-                <div className="flex flex-row justify-between items-center text-[#B6CF54]">
-                    <Logo />
-                    <div onClick={() => handleClick()} className="px-4">
+                <div className='flex flex-row justify-between items-center text-[#B6CF54]'>
+                    <Logo onClick={() => closeOverlay()} />
+                    <div onClick={() => closeOverlay()} className='px-4'>
                         <Close color={'#828282'} />
                     </div>
                 </div>
-                <div className="flex flex-col justify-start items-start my-10 font-bold text-[1.6rem] text-[rgba(130,130,130,0.6)]">
+                <div className='flex flex-col justify-start items-start my-10 font-bold text-[1.6rem] text-[rgba(130,130,130,0.6)]'>
                     {links.map((link: LinkInfo) => {
                         return (
                             <Link
@@ -57,11 +59,11 @@ export default function OverlayNav({
                                         link.href as string
                                     )
                                         ? () => {
-                                              handleClick();
+                                              closeOverlay();
                                           }
                                         : () => {}
                                 }
-                                className="min-w-full py-2"
+                                className='min-w-full py-2'
                                 key={'mobile_' + link.name}
                                 href={link.href}
                             >
@@ -70,7 +72,7 @@ export default function OverlayNav({
                         );
                     })}
                 </div>
-                <div className="flex flex-row justify-end items-center text-[#828282]">
+                <div className='flex flex-row justify-end items-center text-[#828282]'>
                     <LocalSwitcher />
                 </div>
             </div>