fix: pagemenu conditional section scrolling issues

bcgov · Feb 6, 2025 · 0905c2e · 0905c2e
1 parent 785e12c
commit 0905c2e
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 64 deletions.
diff --git a/frontend/src/components/layout/PageMenu.tsx b/frontend/src/components/layout/PageMenu.tsx
@@ -4,7 +4,6 @@ type PageSection = {
   sectionIndex: number;
   link: string;
   display: string;
-  visible: boolean;
 };
 
 type PageMenuProps = {
@@ -25,20 +24,21 @@ const PageMenu: React.FC<PageMenuProps> = ({
         aria-label="Page section navigation"
         className="navbar"
       >
-        {pageSections
-          .filter((s) => s.visible)
-          .map((section) => (
+        {pageSections.map((section) => {
+          const { display, link, sectionIndex } = section;
+          return (
             <a
-              className={`nav-link ${activeSection === section.sectionIndex ? 'active' : ''}`}
+              className={`nav-link ${activeSection === sectionIndex ? 'active' : ''}`}
               data-active-section={
-                activeSection === section.sectionIndex ? 'true' : 'false'
+                activeSection === sectionIndex ? 'true' : 'false'
               }
-              key={section.sectionIndex}
-              href={section.link}
+              key={link}
+              href={link}
             >
-              {section.display}
+              {display}
             </a>
-          ))}
+          );
+        })}
       </nav>
     );
   }
@@ -65,13 +65,14 @@ const PageMenu: React.FC<PageMenuProps> = ({
           <option value="" disabled>
             Table of Contents
           </option>
-          {pageSections
-            .filter((s) => s.visible)
-            .map((section) => (
-              <option key={section.sectionIndex} value={section.sectionIndex}>
-                {section.display}
+          {pageSections.map((section) => {
+            const { display, sectionIndex } = section;
+            return (
+              <option key={display} value={sectionIndex}>
+                {display}
               </option>
-            ))}
+            );
+          })}
         </select>
       </div>
     );

diff --git a/frontend/src/components/rec-resource/Closures.tsx b/frontend/src/components/rec-resource/Closures.tsx
@@ -11,7 +11,7 @@ const Closures = forwardRef<HTMLElement, ClosuresProps>(
   ({ comment, siteName }, ref) => {
     if (!comment || !siteName) return null;
     return (
-      <section id="site-description" ref={ref}>
+      <section id="closures" ref={ref}>
         <h2 className="section-heading">Closures</h2>
         <div className="advisory-container">
           <span className="icon-container fw-bold">

diff --git a/frontend/src/components/rec-resource/RecResourcePage.tsx b/frontend/src/components/rec-resource/RecResourcePage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useScrollSpy from 'react-use-scrollspy';
 import BreadCrumbs from '@/components/layout/BreadCrumbs';
@@ -67,7 +67,8 @@ const RecResourcePage = () => {
           setNotFound(true);
         });
     }
-  }, [id]);
+    // eslint-disable-next-line
+  }, []);
 
   const {
     recreation_activity,
@@ -91,14 +92,58 @@ const RecResourcePage = () => {
   const thingsToDoRef = useRef<HTMLElement>(null!);
   const contactRef = useRef<HTMLElement>(null!);
 
-  const sectionRefs: React.RefObject<HTMLElement>[] = [
-    closuresRef,
-    siteDescriptionRef,
-    mapLocationRef,
-    campingRef,
-    thingsToDoRef,
-    contactRef,
-  ];
+  const isThingsToDo = recreation_activity && recreation_activity.length > 0;
+  const isPhotoGallery = photosExample.length > 0;
+  const isClosures = statusComment && formattedName && statusCode === 2;
+
+  const sectionRefs: React.RefObject<HTMLElement>[] = useMemo(
+    () =>
+      [
+        isClosures ? closuresRef : null,
+        description ? siteDescriptionRef : null,
+        mapLocationRef,
+        campingRef,
+        isThingsToDo ? thingsToDoRef : null,
+        contactRef,
+      ].filter((ref) => ref !== null),
+    [description, isClosures, isThingsToDo],
+  );
+
+  const pageSections = useMemo(
+    () =>
+      [
+        isClosures && {
+          link: '#closures',
+          display: 'Closures',
+        },
+        description && {
+          link: '#site-description',
+          display: 'Site Description',
+        },
+        {
+          link: '#maps-and-location',
+          display: 'Maps and Location',
+        },
+        {
+          link: '#camping',
+          display: 'Camping',
+        },
+        isThingsToDo && {
+          link: '#things-to-do',
+          display: 'Things to Do',
+        },
+        {
+          link: '#contact',
+          display: 'Contact',
+        },
+      ]
+        .filter((section) => !!section)
+        .map((section, i) => ({
+          ...section,
+          sectionIndex: i,
+        })),
+    [description, isClosures, isThingsToDo],
+  );
 
   const activeSection = useScrollSpy({
     sectionElementRefs: sectionRefs,
@@ -116,10 +161,6 @@ const RecResourcePage = () => {
     );
   }
 
-  const isActivities = recreation_activity && recreation_activity.length > 0;
-  const isPhotoGallery = photosExample.length > 0;
-  const isClosures = statusComment && formattedName && statusCode === '02';
-
   return (
     <div className="rec-resource-container">
       <div className={`bg-container ${isPhotoGallery ? 'with-gallery' : ''}`}>
@@ -160,38 +201,7 @@ const RecResourcePage = () => {
         <div className="row no-gutters">
           <div className="page-menu--desktop">
             <PageMenu
-              pageSections={[
-                {
-                  sectionIndex: 0,
-                  link: '#site-description',
-                  display: 'Site Description',
-                  visible: !!description,
-                },
-                {
-                  sectionIndex: 1,
-                  link: '#maps-and-location',
-                  display: 'Maps and Location',
-                  visible: true,
-                },
-                {
-                  sectionIndex: 2,
-                  link: '#camping',
-                  display: 'Camping',
-                  visible: true,
-                },
-                {
-                  sectionIndex: 3,
-                  link: '#things-to-do',
-                  display: 'Things to Do',
-                  visible: true,
-                },
-                {
-                  sectionIndex: 4,
-                  link: '#contact',
-                  display: 'Contact',
-                  visible: true,
-                },
-              ]}
+              pageSections={pageSections}
               activeSection={activeSection ?? 0}
               menuStyle="nav"
             />
@@ -215,7 +225,7 @@ const RecResourcePage = () => {
 
             <Camping ref={campingRef} />
 
-            {isActivities && (
+            {isThingsToDo && (
               <ThingsToDo
                 activities={recreation_activity}
                 ref={thingsToDoRef}