From d508a69f62143c40192c266206b76e0c9966edae Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Thu, 15 Jun 2023 11:21:04 +0200
Subject: [PATCH 1/2] Rewrite DetailsChildrenSection component to be more
 generic

---
 .../src/components/pages/details/Details.tsx  |   6 +-
 .../DetailsChildrenSection.tsx                | 155 +++++++++++-------
 .../src/components/pages/details/utils.tsx    |   4 +-
 3 files changed, 99 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
index 7ede598c6..f3e9e70e4 100644
--- a/frontend/src/components/pages/details/Details.tsx
+++ b/frontend/src/components/pages/details/Details.tsx
@@ -189,15 +189,17 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
                     {details.children.length > 0 && (
                       <div ref={setChildrenRef} id="details_trekChildren_ref">
                         <DetailsChildrenSection
-                          trekChildren={details.children.map(child => ({
+                          id="children"
+                          items={details.children.map(child => ({
                             ...child,
                             id: `${child.id}`,
                           }))}
-                          trekId={id}
+                          parentId={id}
                           title={intl.formatMessage(
                             { id: 'details.childrenFullTitle' },
                             { count: details.children.length },
                           )}
+                          type="TREK"
                         />
                       </div>
                     )}
diff --git a/frontend/src/components/pages/details/components/DetailsChildrenSection/DetailsChildrenSection.tsx b/frontend/src/components/pages/details/components/DetailsChildrenSection/DetailsChildrenSection.tsx
index e1c728c0b..c77ba40ae 100644
--- a/frontend/src/components/pages/details/components/DetailsChildrenSection/DetailsChildrenSection.tsx
+++ b/frontend/src/components/pages/details/components/DetailsChildrenSection/DetailsChildrenSection.tsx
@@ -1,71 +1,113 @@
 import { Separator } from 'components/Separator';
 import { TrekResult } from 'modules/results/interface';
+import { OutdoorSiteResult } from 'modules/outdoorSite/interface';
+import { OutdoorCourseResult } from 'modules/outdoorCourse/interface';
 import { ResultCard } from 'components/pages/search/components/ResultCard';
 import styled, { css } from 'styled-components';
 import { desktopOnly, scrollBar, sizes } from 'stylesheet';
+import { cn } from 'services/utils/cn';
 import { marginDetailsChild } from '../../Details';
-import { generateChildrenDetailsUrl } from '../../utils';
+import { generateDetailsUrlFromType } from '../../utils';
 
 interface DetailsChildrenSectionProps {
-  trekChildren: TrekResult[];
+  id?: string;
+  items: TrekResult[] | OutdoorSiteResult[] | OutdoorCourseResult[];
+  parentId?: string;
   title: string;
-  trekId: string;
+  type: 'TREK' | 'OUTDOOR_SITE' | 'OUTDOOR_COURSE';
 }
 
 export const DetailsChildrenSection: React.FC<DetailsChildrenSectionProps> = ({
-  trekChildren,
+  items,
   title,
-  trekId,
+  parentId,
+  type,
+  id = `${type.toLocaleLowerCase()}Children`,
 }) => {
+  const withSteps = parentId !== undefined;
+  const idAttribute = `details_${id}`;
   return (
-    <div className="mt-6 desktop:mt-12" id="details_trekChildren">
-      <div
-        id="details_trekChildrenTitle"
-        className={`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`}
+    <div className="pt-6 desktop:pt-12 scroll-mt-20 desktop:scroll-mt-30" id={idAttribute}>
+      <h2
+        id={`${idAttribute}Title`}
+        className={cn(`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`)}
       >
         {title}
-      </div>
+      </h2>
       <ScrollContainer
-        id="details_trekChildrenScrollContainer"
-        className="flex desktop:flex-col
-        desktop:pl-18 desktop:pr-9 desktop:mr-9 desktop:pt-10
-        mt-4 mb-4 desktop:mb-0 px-4
-        items-stretch
-        overflow-x-scroll desktop:overflow-x-hidden
-        overflow-y-hidden desktop:overflow-y-scroll
-        flex-nowrap max-h-screen
-        "
+        id={`${idAttribute}ScrollContainer`}
+        className={cn(
+          `
+          flex desktop:flex-col flex-nowrap items-stretch
+          my-4 px-4
+          desktop:mr-9 desktop:mb-0 desktop:pt-10 desktop:pr-9 desktop:pl-18
+          overflow-x-auto desktop:overflow-x-hidden
+          overflow-y-hidden desktop:overflow-y-auto
+          scroll-smooth snap-x
+          `,
+          withSteps && '[counter-reset:steps]',
+        )}
+        as={withSteps ? 'ol' : 'ul'}
       >
-        {trekChildren.map((trekChild, i) => (
-          <div key={i}>
-            <div className="hidden desktop:block">
-              <Step number={i + 1} />
-            </div>
-            <div
-              className={`mr-3 desktop:ml-5.5 desktop:mr-0 desktop:pl-12 relative ${
-                i < trekChildren.length - 1
-                  ? 'desktop:border-solid desktop:border-primary1 desktop:border-l-3'
-                  : ''
-              }`}
-            >
-              <div className="relative desktop:-top-20">
-                <ResultCard
-                  id={`${trekChild.id}`}
-                  hoverId={`DETAILS-TREK_CHILDREN-${trekChild.id}`}
-                  type="TREK"
-                  place={trekChild.place}
-                  title={trekChild.name}
-                  tags={trekChild.tags}
-                  attachments={trekChild.attachments}
-                  badgeIconUri={trekChild.category?.pictogramUri}
-                  badgeName={trekChild.category?.label}
-                  informations={trekChild.informations}
-                  redirectionUrl={generateChildrenDetailsUrl(trekChild.id, trekChild.name, trekId)}
-                  className="w-60 desktop:w-auto"
-                />
-              </div>
-            </div>
-          </div>
+        {items.map(item => (
+          <li
+            className={cn(
+              'pb-6 mx-1',
+              withSteps &&
+                `
+                flex
+                relative
+                desktop:ml-6
+                [counter-increment:steps]
+                before:content-[counters(steps,'.')]
+                before:hidden before:desktop:block
+                before:relative
+                before:z-10
+                before:mt-8
+                before:mb-auto
+                before:-ml-6
+                before:mr-6
+                before:py-2 before:px-4
+                before:rounded-full
+                before:border-solid before:border-primary1 before:border-3
+                before:text-H4 before:font-bold before:text-primary1
+                before:shadow-md
+                before:bg-white
+                after:content-['']
+                after:hidden after:desktop:block
+                after:w-1
+                after:bg-primary1
+                after:absolute
+                after:top-0
+                after:bottom-0
+                after:-left-2p
+                first:after:top-12
+                last:after:h-8
+                snap-center
+              `,
+            )}
+            key={`${item.type}-${item.id}`}
+          >
+            <ResultCard
+              id={`${item.id}`}
+              hoverId={`${item.type}-${item.id}`}
+              type={type}
+              place={item.place}
+              title={item.name}
+              tags={item.tags}
+              attachments={item.attachments}
+              badgeIconUri={'category' in item ? item.category?.pictogramUri : undefined}
+              badgeName={'category' in item ? item.category?.label : undefined}
+              informations={item.informations}
+              redirectionUrl={generateDetailsUrlFromType(
+                item.type,
+                item.id,
+                item.name,
+                withSteps ? { parentId } : undefined,
+              )}
+              className="w-60 desktop:w-auto"
+            />
+          </li>
         ))}
       </ScrollContainer>
       <div className={marginDetailsChild}>
@@ -77,7 +119,7 @@ export const DetailsChildrenSection: React.FC<DetailsChildrenSectionProps> = ({
 
 const offsetTopForTitle = 130;
 
-const ScrollContainer = styled.div`
+const ScrollContainer = styled.ul`
   &::-webkit-scrollbar {
     ${scrollBar.root}
   }
@@ -90,16 +132,3 @@ const ScrollContainer = styled.div`
     );
   `)}
 `;
-
-const Step: React.FC<{ number: number }> = ({ number }) => (
-  <div
-    className="h-8 w-8 desktop:h-12 desktop:w-12
-    rounded-full
-    flex items-center justify-center
-    border-solid border-primary1 border-3
-    text-P1 desktop:text-H4 font-bold text-primary1
-    shadow-md"
-  >
-    {number}
-  </div>
-);
diff --git a/frontend/src/components/pages/details/utils.tsx b/frontend/src/components/pages/details/utils.tsx
index c4c9cf211..ccc0b120d 100644
--- a/frontend/src/components/pages/details/utils.tsx
+++ b/frontend/src/components/pages/details/utils.tsx
@@ -147,7 +147,9 @@ export const generateDetailsUrlFromType = (
   type: 'TREK' | 'TOURISTIC_CONTENT' | 'TOURISTIC_EVENT' | 'OUTDOOR_SITE' | 'OUTDOOR_COURSE',
   id: number | string,
   title: string,
+  params?: Record<string, string>,
 ): string => {
+  const searchParams = params ? `?${new URLSearchParams(params).toString()}` : '';
   const titleWithNoSpace = convertStringForSitemap(title);
-  return `${routes[type]}/${id}-${encodeURI(titleWithNoSpace)}`;
+  return `${routes[type]}/${id}-${encodeURI(titleWithNoSpace)}${searchParams}`;
 };

From f89154dd0d55e8186f5bed5422eb723537060847 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Thu, 15 Jun 2023 11:23:57 +0200
Subject: [PATCH 2/2] Use DetailsChildrenSection for all outdoor site children
 cards

---
 .../components/pages/site/OutdoorSiteUI.tsx   | 39 +++++-----
 .../AccessChildrenSection/index.tsx           | 78 -------------------
 .../OutdoorCoursesChildrenSection/index.tsx   | 74 ------------------
 .../OutdoorSiteChildrenSection/index.tsx      | 78 -------------------
 4 files changed, 20 insertions(+), 249 deletions(-)
 delete mode 100644 frontend/src/components/pages/site/components/AccessChildrenSection/index.tsx
 delete mode 100644 frontend/src/components/pages/site/components/OutdoorCoursesChildrenSection/index.tsx
 delete mode 100644 frontend/src/components/pages/site/components/OutdoorSiteChildrenSection/index.tsx

diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
index 780ef3d2c..ba7fc1fb2 100644
--- a/frontend/src/components/pages/site/OutdoorSiteUI.tsx
+++ b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
@@ -13,10 +13,8 @@ import { DetailsHeaderMobile, marginDetailsChild } from 'components/pages/detail
 import { useOnScreenSection } from 'components/pages/details/hooks/useHighlightedSection';
 import { generateTouristicContentUrl, HtmlText } from 'components/pages/details/utils';
 import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
-import { AccessChildrenSection } from 'components/pages/site/components/AccessChildrenSection';
-import { OutdoorCoursesChildrenSection } from 'components/pages/site/components/OutdoorCoursesChildrenSection';
-import { OutdoorSiteChildrenSection } from 'components/pages/site/components/OutdoorSiteChildrenSection';
-import React, { useMemo, useRef } from 'react';
+import { DetailsChildrenSection } from 'components/pages/details/components/DetailsChildrenSection';
+import { useMemo, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Loader from 'components/Loader';
 import { useMediaPredicate } from 'react-media-hook';
@@ -218,28 +216,30 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
                       </div>
                     )}
 
-                    {Number(outdoorSiteContent?.children?.length) > 0 && (
+                    {Number(outdoorSiteContent.children?.length) > 0 && (
                       <div ref={setExperienceRef} id="details_trekChildren_ref">
-                        <OutdoorSiteChildrenSection
-                          outdoorChildren={outdoorSiteContent.children}
-                          id={id}
+                        <DetailsChildrenSection
+                          id="experiences"
+                          items={outdoorSiteContent.children}
                           title={intl.formatMessage(
                             { id: 'outdoorSite.sitesFullTitle' },
-                            { count: Number(outdoorSiteContent.children.length) },
+                            { count: outdoorSiteContent.children.length },
                           )}
+                          type="OUTDOOR_SITE"
                         />
                       </div>
                     )}
 
-                    {Number(outdoorSiteContent?.courses?.length) > 0 && (
+                    {Number(outdoorSiteContent.courses?.length) > 0 && (
                       <div ref={setCoursesRef} id="details_trekChildren_ref">
-                        <OutdoorCoursesChildrenSection
-                          outdoorChildren={outdoorSiteContent.courses}
-                          id={id}
+                        <DetailsChildrenSection
+                          id="courses"
+                          items={outdoorSiteContent.courses}
                           title={intl.formatMessage(
                             { id: 'outdoorSite.coursesFullTitle' },
-                            { count: Number(outdoorSiteContent.courses.length) },
+                            { count: outdoorSiteContent.courses.length },
                           )}
+                          type="OUTDOOR_COURSE"
                         />
                       </div>
                     )}
@@ -304,15 +304,16 @@ const OutdoorSiteUIWithoutContext: React.FC<Props> = ({ outdoorSiteUrl, language
                       </DetailsSection>
                     )}
 
-                    {Number(outdoorSiteContent?.access?.length) > 0 && (
+                    {Number(outdoorSiteContent.access?.length) > 0 && (
                       <div ref={setAccessRef} id="details_trekChildren_ref">
-                        <AccessChildrenSection
-                          accessChildren={outdoorSiteContent?.access}
-                          id={id}
+                        <DetailsChildrenSection
+                          id="access"
+                          items={outdoorSiteContent.access}
                           title={intl.formatMessage(
                             { id: 'outdoorSite.accessFullTitle' },
-                            { count: Number(outdoorSiteContent?.access?.length) },
+                            { count: outdoorSiteContent.access.length },
                           )}
+                          type="TREK"
                         />
                       </div>
                     )}
diff --git a/frontend/src/components/pages/site/components/AccessChildrenSection/index.tsx b/frontend/src/components/pages/site/components/AccessChildrenSection/index.tsx
deleted file mode 100644
index f1097852d..000000000
--- a/frontend/src/components/pages/site/components/AccessChildrenSection/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { marginDetailsChild } from 'components/pages/details/Details';
-import { generateResultDetailsUrl } from 'components/pages/search/utils';
-import { Separator } from 'components/Separator';
-import { ResultCard } from 'components/pages/search/components/ResultCard';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { desktopOnly, scrollBar, sizes } from 'stylesheet';
-import { TrekResult } from '../../../../../modules/results/interface';
-
-interface DetailsChildrenSectionProps {
-  accessChildren: TrekResult[];
-  title: string;
-  id: string;
-}
-
-export const AccessChildrenSection: React.FC<DetailsChildrenSectionProps> = ({
-  accessChildren,
-  title,
-}) => {
-  return (
-    <div className="mt-6 desktop:mt-12" id="details_trekChildren">
-      <div
-        id="details_trekChildrenTitle"
-        className={`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`}
-      >
-        {title}
-      </div>
-      <ScrollContainer
-        id="details_trekChildrenScrollContainer"
-        className="flex desktop:flex-col
-        desktop:pl-18 desktop:pr-9 desktop:mr-9 desktop:pt-10
-        mt-4 mb-4 desktop:mb-0 px-4
-        items-stretch
-        overflow-x-scroll desktop:overflow-x-hidden
-        overflow-y-hidden desktop:overflow-y-scroll
-        flex-nowrap max-h-screen
-        "
-      >
-        {accessChildren.map(trekChild => (
-          <div key={trekChild.id} className={`mb-6`}>
-            <ResultCard
-              id={`${trekChild.id}`}
-              hoverId={`DETAILS-TREK-${trekChild.id}`}
-              type="TREK"
-              place={''}
-              title={trekChild.name}
-              tags={trekChild.tags}
-              attachments={trekChild.attachments}
-              badgeIconUri={trekChild.category?.pictogramUri}
-              informations={trekChild.informations}
-              redirectionUrl={generateResultDetailsUrl(trekChild.id, trekChild.name)}
-              className="w-60 desktop:w-auto"
-            />
-          </div>
-        ))}
-      </ScrollContainer>
-      <div className={marginDetailsChild}>
-        <Separator />
-      </div>
-    </div>
-  );
-};
-
-const offsetTopForTitle = 130;
-
-const ScrollContainer = styled.div`
-  &::-webkit-scrollbar {
-    ${scrollBar.root}
-  }
-  &::-webkit-scrollbar-thumb {
-    ${scrollBar.thumb}
-  }
-  ${desktopOnly(css`
-    max-height: calc(
-      100vh - ${sizes.desktopHeader + sizes.detailsHeaderDesktop + offsetTopForTitle}px
-    );
-  `)}
-`;
diff --git a/frontend/src/components/pages/site/components/OutdoorCoursesChildrenSection/index.tsx b/frontend/src/components/pages/site/components/OutdoorCoursesChildrenSection/index.tsx
deleted file mode 100644
index 5754b8a40..000000000
--- a/frontend/src/components/pages/site/components/OutdoorCoursesChildrenSection/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { marginDetailsChild } from 'components/pages/details/Details';
-import { generateOutdoorCourseUrl } from 'components/pages/details/utils';
-import { Separator } from 'components/Separator';
-import { ResultCard } from 'components/pages/search/components/ResultCard';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { desktopOnly, scrollBar, sizes } from 'stylesheet';
-import { OutdoorCourseResult } from '../../../../../modules/outdoorCourse/interface';
-
-interface DetailsChildrenSectionProps {
-  outdoorChildren: OutdoorCourseResult[];
-  title: string;
-  id: string;
-}
-
-export const OutdoorCoursesChildrenSection: React.FC<DetailsChildrenSectionProps> = ({
-  outdoorChildren,
-  title,
-}) => {
-  return (
-    <div className="mt-6 desktop:mt-12" id="details_trekChildren">
-      <div
-        id="details_trekChildrenTitle"
-        className={`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`}
-      >
-        {title}
-      </div>
-      <ScrollContainer
-        id="details_trekChildrenScrollContainer"
-        className="flex desktop:flex-col items-stretch
-        overflow-x-scroll desktop:overflow-x-hidden
-        overflow-y-hidden desktop:overflow-y-scroll flex-nowrap
-        pb-5 mt-4 mb-2 desktop:mb-0
-        px-4 desktop:pl-18 desktop:pr-9 desktop:mr-9"
-      >
-        {outdoorChildren.map(trekChild => (
-          <div key={trekChild.id} className={`mb-6 mx-1`}>
-            <ResultCard
-              id={`${trekChild.id}`}
-              hoverId={trekChild.id}
-              type="OUTDOOR_COURSE"
-              place={''}
-              title={trekChild.name}
-              tags={[]}
-              attachments={trekChild.attachments}
-              informations={trekChild.informations}
-              redirectionUrl={generateOutdoorCourseUrl(trekChild.id, trekChild.name)}
-              className="w-60 desktop:w-auto"
-            />
-          </div>
-        ))}
-      </ScrollContainer>
-      <div className={marginDetailsChild}>
-        <Separator />
-      </div>
-    </div>
-  );
-};
-
-const offsetTopForTitle = 130;
-
-const ScrollContainer = styled.div`
-  &::-webkit-scrollbar {
-    ${scrollBar.root}
-  }
-  &::-webkit-scrollbar-thumb {
-    ${scrollBar.thumb}
-  }
-  ${desktopOnly(css`
-    max-height: calc(
-      100vh - ${sizes.desktopHeader + sizes.detailsHeaderDesktop + offsetTopForTitle}px
-    );
-  `)}
-`;
diff --git a/frontend/src/components/pages/site/components/OutdoorSiteChildrenSection/index.tsx b/frontend/src/components/pages/site/components/OutdoorSiteChildrenSection/index.tsx
deleted file mode 100644
index e8b734fd5..000000000
--- a/frontend/src/components/pages/site/components/OutdoorSiteChildrenSection/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { marginDetailsChild } from 'components/pages/details/Details';
-import { generateOutdoorSiteUrl } from 'components/pages/details/utils';
-import { Separator } from 'components/Separator';
-import { ResultCard } from 'components/pages/search/components/ResultCard';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { desktopOnly, scrollBar, sizes } from 'stylesheet';
-import { OutdoorSiteResult } from '../../../../../modules/outdoorSite/interface';
-
-interface DetailsChildrenSectionProps {
-  outdoorChildren: OutdoorSiteResult[];
-  title: string;
-  id: string;
-}
-
-export const OutdoorSiteChildrenSection: React.FC<DetailsChildrenSectionProps> = ({
-  outdoorChildren,
-  title,
-}) => {
-  return (
-    <div className="mt-6 desktop:mt-12" id="details_trekChildren">
-      <div
-        id="details_trekChildrenTitle"
-        className={`text-Mobile-H1 desktop:text-H2 font-bold ${marginDetailsChild}`}
-      >
-        {title}
-      </div>
-      <ScrollContainer
-        id="details_trekChildrenScrollContainer"
-        className="flex desktop:flex-col
-        desktop:pl-18 desktop:pr-9 desktop:mr-9 desktop:pt-10
-        mt-4 mb-4 desktop:mb-0 px-4
-        items-stretch
-        overflow-x-scroll desktop:overflow-x-hidden
-        overflow-y-hidden desktop:overflow-y-scroll
-        flex-nowrap max-h-screen
-        "
-      >
-        {outdoorChildren.map(trekChild => (
-          <div key={trekChild.id} className={`mb-6 mx-1`}>
-            <ResultCard
-              id={`${trekChild.id}`}
-              hoverId={trekChild.id}
-              type="OUTDOOR_SITE"
-              place={''}
-              title={trekChild.name}
-              tags={trekChild.tags}
-              attachments={trekChild.attachments}
-              badgeIconUri={trekChild.category?.pictogramUri}
-              badgeName={trekChild.category?.label}
-              redirectionUrl={generateOutdoorSiteUrl(trekChild.id, trekChild.name)}
-              className="w-60 desktop:w-auto"
-            />
-          </div>
-        ))}
-      </ScrollContainer>
-      <div className={marginDetailsChild}>
-        <Separator />
-      </div>
-    </div>
-  );
-};
-
-const offsetTopForTitle = 130;
-
-const ScrollContainer = styled.div`
-  &::-webkit-scrollbar {
-    ${scrollBar.root}
-  }
-  &::-webkit-scrollbar-thumb {
-    ${scrollBar.thumb}
-  }
-  ${desktopOnly(css`
-    max-height: calc(
-      100vh - ${sizes.desktopHeader + sizes.detailsHeaderDesktop + offsetTopForTitle}px
-    );
-  `)}
-`;