feat(i18n): add ach language only in dev mode

In order to allow inContext  translation we've to add a fake internal
language hosting all the meta info

Author: cannarocks

src/common/getStrapiData.ts

@@ -7,6 +7,7 @@ import {
   ServiceResponse,
 } from 'src/features/backoffice';
 import { StrapiIcon } from 'src/features/backoffice/strapi';
+import { isDev } from './isDevEnvironment';
 
 export type StrapiResponse =
   | CategoryListResponse
@@ -26,15 +27,14 @@ export type StrapiResponse =
  * @returns {object | false}
  */
 export const extractStrapiData = (item: StrapiResponse) => {
-  const isDev = ['staging', 'local'].includes(react_env.REACT_APP_ENV);
   if (item !== undefined && item.data !== null) {
     if (item.data !== undefined && item.data !== null) {
       if (Array.isArray(item.data)) {
         const items: any = [];
         item.data.forEach((listItem) => {
           const newListItem = extractStrapiData({ data: listItem });
           if (newListItem) {
-            if (isDev || newListItem.publishedAt !== null) {
+            if (isDev() || newListItem.publishedAt !== null) {
               items.push(newListItem);
             }
           }

src/common/isDevEnvironment.ts

@@ -0,0 +1,2 @@
+export const isDev = () =>
+  ['staging', 'local'].includes(react_env.REACT_APP_ENV);

src/features/navigation/Navigation.tsx

@@ -21,6 +21,7 @@ import { prepareGravatar, isMaxMedia } from 'src/common/utils';
 import { useEffect } from 'react';
 import API from 'src/common/api';
 import TagManager from 'react-gtm-module';
+import { isDev } from 'src/common/isDevEnvironment';
 import { Changelog } from './Changelog';
 import { useGetWorkspacesByWidProjectsQuery } from '../api';
 import { getWorkspaceFromLS, saveWorkspaceToLs } from './cachedStorage';
@@ -142,6 +143,7 @@ export const Navigation = ({
         key: 'it',
         label: t('__APP_LANGUANGE_IT_TEXT'),
       },
+      ...(isDev() && { ach: { key: 'ach', label: 'Acholi' } }),
     },
     currentLanguage: i18n.language,
     feedbackTitle: t('__PROFILE_MODAL_FEEDBACK_TITLE'),
@@ -158,11 +160,13 @@ export const Navigation = ({
       url: 'https://www.iubenda.com/privacy-policy/833252/full-legal',
     },
     onSelectLanguage: (lang: string) => {
-      if (!pathWithoutLocale) return;
+      if (pathWithoutLocale === false) return;
+      if (lang === i18n.language) return;
+
       if (lang === 'en') {
         document.location.href = pathWithoutLocale;
       } else {
-        document.location.href = `/${lang}/${pathWithoutLocale}`;
+        document.location.href = `/${lang}${pathWithoutLocale}`;
       }
     },
     onToggleChat: () => {

src/i18n.ts

@@ -6,6 +6,8 @@ import enLinks from './locales/en/links.json';
 import en from './locales/en/translation.json';
 import itLinks from './locales/it/links.json';
 import it from './locales/it/translation.json';
+import ach from './locales/ach/translation.json';
+import { isDev } from './common/isDevEnvironment';
 
 // the translations
 // (tip move them in a JSON file and import them)
@@ -16,6 +18,7 @@ countries.registerLocale(require('i18n-iso-countries/langs/es.json'));
 const resources = {
   en: { translation: en, links: enLinks },
   it: { translation: it, links: itLinks },
+  ...(isDev() && { ach: { translation: ach, links: {} } }),
 };
 
 i18n
@@ -31,7 +34,7 @@ i18n
     returnEmptyString: false,
     nsSeparator: false,
     resources,
-    supportedLngs: ['it', 'en'],
+    supportedLngs: ['it', 'en', ...(isDev() ? ['ach'] : [])],
     fallbackLng: 'en',
     keySeparator: ':::',
     interpolation: {