Merge pull request #526 from GeotrekCE/develop

Develop > Master / Prepare 3.5.2

docs/changelog.md

@@ -1,5 +1,22 @@
 # Changelog
 
+3.5.2 (2021-11-26)
+------------------
+
+**🐛 Fixes**
+
+* Fix redirections defined in ``redirects.json`` (#522)
+* Fix wrong URL in menu mobile version (#519)
+* Add protection if a filter does not have label (#518)
+
+**✨ Improvements**
+
+* Upgrade Next.js version 11 to 12
+
+**💥 Beaking changes**
+
+* ``Redirects`` from Next.js is replaced by a specific redirection system. ``locale`` property is no more used in ``redirects.json`` and it is no more necessary to add default locale key in other languages rules.
+
 3.5.1 (2021-11-24)
 ------------------
 
@@ -8,10 +25,6 @@
 * Fix filter masking (#512)
 * Fix crash filters with using ID instead of index (#518)
 
-**🚀 New features**
-
-* Allow to add dynamic links to information pages in footer (#516)
-
 3.5.0 (2021-11-14)
 ------------------
 

docs/customization.md

@@ -73,7 +73,6 @@ In json files, you can just override the primary keys you need. You have to over
 
     - `source`: must match to the old URL. Use the wildcard `*` to redirect a subdirectory. Use `:varname` to forward a variable to the destination
     - `destination`: must match to the new URL. Use `:varname` to inject a variable captured in the old URL
-    - `locale`: This can be `undefined` or `false`. This argument specifies if the server must detect automatically the locale or if the rule specifies itself the locale used. Default to `undefined`
     - `permanent`: Set to `true` if the redirection is permanent. Set to `false` if the redirection is temporally. Default to `false`
 
     Examples :

frontend/next.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const withImages = require('next-images');
 const withPlugins = require('next-compose-plugins');
 const withSourceMaps = require('@zeit/next-source-maps');
 const withPWA = require('next-pwa');
@@ -19,22 +18,9 @@ const mergedHeaderConfig = {
 
 const env = dotenv.config().parsed;
 
-const plugins = [[withPWA], [withImages], [withSourceMaps()], [withBundleAnalyzer]];
-
-const redirects = async () => {
-  const redirectsConfig = getConfig('redirects.json');
-
-  return redirectsConfig.rules.map(rule => ({
-    source: rule.source,
-    destination: rule.destination,
-    permanent: rule.permanent !== undefined ? rule.permanent : false,
-    locale: rule.locale !== undefined ? rule.locale : undefined,
-    basePath: rule.basePath !== undefined ? rule.basePath : false,
-  }));
-};
+const plugins = [[withPWA], [withSourceMaps()], [withBundleAnalyzer]];
 
 module.exports = withPlugins(plugins, {
-  redirects,
   webpack(config) {
     config.resolve.modules.push(path.resolve('./src'));
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -57,10 +57,9 @@
     "leaflet.markercluster": "1.5.1",
     "leaflet.offline": "^2.0.0-beta.3",
     "lodash": "4.17.21",
-    "next": "^11.1.2",
+    "next": "12",
     "next-compose-plugins": "^2.2.1",
     "next-cookies": "^2.0.3",
-    "next-images": "1.8.1",
     "next-pwa": "5.3.1",
     "postcss": "8.3.6",
     "postcss-flexbugs-fixes": "^5.0.2",

frontend/src/components/Header/BurgerMenu/BurgerMenu.tsx

@@ -1,8 +1,11 @@
+import { useRouter } from 'next/router';
 // @ts-ignore Not official but useful to reduce bundle size
 import Slide from 'react-burger-menu/lib/menus/slide';
 import { MenuConfig, MenuItem } from 'modules/header/interface';
 import { useIntl } from 'react-intl';
+import NextLink from 'next/link';
 import { routes } from 'services/routes';
+import { getDefaultLanguage } from '../../../modules/header/utills';
 import { BurgerMenuSection } from '../BurgerMenuSection/BurgerMenuSection';
 import { BurgerMenu as BmIcon } from '../../Icons/BurgerMenu';
 import { Cross } from '../../Icons/Cross';
@@ -19,6 +22,8 @@ export const BurgerMenu: React.FC<Props> = ({ config, menuItems, displayState =
   }`;
 
   const intl = useIntl();
+  const router = useRouter();
+  const currentLanguage = router.locale ?? getDefaultLanguage();
 
   return (
     <Slide
@@ -49,14 +54,12 @@ export const BurgerMenu: React.FC<Props> = ({ config, menuItems, displayState =
         title={intl.formatMessage({ id: 'header.language' })}
         languages={config.supportedLanguages}
       />
-      <BurgerMenuSection
-        title={intl.formatMessage({ id: 'header.goToSearch' })}
-        onClick={() => window.open(routes.SEARCH, '_self')}
-      />
-      <BurgerMenuSection
-        title={intl.formatMessage({ id: 'header.offline' })}
-        onClick={() => window.open(routes.OFFLINE, '_self')}
-      />
+      <NextLink href={routes.SEARCH} passHref locale={currentLanguage} key={routes.SEARCH}>
+        <BurgerMenuSection title={intl.formatMessage({ id: 'header.goToSearch' })} />
+      </NextLink>
+      <NextLink href={routes.OFFLINE} passHref locale={currentLanguage} key={routes.OFFLINE}>
+        <BurgerMenuSection title={intl.formatMessage({ id: 'header.offline' })} />
+      </NextLink>
     </Slide>
   );
 };

frontend/src/components/pages/search/components/FilterBar/Field.tsx

@@ -35,7 +35,9 @@ const Field: React.FC<Props> = ({ filterState, onSelect, hideLabel }) => {
 
   return (
     <div>
-      {!hideLabel && <div className={'mb-1'}>{intl.formatMessage({ id: filterState.label })}</div>}
+      {!hideLabel && (
+        <div className={'mb-1'}>{intl.formatMessage({ id: filterState?.label || 'Unknown' })}</div>
+      )}
       <div className="-m-1">
         {filterState.options.map(option => {
           const isSelected = filterState.selectedOptions.some(_ => _.value === option.value);