Fix i18n bug on map load

packages/core-js/webpack.common.js

@@ -28,5 +28,8 @@ module.exports = {
     resolve: {
         extensions: ['.js'],
     },
-    plugins: [new CleanWebpackPlugin()],
+    plugins: [new CleanWebpackPlugin({
+        dangerouslyAllowCleanPatternsOutsideProject: true,
+        dry: false,
+    })],
 };

packages/webapp/lang/es.json

@@ -21,7 +21,7 @@
         "defaultMessage": "Cancelar"
     },
     "action.close-button": {
-        "defaultMessage": "Cerca"
+        "defaultMessage": "Cerrar"
     },
     "action.delete": {
         "defaultMessage": "Borrar"
@@ -60,16 +60,16 @@
         "defaultMessage": "Nuevo mapa"
     },
     "action.open": {
-        "defaultMessage": "Abierto"
+        "defaultMessage": "Abrir"
     },
     "action.print": {
-        "defaultMessage": "Impresión"
+        "defaultMessage": "Imprimir"
     },
     "action.publish": {
         "defaultMessage": "Publicar"
     },
     "action.rename": {
-        "defaultMessage": "Rebautizar"
+        "defaultMessage": "Renombar"
     },
     "action.rename-description-placeholder": {
         "defaultMessage": "Descripción"
@@ -78,10 +78,10 @@
         "defaultMessage": "Nombre"
     },
     "action.share": {
-        "defaultMessage": "Cuota"
+        "defaultMessage": "Compartir"
     },
     "changepwd.button": {
-        "defaultMessage": "Cambio"
+        "defaultMessage": "Cambiar"
     },
     "changepwd.confirm-password": {
         "defaultMessage": "Confirmar contraseña"
@@ -195,7 +195,7 @@
         "defaultMessage": "¿Ya tienes una cuenta?"
     },
     "help.support": {
-        "defaultMessage": "Apoyo"
+        "defaultMessage": "Ayuda"
     },
     "history.no-changes": {
         "defaultMessage": "No hay cambios disponibles"
@@ -231,7 +231,7 @@
         "defaultMessage": "Última fecha de modificación"
     },
     "info.modified-tny": {
-        "defaultMessage": "ultima modificacion por"
+        "defaultMessage": "Ultima modificacion por"
     },
     "info.name": {
         "defaultMessage": "Nombre"
@@ -240,10 +240,10 @@
         "defaultMessage": "Visible públicamente"
     },
     "info.sharing": {
-        "defaultMessage": "Intercambio"
+        "defaultMessage": "Compartido"
     },
     "info.starred": {
-        "defaultMessage": "Sembrado de estrellas"
+        "defaultMessage": "Destacados"
     },
     "info.title": {
         "defaultMessage": "Información"
@@ -286,7 +286,7 @@
         "defaultMessage": "Inscribirse"
     },
     "login.title": {
-        "defaultMessage": "Bienvenidos"
+        "defaultMessage": "Bienvenido"
     },
     "login.userinactive": {
         "defaultMessage": "Lo sentimos, tu cuenta aún no ha sido activada. Recibirás un correo electrónico de notificación cuando se active. ¡Manténganse al tanto!."
@@ -331,34 +331,34 @@
         "defaultMessage": "Modificado por {by} el {on}"
     },
     "maps.nav-all": {
-        "defaultMessage": "Todo"
+        "defaultMessage": "Todos"
     },
     "maps.nav-onwned": {
-        "defaultMessage": "propiedad"
+        "defaultMessage": "Mis Mapas"
     },
     "maps.nav-public": {
-        "defaultMessage": "Público"
+        "defaultMessage": "Públicos"
     },
     "maps.nav-shared": {
-        "defaultMessage": "Comparte conmigo"
+        "defaultMessage": "Compartidos"
     },
     "maps.nav-starred": {
-        "defaultMessage": "Sembrado de estrellas"
+        "defaultMessage": "Destacados"
     },
     "maps.page-title": {
-        "defaultMessage": "Mis mapas | WiseMapping"
+        "defaultMessage": "Mis Mapas | WiseMapping"
     },
     "maps.revert": {
         "defaultMessage": "Revertir"
     },
     "maps.search-action": {
-        "defaultMessage": "Búsqueda ..."
+        "defaultMessage": "Búscar ..."
     },
     "maps.tooltip-open": {
-        "defaultMessage": "Abierto para edición"
+        "defaultMessage": "Abrir para edición"
     },
     "maps.tooltip-starred": {
-        "defaultMessage": "Sembrado de estrellas"
+        "defaultMessage": "Destacados"
     },
     "maps.view": {
         "defaultMessage": "Vista"
@@ -439,7 +439,7 @@
         "defaultMessage": "Editor"
     },
     "role.owner": {
-        "defaultMessage": "onwer"
+        "defaultMessage": "Dueño"
     },
     "role.viewer": {
         "defaultMessage": "Espectador"

packages/webapp/src/app.tsx

@@ -53,31 +53,35 @@ const App = (): ReactElement => {
                                 <Route exact path="/">
                                     <Redirect to="/c/login" />
                                 </Route>
-                                <Route path="/c/login" component={LoginPage} />
-                                <Route path="/c/registration">
-                                    <RegistationPage />
+                                <Route path="/c/login"
+                                    component={LoginPage}
+                                />
+                                <Route
+                                    path="/c/registration">
+                                    component={RegistationPage}
                                 </Route>
                                 <Route
                                     path="/c/registration-success"
                                     component={RegistrationSuccessPage}
                                 />
-                                <Route path="/c/forgot-password">
-                                    <ForgotPasswordPage />
-                                </Route>
+                                <Route
+                                    path="/c/forgot-password"
+                                    component={ForgotPasswordPage} />
                                 <Route
                                     path="/c/forgot-password-success"
                                     component={ForgotPasswordSuccessPage}
                                 />
-                                <Route exact path="/c/maps/">
-                                    <MapsPage />
-                                </Route>
+                                <Route
+                                    exact path="/c/maps/"
+                                    component={MapsPage}
+                                />
                                 <Route exact path="/c/maps/:id/edit">
-                                    <Editor memoryPersistence={memoryPersistence} 
-                                        readOnlyMode={readOnlyMode} mapId={mapId}  />
+                                    <Editor memoryPersistence={memoryPersistence}
+                                        readOnlyMode={readOnlyMode} mapId={mapId} />
                                 </Route>
                                 <Route exact path="/c/maps/:id/try">
-                                    <Editor memoryPersistence={memoryPersistence} 
-                                        readOnlyMode={readOnlyMode} mapId={mapId}  />
+                                    <Editor memoryPersistence={memoryPersistence}
+                                        readOnlyMode={readOnlyMode} mapId={mapId} />
                                 </Route>
                             </Switch>
                         </Router>

packages/webapp/src/compiled-lang/en.json

@@ -686,7 +686,7 @@
   "maps.nav-all": [
     {
       "type": 0,
-      "value": "All"
+      "value": "All  333"
     }
   ],
   "maps.nav-onwned": [

packages/webapp/src/compiled-lang/es.json

@@ -44,7 +44,7 @@
   "action.close-button": [
     {
       "type": 0,
-      "value": "Cerca"
+      "value": "Cerrar"
     }
   ],
   "action.delete": [
@@ -122,13 +122,13 @@
   "action.open": [
     {
       "type": 0,
-      "value": "Abierto"
+      "value": "Abrir"
     }
   ],
   "action.print": [
     {
       "type": 0,
-      "value": "Impresión"
+      "value": "Imprimir"
     }
   ],
   "action.publish": [
@@ -140,7 +140,7 @@
   "action.rename": [
     {
       "type": 0,
-      "value": "Rebautizar"
+      "value": "Renombar"
     }
   ],
   "action.rename-description-placeholder": [
@@ -158,13 +158,13 @@
   "action.share": [
     {
       "type": 0,
-      "value": "Cuota"
+      "value": "Compartir"
     }
   ],
   "changepwd.button": [
     {
       "type": 0,
-      "value": "Cambio"
+      "value": "Cambiar"
     }
   ],
   "changepwd.confirm-password": [
@@ -404,7 +404,7 @@
   "help.support": [
     {
       "type": 0,
-      "value": "Apoyo"
+      "value": "Ayuda"
     }
   ],
   "history.no-changes": [
@@ -476,7 +476,7 @@
   "info.modified-tny": [
     {
       "type": 0,
-      "value": "ultima modificacion por"
+      "value": "Ultima modificacion por"
     }
   ],
   "info.name": [
@@ -494,13 +494,13 @@
   "info.sharing": [
     {
       "type": 0,
-      "value": "Intercambio"
+      "value": "Compartido"
     }
   ],
   "info.starred": [
     {
       "type": 0,
-      "value": "Sembrado de estrellas"
+      "value": "Destacados"
     }
   ],
   "info.title": [
@@ -584,7 +584,7 @@
   "login.title": [
     {
       "type": 0,
-      "value": "Bienvenidos"
+      "value": "Bienvenido"
     }
   ],
   "login.userinactive": [
@@ -686,37 +686,37 @@
   "maps.nav-all": [
     {
       "type": 0,
-      "value": "Todo"
+      "value": "Todos"
     }
   ],
   "maps.nav-onwned": [
     {
       "type": 0,
-      "value": "propiedad"
+      "value": "Mis Mapas"
     }
   ],
   "maps.nav-public": [
     {
       "type": 0,
-      "value": "Público"
+      "value": "Públicos"
     }
   ],
   "maps.nav-shared": [
     {
       "type": 0,
-      "value": "Comparte conmigo"
+      "value": "Compartidos"
     }
   ],
   "maps.nav-starred": [
     {
       "type": 0,
-      "value": "Sembrado de estrellas"
+      "value": "Destacados"
     }
   ],
   "maps.page-title": [
     {
       "type": 0,
-      "value": "Mis mapas | WiseMapping"
+      "value": "Mis Mapas | WiseMapping"
     }
   ],
   "maps.revert": [
@@ -728,19 +728,19 @@
   "maps.search-action": [
     {
       "type": 0,
-      "value": "Búsqueda ..."
+      "value": "Búscar ..."
     }
   ],
   "maps.tooltip-open": [
     {
       "type": 0,
-      "value": "Abierto para edición"
+      "value": "Abrir para edición"
     }
   ],
   "maps.tooltip-starred": [
     {
       "type": 0,
-      "value": "Sembrado de estrellas"
+      "value": "Destacados"
     }
   ],
   "maps.view": [
@@ -902,7 +902,7 @@
   "role.owner": [
     {
       "type": 0,
-      "value": "onwer"
+      "value": "Dueño"
     }
   ],
   "role.viewer": [

packages/webapp/src/components/maps-page/editor/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import ActionDispatcher from '../action-dispatcher';
 import { ActionType } from '../action-chooser';
 import WiseEditor from '@wisemapping/editor';
+import AppI18n from '../../../classes/app-i18n';
 
 export type EditorPropsType = {
     mapId: number;
@@ -10,13 +10,17 @@ export type EditorPropsType = {
     readOnlyMode: boolean;
 };
 
-export default function Editor({ mapId, ...props } : EditorPropsType): React.ReactElement {
+export default function Editor({ mapId, ...props }: EditorPropsType): React.ReactElement {
     const [activeDialog, setActiveDialog] = React.useState<ActionType | null>(null);
-    const intl = useIntl();
+
+    // Load user locale ...
+    const appi18n = new AppI18n();
+    const userLocale = appi18n.getUserLocale();
+
     return <>
-        <WiseEditor {...props} onAction={setActiveDialog} locale={intl.locale} />
+        <WiseEditor {...props} onAction={setActiveDialog} locale={userLocale.code} />
         {
-            activeDialog && 
+            activeDialog &&
             <ActionDispatcher
                 action={activeDialog}
                 onClose={() => setActiveDialog(null)}

packages/webapp/src/components/maps-page/index.tsx

@@ -7,7 +7,7 @@ import List from '@material-ui/core/List';
 import IconButton from '@material-ui/core/IconButton';
 import { useStyles } from './style';
 import { MapsList } from './maps-list';
-import { FormattedMessage, IntlProvider, useIntl } from 'react-intl';
+import { createIntl, createIntlCache, FormattedMessage, IntlProvider, IntlShape, useIntl } from 'react-intl';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { activeInstance } from '../../redux/clientSlice';
 import { useSelector } from 'react-redux';
@@ -64,9 +64,20 @@ const MapsPage = (): ReactElement => {
     const client: Client = useSelector(activeInstance);
     const queryClient = useQueryClient();
     const [activeDialog, setActiveDialog] = React.useState<ActionType | undefined>(undefined);
-    const intl = useIntl();
+
+    // Reload based on user preference ...
+    const appi18n = new AppI18n();
+    const userLocale = appi18n.getUserLocale();
+
+    const cache = createIntlCache();
+    const intl = createIntl({
+        defaultLocale: userLocale.code,
+        locale: Locales.EN.code,
+        messages: userLocale.message
+    }, cache)
 
     useEffect(() => {
+
         document.title = intl.formatMessage({
             id: 'maps.page-title',
             defaultMessage: 'My Maps | WiseMapping',
@@ -130,10 +141,6 @@ const MapsPage = (): ReactElement => {
         })
     );
 
-    // Configure using user settings ...
-    const appi18n = new AppI18n();
-    const userLocale = appi18n.getUserLocale();
-
     return (
         <IntlProvider
             locale={userLocale.code}

packages/webapp/webpack.common.js

@@ -45,7 +45,10 @@ module.exports = {
         },
     },
     plugins: [
-        new CleanWebpackPlugin(),
+        new CleanWebpackPlugin({
+            dangerouslyAllowCleanPatternsOutsideProject: true,
+            dry: false,
+        }),
         new CopyWebpackPlugin({
             patterns: [
                 {