Handle available anchors with available contents

GeotrekCE · Jun 30, 2023 · 3c2f191 · 3c2f191
1 parent a5e6cf0
commit 3c2f191
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 16 deletions.
diff --git a/frontend/config/details.json b/frontend/config/details.json
@@ -70,7 +70,7 @@
       { 
         "name": "report",
         "display": true,
-        "anchor": false,
+        "anchor": true,
         "order": 120
       },
       { 

diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
@@ -78,6 +78,7 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
 
   const { sections } = getDetailsConfig();
   const sectionsTrek = sections.trek.filter(({ display }) => display);
+  const anchors = sectionsTrek.filter(({ anchor }) => anchor === true).map(({ name }) => name);
 
   useOnScreenSection({
     sectionsPositions,
@@ -122,6 +123,7 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
           <>
             <div id="details_container">
               <DetailsHeader
+                anchors={anchors}
                 sectionsReferences={sectionsReferences}
                 details={details}
                 type={'TREK'}

diff --git a/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx b/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx
@@ -8,10 +8,11 @@ import { Details } from 'modules/details/interface';
 import { OutdoorCourseDetails } from 'modules/outdoorCourse/interface';
 import { OutdoorSiteDetails } from 'modules/outdoorSite/interface';
 import { TouristicEventDetails } from 'modules/touristicEvent/interface';
-import { DetailsHeaderSection } from '../../useDetails';
+import { DetailsHeaderSection, DetailsSections } from '../../useDetails';
 import { useDetailsHeader } from './useDetailsHeader';
 
 interface DetailsHeaderProps {
+  anchors: Partial<DetailsSections>[];
   sectionsReferences: MutableRefObject<DetailsHeaderSection>;
   details:
     | Details
@@ -23,13 +24,15 @@ interface DetailsHeaderProps {
 }
 
 export const DetailsHeader: React.FC<DetailsHeaderProps> = ({
+  anchors,
   sectionsReferences,
   details,
   type,
 }) => {
   const { detailsHeaderSection, currentSectionId } = useDetailsHeader(sectionsReferences);
+  const availableSection = anchors.filter(item => Object.keys(detailsHeaderSection).includes(item));
   const isMounted = useHasMounted();
-  const sections = Object.keys(detailsHeaderSection)
+  const sections = availableSection
     // Report anchor is in <DetailsDownloadIcons /> below
     .filter(sectionId => sectionId !== 'report');
 
@@ -50,7 +53,7 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = ({
             <li key={sectionId}>
               <a
                 className={cn(
-                  'mx-5 pb-1 border-b-2 border-transparent border-solid transition-all duration-300  hover:text-primary1 hover:border-primary1  focus:text-primary1 focus:border-primary1',
+                  'mx-5 pb-1 border-b-2 border-transparent border-solid transition-all duration-300  hover:text-primary1 hover:border-primary1 focus:text-primary1 focus:border-primary1',
                   currentSectionId === sectionId && isMounted && 'text-primary1 border-primary1',
                 )}
                 href={`#details_${sectionId}`}
@@ -61,7 +64,10 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = ({
           ))}
         </ul>
       )}
-      <DetailsDownloadIcons details={details} hideReport={type !== 'TREK'} />
+      <DetailsDownloadIcons
+        details={details}
+        hideReport={type !== 'TREK' || !availableSection.includes('report')}
+      />
     </nav>
   );
 };
diff --git a/frontend/src/components/pages/details/useDetails.tsx b/frontend/src/components/pages/details/useDetails.tsx
@@ -71,7 +71,7 @@ export const useDetails = (
 
   const { sections } = getDetailsConfig();
 
-  const sectionsTrek = sections.trek.filter(({ display, anchor }) => display === true && anchor);
+  const sectionsTrek = sections.trek.filter(({ display }) => display === true);
 
   const { sectionsReferences, sectionsPositions, useSectionReferenceCallback } =
     useSectionsReferences();

diff --git a/frontend/src/components/pages/site/OutdoorCourseUI.tsx b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
@@ -63,6 +63,9 @@ export const OutdoorCourseUIWithoutContext: React.FC<Props> = ({ outdoorCourseUr
 
   const { sections } = getDetailsConfig();
   const sectionsOutdoorCourse = sections.outdoorCourse.filter(({ display }) => display);
+  const anchors = sectionsOutdoorCourse
+    .filter(({ anchor }) => anchor === true)
+    .map(({ name }) => name);
 
   useOnScreenSection({
     sectionsPositions,
@@ -97,6 +100,7 @@ export const OutdoorCourseUIWithoutContext: React.FC<Props> = ({ outdoorCourseUr
           <>
             <div id="details_container">
               <DetailsHeader
+                anchors={anchors}
                 sectionsReferences={sectionsReferences}
                 details={outdoorCourseContent}
                 type={'OUTDOOR_COURSE'}

diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
@@ -69,6 +69,9 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
 
   const { sections } = getDetailsConfig();
   const sectionsOutdoorSite = sections.outdoorSite.filter(({ display }) => display);
+  const anchors = sectionsOutdoorSite
+    .filter(({ anchor }) => anchor === true)
+    .map(({ name }) => name);
 
   useOnScreenSection({
     sectionsPositions,
@@ -103,6 +106,7 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
           <>
             <div id="details_container">
               <DetailsHeader
+                anchors={anchors}
                 sectionsReferences={sectionsReferences}
                 details={outdoorSiteContent}
                 type={'OUTDOOR_SITE'}

diff --git a/frontend/src/components/pages/site/useOutdoorCourse.tsx b/frontend/src/components/pages/site/useOutdoorCourse.tsx
@@ -23,9 +23,7 @@ export const useOutdoorCourse = (
 
   const { sections } = getDetailsConfig();
 
-  const sectionsOutdoorCourse = sections.outdoorCourse.filter(
-    ({ display, anchor }) => display === true && anchor,
-  );
+  const sectionsOutdoorCourse = sections.outdoorCourse.filter(({ display }) => display === true);
 
   const { sectionsReferences, sectionsPositions, useSectionReferenceCallback } =
     useSectionsReferences();

diff --git a/frontend/src/components/pages/site/useOutdoorSite.tsx b/frontend/src/components/pages/site/useOutdoorSite.tsx
@@ -22,9 +22,7 @@ export const useOutdoorSite = (outdoorSiteUrl: string | string[] | undefined, la
 
   const { sections } = getDetailsConfig();
 
-  const sectionsOutdoorSite = sections.outdoorSite.filter(
-    ({ display, anchor }) => display === true && anchor,
-  );
+  const sectionsOutdoorSite = sections.outdoorSite.filter(({ display }) => display === true);
 
   const { sectionsReferences, sectionsPositions, useSectionReferenceCallback } =
     useSectionsReferences();

diff --git a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
@@ -50,6 +50,9 @@ export const TouristicContentUI: React.FC<TouristicContentUIProps> = ({
 
   const { sections } = getDetailsConfig();
   const sectionsTouristicContent = sections.touristicContent.filter(({ display }) => display);
+  const anchors = sectionsTouristicContent
+    .filter(({ anchor }) => anchor === true)
+    .map(({ name }) => name);
 
   return (
     <>
@@ -70,6 +73,7 @@ export const TouristicContentUI: React.FC<TouristicContentUIProps> = ({
         <>
           <div id="details_container">
             <DetailsHeader
+              anchors={anchors}
               sectionsReferences={sectionsReferences}
               details={touristicContent}
               type={'TOURISTIC_CONTENT'}

diff --git a/frontend/src/components/pages/touristicContent/useTouristicContent.tsx b/frontend/src/components/pages/touristicContent/useTouristicContent.tsx
@@ -36,7 +36,7 @@ export const useTouristicContent = (
 
   const { sections } = getDetailsConfig();
   const sectionsTouristicContent = sections.touristicEvent.filter(
-    ({ display, anchor }) => display === true && anchor,
+    ({ display }) => display === true,
   );
 
   const { sectionsReferences, sectionsPositions, useSectionReferenceCallback } =

diff --git a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
@@ -62,6 +62,9 @@ export const TouristicEventUIWithoutContext: React.FC<Props> = ({
 
   const { sections } = getDetailsConfig();
   const sectionsTouristicEvents = sections.touristicEvent.filter(({ display }) => display);
+  const anchors = sectionsTouristicEvents
+    .filter(({ anchor }) => anchor === true)
+    .map(({ name }) => name);
 
   useOnScreenSection({
     sectionsPositions,
@@ -96,6 +99,7 @@ export const TouristicEventUIWithoutContext: React.FC<Props> = ({
           <>
             <div id="details_container">
               <DetailsHeader
+                anchors={anchors}
                 sectionsReferences={sectionsReferences}
                 details={touristicEventContent}
                 type={'TOURISTIC_EVENT'}

diff --git a/frontend/src/components/pages/touristicEvent/useTouristicEvent.tsx b/frontend/src/components/pages/touristicEvent/useTouristicEvent.tsx
@@ -22,9 +22,7 @@ export const useTouristicEvent = (
   );
 
   const { sections } = getDetailsConfig();
-  const sectionsTouristicEvent = sections.touristicEvent.filter(
-    ({ display, anchor }) => display === true && anchor,
-  );
+  const sectionsTouristicEvent = sections.touristicEvent.filter(({ display }) => display === true);
 
   const { sectionsReferences, sectionsPositions, useSectionReferenceCallback } =
     useSectionsReferences();