Merge pull request #740 from GeotrekCE/develop

Develop > Main / 3.10.1
GeotrekCE · Jul 7, 2022 · 8be39af · 8be39af
2 parents 5c23602 + cb3658d
commit 8be39af
Show file tree

Hide file tree

Showing 39 changed files with 486 additions and 182 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,22 @@
 # Changelog
 
+3.10.1 (2022-07-08)
+-------------------
+
+**🚀 New features**
+
+* Add date filters to events (#567)
+
+**🐛 Fixes**
+
+* Fix entities HTML escapement for styles injection (#548 / #705)
+* Call language locales once on runtime (#553)
+* Fix offline map downloading (#738)
+
+**🔧 Maintenance**
+
+* Upgrade Leaflet.offline to version 2.2.0
+
 3.10.0 (2022-07-01)
 -------------------
 

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -10,6 +10,7 @@ const runtimeCachingStrategy = require('./cache');
 const headerConfig = require('./config/header.json');
 const customHeaderConfig = require('./customization/config/header.json');
 const { getConfig, getTemplates } = require('./src/services/getConfig');
+const { getLocales } = require('./src/services/getLocales');
 
 const mergedHeaderConfig = {
   ...headerConfig,
@@ -30,7 +31,8 @@ module.exports = withPlugins(plugins, {
       TweenLite: 'gsap/src/uncompressed/TweenLite.js',
       TimelineLite: 'gsap/src/uncompressed/TimelineLite.js',
       BezierPlugin: 'gsap/src/uncompressed/plugins/BezierPlugin.js',
-      DirectionalRotationPlugin: 'gsap/src/uncompressed/plugins/DirectionalRotationPlugin.js',
+      DirectionalRotationPlugin:
+        'gsap/src/uncompressed/plugins/DirectionalRotationPlugin.js',
     });
 
     config.module.rules.push({
@@ -62,12 +64,30 @@ module.exports = withPlugins(plugins, {
     defaultLocale: mergedHeaderConfig.menu.defaultLanguage,
   },
   publicRuntimeConfig: {
-    homeBottomHtml: getTemplates('../html/homeBottom.html', mergedHeaderConfig.menu.supportedLanguages),
-    homeTopHtml: getTemplates('../html/homeTop.html', mergedHeaderConfig.menu.supportedLanguages),
-    headerTopHtml: getTemplates('../html/headerTop.html', mergedHeaderConfig.menu.supportedLanguages),
-    headerBottomHtml: getTemplates('../html/headerBottom.html', mergedHeaderConfig.menu.supportedLanguages),
-    footerTopHtml: getTemplates('../html/footerTop.html', mergedHeaderConfig.menu.supportedLanguages),
-    footerBottomHtml: getTemplates('../html/footerBottom.html', mergedHeaderConfig.menu.supportedLanguages),
+    homeBottomHtml: getTemplates(
+      '../html/homeBottom.html',
+      mergedHeaderConfig.menu.supportedLanguages,
+    ),
+    homeTopHtml: getTemplates(
+      '../html/homeTop.html',
+      mergedHeaderConfig.menu.supportedLanguages,
+    ),
+    headerTopHtml: getTemplates(
+      '../html/headerTop.html',
+      mergedHeaderConfig.menu.supportedLanguages,
+    ),
+    headerBottomHtml: getTemplates(
+      '../html/headerBottom.html',
+      mergedHeaderConfig.menu.supportedLanguages,
+    ),
+    footerTopHtml: getTemplates(
+      '../html/footerTop.html',
+      mergedHeaderConfig.menu.supportedLanguages,
+    ),
+    footerBottomHtml: getTemplates(
+      '../html/footerBottom.html',
+      mergedHeaderConfig.menu.supportedLanguages,
+    ),
     scriptsHeaderHtml: getConfig('../html/scriptsHeader.html', false),
     scriptsFooterHtml: getConfig('../html/scriptsFooter.html', false),
     style: getConfig('../theme/style.css', false),
@@ -79,5 +99,6 @@ module.exports = withPlugins(plugins, {
     filter: getConfig('filter.json', true),
     footer: getConfig('footer.json', true),
     manifest: getConfig('manifest.json', true),
+    locales: getLocales(mergedHeaderConfig.menu.supportedLanguages),
   },
 });
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -57,7 +57,7 @@
     "leaflet-boundary-canvas": "^1.0.0",
     "leaflet.locatecontrol": "0.74.0",
     "leaflet.markercluster": "1.5.1",
-    "leaflet.offline": "^2.0.0-beta.3",
+    "leaflet.offline": "^2.2.0",
     "lodash": "4.17.21",
     "next": "12",
     "next-compose-plugins": "^2.2.1",

diff --git a/frontend/src/components/MobileFilterMenu/MobileFilterSubMenu.tsx b/frontend/src/components/MobileFilterMenu/MobileFilterSubMenu.tsx
@@ -5,14 +5,13 @@ import { groupBy } from 'lodash';
 import styled from 'styled-components';
 
 import { ArrowLeft } from 'components/Icons/ArrowLeft';
-import { FilterCategory, FilterState, Option } from 'modules/filters/interface';
+import { DateFilter, FilterCategory, FilterState, Option } from 'modules/filters/interface';
 import React from 'react';
 // @ts-ignore Not official but useful to reduce bundle size
 import Slide from 'react-burger-menu/lib/menus/slide';
 import { colorPalette } from 'stylesheet';
 
 import { FormattedMessage } from 'react-intl';
-import { getGlobalConfig } from 'modules/utils/api.config';
 import { CloseButton } from './CloseButton';
 
 interface Props {
@@ -22,6 +21,8 @@ interface Props {
   setFilterSelectedOptions: (filterId: string, options: Option[]) => void;
   resultsNumber: number;
   resetFilter: () => void;
+  dateFilter: DateFilter;
+  setDateFilter: (dFilter: DateFilter) => void;
 }
 
 export const MobileFilterSubMenu: React.FC<Props> = ({
@@ -31,6 +32,8 @@ export const MobileFilterSubMenu: React.FC<Props> = ({
   setFilterSelectedOptions,
   resultsNumber,
   resetFilter,
+  dateFilter,
+  setDateFilter,
 }) => {
   const categories: FilterCategory | undefined = FILTERS_CATEGORIES.find(i => i.id === filterId);
 
@@ -60,15 +63,6 @@ export const MobileFilterSubMenu: React.FC<Props> = ({
       ) ?? {},
   );
 
-  const getFilterLabel = (key: string, selectedOptions: Option[]) => {
-    if (key !== 'undefined') {
-      return key;
-    }
-    return getGlobalConfig().groupTreksAndOutdoorFilters
-      ? selectedOptions?.map(({ label }) => label).join('/') ?? null
-      : null;
-  };
-
   const filtersToDisplay = filtersState.filter(({ id }) => filters?.includes(id));
 
   /* * The library default behaviour is to have a fixed close icon which * made the icon overlap
@@ -103,23 +97,31 @@ export const MobileFilterSubMenu: React.FC<Props> = ({
             item={state}
             setFilterSelectedOptions={setFilterSelectedOptions}
             hideLabel
+            dateFilter={dateFilter}
+            setDateFilter={setDateFilter}
           />
         ))}
-
         {subFiltersToDisplay.map((subFilter, index) => (
           <>
             {Object.keys(subFilter).length > 0 && filtersToDisplay.length > 0 && <Separator />}
             <div className="space-y-4" key={index}>
               {Object.keys(subFilter).map(key => {
-                const filterLabel = getFilterLabel(key, filtersToDisplay?.[index]?.selectedOptions);
                 return (
                   <div className={'m-1'} key={key}>
-                    {filterLabel !== null && <div className={'font-bold mb-2'}>{filterLabel}</div>}
+                    <div className={'font-bold mb-2'}>
+                      {key !== 'undefined' && key !== 'event'
+                        ? key
+                        : filtersToDisplay[index].selectedOptions
+                            .map(({ label }) => label)
+                            .join('/')}
+                    </div>
                     {subFilter[key].map(filterState => (
                       <div className={'my-1'} key={filterState.id}>
                         <ShowFilters
                           item={filterState}
                           setFilterSelectedOptions={setFilterSelectedOptions}
+                          dateFilter={dateFilter}
+                          setDateFilter={setDateFilter}
                         />
                       </div>
                     ))}

diff --git a/frontend/src/components/pages/_app/Root.tsx b/frontend/src/components/pages/_app/Root.tsx
@@ -1,8 +1,7 @@
+import getNextConfig from 'next/config';
 import { AppCrashFallback } from 'components/AppCrashFallback';
 import Head from 'next/head';
-import { FunctionComponent } from 'react';
 import { IntlProvider } from 'react-intl';
-
 import { getGlobalConfig } from 'modules/utils/api.config';
 import { getDefaultLanguage } from 'modules/header/utills';
 import { useRouter } from 'next/router';
@@ -13,16 +12,21 @@ import { ErrorBoundary } from './ErrorBoundary';
 interface RootProps {
   hasError: boolean;
   errorEventId?: string;
-  messages: {
-    [language: string]: {
-      [messageId: string]: string;
-    };
+}
+
+interface Messages {
+  [language: string]: {
+    [messageId: string]: string;
   };
 }
 
-export const Root: FunctionComponent<RootProps> = props => {
+const {
+  publicRuntimeConfig: { locales },
+} = getNextConfig();
+
+export const Root: React.FC<RootProps> = props => {
   const router = useRouter();
-  const language = router.locale ?? getDefaultLanguage();
+  const language: string = router.locale ?? getDefaultLanguage() ?? 'fr';
   const { googleSiteVerificationToken, applicationName } = getGlobalConfig();
 
   return (
@@ -31,8 +35,7 @@ export const Root: FunctionComponent<RootProps> = props => {
       hasError={props.hasError}
       eventId={props.errorEventId}
     >
-      {/*@ts-ignore-next-line we ignore because locales have to be given for the config languages */}
-      <IntlProvider locale={language} messages={props.messages[language] ?? props.messages.fr}>
+      <IntlProvider locale={language} messages={(locales as Messages)[language]}>
         <Head>
           <link rel="manifest" href="/manifest.json" />
 

diff --git a/frontend/src/components/pages/_app/__tests__/Root.test.tsx b/frontend/src/components/pages/_app/__tests__/Root.test.tsx
@@ -1,7 +1,15 @@
 import { render } from 'services/testing/reactTestingLibraryWrapper';
-
 import { Root } from '../Root';
 
+jest.mock('next/config', () => () => ({
+  publicRuntimeConfig: {
+    locales: {
+      en: { title: 'Title' },
+      fr: { title: 'Titre' },
+    },
+  },
+}));
+
 test('AAU, I can see a Root', () => {
-  render(<Root hasError={false} messages={{ fr: {} }} />);
+  render(<Root hasError={false} />);
 });
diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx
@@ -41,6 +41,7 @@ import {
 } from '../details/utils';
 import InputWithMagnifier from './components/InputWithMagnifier';
 import { useTextFilter } from './hooks/useTextFilter';
+import { useDateFilter } from './hooks/useDateFilter';
 
 interface Props {
   initialFiltersState: FilterState[];
@@ -67,6 +68,8 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
     resetTextFilter,
   } = useTextFilter();
 
+  const { dateFilter, setDateFilter } = useDateFilter();
+
   const {
     searchResults,
     isLoading,
@@ -78,7 +81,7 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
     mobileMapState,
     displayMobileMap,
     hideMobileMap,
-  } = useTrekResults({ filtersState, textFilterState, bboxState }, language);
+  } = useTrekResults({ filtersState, textFilterState, bboxState, dateFilter }, language);
 
   const { isMapLoading } = useMapResults({ filtersState, textFilterState }, language);
 
@@ -142,6 +145,8 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
               setFilterSelectedOptions={setFilterSelectedOptions}
               resetFilter={onRemoveAllFiltersClick}
               resultsNumber={searchResults?.resultsNumber ?? 0}
+              dateFilter={dateFilter}
+              setDateFilter={setDateFilter}
             />
           )}
         </>
@@ -151,8 +156,10 @@ export const SearchUI: React.FC<Props> = ({ language }) => {
         <Container className="flex flex-col" id="search_container">
           {!isMobile && (
             <FilterBarNew
+              dateFilter={dateFilter}
               filtersState={filtersStateWithExclude}
               setFilterSelectedOptions={setFilterSelectedOptions}
+              setDateFilter={setDateFilter}
               resetFilters={onRemoveAllFiltersClick}
               resultsNumber={searchResults?.resultsNumber ?? 0}
               language={language}

diff --git a/frontend/src/components/pages/search/components/FilterBar/FilterField.tsx b/frontend/src/components/pages/search/components/FilterBar/FilterField.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { colorPalette, sizes } from 'stylesheet';
 import { groupBy } from 'lodash';
 import { FormattedMessage } from 'react-intl';
-import { FilterState, Option } from '../../../../../modules/filters/interface';
+import { DateFilter, FilterState, Option } from '../../../../../modules/filters/interface';
 import { countFiltersSelected } from '../../../../../modules/filters/utils';
 import getActivityColor from '../ResultCard/getActivityColor';
 import SubFilterField from './SubFilterField';
@@ -17,9 +17,11 @@ interface Props {
   filters?: string[];
   subFilters?: string[] | string[][];
   filtersState: FilterState[];
+  dateFilter: DateFilter;
   expanded: boolean;
   onClick: () => void;
   setFilterSelectedOptions: (filterId: string, options: Option[]) => void;
+  setDateFilter: (dFilter: DateFilter) => void;
 }
 
 const BACKGROUND_EXPANDED = '#fefefe';
@@ -32,7 +34,9 @@ const FilterField: React.FC<Props> = ({
   filters,
   subFilters,
   filtersState,
+  dateFilter,
   setFilterSelectedOptions,
+  setDateFilter,
 }) => {
   const filtersToDisplay = filtersState.filter(filter => filters?.includes(filter.id));
 
@@ -60,7 +64,7 @@ const FilterField: React.FC<Props> = ({
       ) ?? {},
   );
 
-  const nextFilters: (FilterState | undefined)[] = filtersToDisplay.length
+  const nextFilters: FilterState[] = filtersToDisplay.length
     ? filtersToDisplay
     : Array.from({ length: subFiltersToDisplay.length });
 
@@ -100,19 +104,21 @@ const FilterField: React.FC<Props> = ({
                 </button>
               )}
             </div>
-            {filterState !== undefined && (
-              <div className="mb-4">
-                <ShowFilters
-                  item={filterState}
-                  setFilterSelectedOptions={setFilterSelectedOptions}
-                  hideLabel
-                />
-              </div>
-            )}
+            <div className="mb-4">
+              <ShowFilters
+                item={filterState}
+                setFilterSelectedOptions={setFilterSelectedOptions}
+                hideLabel
+                dateFilter={dateFilter}
+                setDateFilter={setDateFilter}
+              />
+            </div>
             <div className="grid grid-cols-3 gap-4">
               <SubFilterField
                 filters={subFiltersToDisplay[index]}
+                dateFilter={dateFilter}
                 setFilterSelectedOptions={setFilterSelectedOptions}
+                setDateFilter={setDateFilter}
               />
             </div>
           </Fragment>