GeotrekCE · dtrucs · Nov 12, 2024 · Oct 10, 2024 · Oct 9, 2024 · Oct 15, 2024
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.23.2 (2024-11-12)
+
+**✨ Improvements**
+
+- Optimize backpack icon (#1287)
+- Adapt touristic event module to display dates correctly (#1288)
+- Improve styling spacing HDviewpoint annotation (#1298)
+
+**🐛 Fixes**
+
+- Fix of URI encoding for paths containing specific characters (#1205 and #1077)
+- Fix map zoomControl displayed on mobile viewport (#1290)
+- Clear debounces during cleanup useEffect (#1283)
+- Build "Show More" menu items only if there are enough (#1296)
+- Fix touristicContents links for activityBar - regression since 3.22.0 (#1299)
+
 ## 3.23.1 (2024-10-14)
 
 **🔧 Maintenance**

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.23.1",
+  "version": "3.23.2",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",

diff --git a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
@@ -26,7 +26,7 @@ export const ActivitySearchFilter: React.FC<Props> = ({
     if (type === 'PRACTICE') return PRACTICE_ID;
     if (type === 'OUTDOOR_PRACTICE') return OUTDOOR_ID;
     if (type === 'TOURISTIC_EVENT_TYPE') return EVENT_ID;
-    if (type === 'CATEGORIES') return CATEGORY_ID;
+    if (type === 'CATEGORY') return CATEGORY_ID;
 
     return null;
   };

diff --git a/frontend/src/components/Icons/BackPack/index.tsx b/frontend/src/components/Icons/BackPack/index.tsx
diff --git a/frontend/src/components/InlineMenu/Menu.tsx b/frontend/src/components/InlineMenu/Menu.tsx
@@ -24,7 +24,10 @@ export const Menu: React.FC<MenuProps> = ({
 }) => {
   const intl = useIntl();
   const items = useMemo(() => {
-    if (menuItems.some(({ children = [] }) => children.length)) {
+    if (
+      menuItems.length < primaryItemsNumber ||
+      menuItems.some(({ children = [] }) => children.length)
+    ) {
       return menuItems;
     }
     // If there are no children, we use "primaryItemsNumber" to split menu with "See More" button

diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
@@ -1,5 +1,4 @@
 import { Header } from 'components/Header';
-import ConditionallyRender from 'components/ConditionallyRender';
 import Loader from 'components/Loader';
 import Head from 'next/head';
 import { useNavigationLoader } from './useRedirection';
@@ -12,16 +11,10 @@ export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <>
       <Head>{scriptsHeader && <>{scriptsHeader}</>}</Head>
-      <div className="flex flex-col min-h-full">
+      <div className="flex flex-col min-h-dvh">
         <Header />
-        <main className="relative grow">
-          <ConditionallyRender client>
-            <Loader loaded={!isNavigationLoading} className="z-loader absolute inset-0">
-              {children}
-            </Loader>
-          </ConditionallyRender>
-          <ConditionallyRender server>{children}</ConditionallyRender>
-        </main>
+        <main className="relative grow">{children}</main>
+        <Loader loaded={!isNavigationLoading} className="bg-white z-loader fixed inset-0"></Loader>
       </div>
       {scriptsFooter && <>{scriptsFooter}</>}
     </>

diff --git a/frontend/src/components/Loader/Loader.tsx b/frontend/src/components/Loader/Loader.tsx
@@ -1,9 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 import { cn } from 'services/utils/cn';
 
-type LoaderProps = {
-  className?: string;
-  children?: React.ReactNode;
+type LoaderProps = React.HTMLAttributes<HTMLDivElement> & {
   loaded?: boolean;
 };
 
@@ -47,21 +45,25 @@ const classNameAnimation = (index: number) => {
 };
 
 // Loader from https://loading.io/css/
-const Loader: React.FC<LoaderProps> = ({ className = '', loaded = false, children = '' }) => {
+const Loader: React.FC<LoaderProps> = ({ className, loaded = false, children = null }) => {
   if (loaded === true) {
-    return <>{children}</>;
+    return children;
   }
   return (
-    <div className={`flex size-full justify-center items-center text-primary1 ${className}`}>
-      <p className="sr-only" aria-live="polite">
+    <div
+      className={cn('flex size-full justify-center items-center text-primary1', className)}
+      role="status"
+      aria-live="polite"
+    >
+      <p className="sr-only">
         <FormattedMessage id="loading" />
       </p>
       <div className="relative inline-block size-15">
         {Array.from({ length: 12 }, (_, index) => (
           <div
             key={index}
             className={cn(
-              'animate-[pulse_1.2s_linear_infinite] origin-[30px_30px]',
+              'animate-[pulse_1.2s_linear_infinite] origin-[30px_30px] will-change-transform',
               classNameAnimation(index),
               "after:content-[''] after:block after:absolute after:top-1 after:left-7 after:w-1 after:h-3 after:rounded-lg after:bg-current",
             )}

diff --git a/frontend/src/components/Map/SearchMap/MoveHandler.tsx b/frontend/src/components/Map/SearchMap/MoveHandler.tsx
@@ -26,6 +26,7 @@ const MoveHandler: React.FC<Props> = ({ onMove }) => {
     map.on('moveend', handleMove);
     return () => {
       map.off('moveend', handleMove);
+      handleMove.clear();
     };
   }, [handleMove, map]);
 

diff --git a/frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx b/frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx
@@ -40,9 +40,9 @@ const MetaData = ({ properties }: { properties: GeoJsonProperties }) => {
 
   return (
     <Tooltip>
-      <span className="flex flex-wrap items-center gap-1 px-1">
+      <span className="flex flex-wrap items-center gap-1 p-2">
         {Boolean(properties.category?.label) && (
-          <span className="flex gap-2 font-bold">
+          <span className="flex gap-2 font-bold pr-6">
             <Icon pictogramUri={pictogramUri} />
             <span>{properties.category.label}</span>
           </span>

diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
@@ -17,7 +17,10 @@ const SearchMapDynamicComponentWithoutMemo: React.FC<SearchMapProps> = props =>
   );
 };
 
-export const SearchMapDynamicComponent = memo(SearchMapDynamicComponentWithoutMemo, () => true);
+export const SearchMapDynamicComponent = memo(
+  SearchMapDynamicComponentWithoutMemo,
+  (oldProps, nextProps) => oldProps.hasZoomControl === nextProps.hasZoomControl,
+);
 
 const DetailsMapDynamicComponentWithoutMemo: React.FC<DetailsMapProps> = props => {
   const DetailsMap = dynamic(() => import('./DetailsMap/DetailsMap'), {

diff --git a/frontend/src/components/pages/details/components/DetailsCard/useDetailsCard.tsx b/frontend/src/components/pages/details/components/DetailsCard/useDetailsCard.tsx
@@ -66,6 +66,7 @@ export const useDetailsCard = (hasMedia = false) => {
     debouncedResize();
     global.addEventListener('resize', handleResize);
     return () => {
+      debouncedResize.clear();
       global.removeEventListener('resize', handleResize);
     };
   }, [debouncedResize]);

diff --git a/frontend/src/components/pages/details/components/DetailsDates.tsx b/frontend/src/components/pages/details/components/DetailsDates.tsx
@@ -0,0 +1,92 @@
+import { FormattedMessage, useIntl } from 'react-intl';
+
+type DetailsDatesProps = {
+  dates?: {
+    hasEndTime: boolean;
+    hasBeginTime: boolean;
+    beginDate: string;
+    endDate: string;
+  };
+};
+
+const DetailsDates: React.FC<DetailsDatesProps> = ({ dates }) => {
+  const intl = useIntl();
+  if (!dates) {
+    return null;
+  }
+
+  const { beginDate, endDate, hasBeginTime, hasEndTime } = dates;
+
+  const dateFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  } as Intl.DateTimeFormatOptions;
+
+  const timeFormatOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+  } as Intl.DateTimeFormatOptions;
+
+  const dateTimeFormatOptions = {
+    ...dateFormatOptions,
+    ...timeFormatOptions,
+  };
+
+  if (beginDate.split('T')[0] === endDate.split('T')[0]) {
+    if (!hasEndTime) {
+      // Output ex : "on November 13, 2024"
+      return (
+        <FormattedMessage
+          id={'dates.singleDate'}
+          values={{
+            date: new Intl.DateTimeFormat(
+              intl.locale,
+              hasBeginTime ? dateTimeFormatOptions : dateFormatOptions,
+            ).format(new Date(beginDate)),
+          }}
+        />
+      );
+    }
+    // Output ex : "on November 13, 2024 from 10:00 to 12:00"
+    return (
+      <>
+        <FormattedMessage
+          id={'dates.singleDate'}
+          values={{
+            date: new Intl.DateTimeFormat(intl.locale).format(new Date(beginDate)),
+          }}
+        />{' '}
+        <FormattedMessage
+          id={'dates.rangeTime'}
+          values={{
+            beginTime: new Intl.DateTimeFormat(intl.locale, timeFormatOptions).format(
+              new Date(beginDate),
+            ),
+            endTime: new Intl.DateTimeFormat(intl.locale, timeFormatOptions).format(
+              new Date(endDate),
+            ),
+          }}
+        />
+      </>
+    );
+  }
+  // Output ex : "from November 13, 2024 to December 25, 2024"
+  return (
+    <FormattedMessage
+      id={'dates.multipleDates'}
+      values={{
+        beginDate: new Intl.DateTimeFormat(
+          intl.locale,
+          hasBeginTime ? dateTimeFormatOptions : dateFormatOptions,
+        ).format(new Date(beginDate)),
+        endDate: new Intl.DateTimeFormat(
+          intl.locale,
+          hasEndTime ? dateTimeFormatOptions : dateFormatOptions,
+        ).format(new Date(endDate)),
+      }}
+    />
+  );
+};
+
+export default DetailsDates;
diff --git a/frontend/src/components/pages/details/components/DetailsGear/DetailsGear.tsx b/frontend/src/components/pages/details/components/DetailsGear/DetailsGear.tsx
@@ -1,23 +1,23 @@
 import parse from 'html-react-parser';
 import { BackPack } from 'components/Icons/BackPack';
+import { cn } from 'services/utils/cn';
+import { HTMLAttributes } from 'react';
 
-interface DetailsGearProps {
-  className?: string;
+interface DetailsGearProps extends HTMLAttributes<HTMLDivElement> {
   text: string;
 }
 
 export const DetailsGear: React.FC<DetailsGearProps> = ({ className, text }) => {
   return (
     <div
       id="details_recommandationGear"
-      className={`py-4 desktop:py-5 px-3 desktop:px-4 flex
-      rounded-2xl border-2 border-solid border-greyDarkColored
-      ${className ?? ''}`}
+      className={cn(
+        'py-4 desktop:py-5 px-3 desktop:px-4 gap-2 desktop:gap-4 flex justify-start items-center rounded-2xl border-2 border-solid border-greyDarkColored',
+        className,
+      )}
     >
-      <div className="mr-2 desktop:mr-4 shrink-0 size-6 desktop:size-12 self-start">
-        <BackPack />
-      </div>
-      <div className="text-greyDarkColored desktop:font-bold text-Mobile-C2 desktop:text-P1 my-auto">
+      <BackPack className="shrink-0 size-6 desktop:size-12" aria-hidden />
+      <div className="text-greyDarkColored desktop:font-bold text-Mobile-C2 desktop:text-P1">
         <div className="content-WYSIWYG">{parse(text)}</div>
       </div>
     </div>