fix(i18n): fixed current locale (#462)

* fix(i18n): fixed current locale

* Update i18n/translations/ja-JP.json

Co-Authored-By: hdmr14 <58992133+hdmr14@users.noreply.github.com>

Co-authored-by: hdmr14 <58992133+hdmr14@users.noreply.github.com>

i18n/translations/de-DE.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Englisch",
+        "japanese": "Japanisch",
         "portuguese": "Portugiesisch",
         "spanish": "Spanisch",
         "german": "Deutsch",

i18n/translations/en-US.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "English",
+        "japanese": "Japanese",
         "portuguese": "Portuguese",
         "spanish": "Spanish",
         "german": "German",

i18n/translations/es-ES.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Inglés",
+        "japanese": "Japonés",
         "portuguese": "Portugués",
         "spanish": "Español",
         "german": "Alemán",

i18n/translations/fr-FR.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Anglaise",
+        "japanese": "Japonaise",
         "portuguese": "Portugaise",
         "spanish": "Espagnol",
         "german": "Allemande",

i18n/translations/ja-JP.json

@@ -135,5 +135,16 @@
       "app-context-not-correct-used": "AppContextが正しく使用されませんでした",
       "theme-context-not-correct-used": "ThemeContextが正しく使用されませんでした",
       "package-meta-is-required-at-detail-context": "DetailContextではpackageMetaが必要です"
-  }
+  },
+  "lng": {
+    "english": "英語",
+    "japanese": "日本語",
+    "portuguese": "ポルトガル語",
+    "spanish": "スペイン語",
+    "german": "ドイツ語",
+    "chinese": "中国語",
+    "french": "フランス語"
+   },
+   "help-to-translate": "翻訳を助ける",
+   "change-language": "言語を変更"
 }

i18n/translations/pt-BR.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Inglês",
+        "japanese": "Japonês",
         "portuguese": "Português",
         "spanish": "Espanhol",
         "german": "Alemão",

i18n/translations/zh-CN.json

@@ -137,6 +137,7 @@
     },
     "lng": {
         "english": "英語",
+        "japanese": "日語",
         "portuguese": "葡萄牙語",
         "spanish": "西班牙文",
         "german": "德語",

src/components/Icon/Icon.tsx

@@ -13,6 +13,7 @@ import austria from './img/austria.svg';
 import spain from './img/spain.svg';
 import usa from './img/usa.svg';
 import france from './img/france.svg';
+import japan from './img/japan.svg';
 import earth from './img/earth.svg';
 import verdaccio from './img/verdaccio.svg';
 import filebinary from './img/filebinary.svg';
@@ -32,6 +33,7 @@ export interface IconsMap {
   france: string;
   germany: string;
   india: string;
+  japan: string;
   earth: string;
   verdaccio: string;
   license: string;
@@ -60,6 +62,7 @@ export const Icons: IconsMap = {
   germany,
   usa,
   france,
+  japan,
 };
 
 export interface Props {

src/components/Icon/img/japan.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="japan"><path d="M473.655 88.275H38.345C17.167 88.275 0 105.442 0 126.62v258.76c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.62c0-21.178-17.167-38.345-38.345-38.345z" fill="#f5f5f5"/><circle cx="256" cy="255.999" r="97.1" fill="#ff4b55"/></svg>

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -9,7 +9,6 @@ import Grow from '@material-ui/core/Grow';
 import Popper from '@material-ui/core/Popper';
 import MenuList from '@material-ui/core/MenuList';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 
 import { Language } from '../../../i18n/config';
 import ThemeContext from '../../design-tokens/ThemeContext';
@@ -25,34 +24,48 @@ import Icon from '../Icon';
 
 const VERDACCIO_UI_GITHUB_REPOSITORY = 'https://github.com/verdaccio/ui';
 
-const getTranslatedCurrentLanguage = (
+const getTranslatedCurrentLanguageDetails = (
-  t: TFunction
+  t: TFunction,
-): { [key: string]: { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } } => ({
+  currentLanguage: string
-  'en-us': {
+): { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } => {
-    translation: t('lng.english'),
+  switch (currentLanguage) {
-    icon: 'usa',
+    case 'fr-FR':
-  },
+      return {
-  'fr-fr': {
         translation: t('lng.french'),
         icon: 'france',
-  },
+      };
-  'pt-br': {
+    case 'pt-BR':
+      return {
         translation: t('lng.portuguese'),
         icon: 'brazil',
-  },
+      };
-  'de-de': {
+    case 'de-DE':
+      return {
         translation: t('lng.german'),
         icon: 'germany',
-  },
+      };
-  'es-es': {
+    case 'es-ES':
+      return {
         translation: t('lng.spanish'),
         icon: 'spain',
-  },
+      };
-  'zh-cn': {
+    case 'zh-CN':
+      return {
         translation: t('lng.chinese'),
         icon: 'china',
-  },
+      };
-});
+    case 'ja-JP':
+      return {
+        translation: t('lng.japanese'),
+        icon: 'japan',
+      };
+    default:
+      return {
+        translation: t('lng.english'),
+        icon: 'usa',
+      };
+  }
+};
 
 const LanguageSwitch = () => {
   const themeContext = useContext(ThemeContext);
@@ -65,9 +78,9 @@ const LanguageSwitch = () => {
   }
 
   const languages = (i18next.options.resources ? Object.keys(i18next.options.resources) : []) as Array<Language>;
-  const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0];
+  const currentLanguage = themeContext.language;
 
-  const { translation: userLanguage } = getTranslatedCurrentLanguage(t)[currentLanguage.toLowerCase()];
+  const { translation: userLanguage } = getTranslatedCurrentLanguageDetails(t, currentLanguage);
 
   const handleToggle = useCallback(() => {
     setOpen(prevOpen => !prevOpen);
@@ -124,7 +137,7 @@ const LanguageSwitch = () => {
                   {languages
                     .filter(language => language !== currentLanguage)
                     .map(language => {
-                      const { icon, translation } = getTranslatedCurrentLanguage(t)[language.toLowerCase()];
+                      const { icon, translation } = getTranslatedCurrentLanguageDetails(t, language);
                       return (
                         <StyledMenuItem
                           key={language}

src/design-tokens/ThemeProvider.tsx

@@ -3,15 +3,13 @@ import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 import i18next from 'i18next';
 
-import { Language } from '../../i18n/config';
-
 import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
 import useLocalStorage from './useLocalStorage';
 
 const ThemeProvider: React.FC = ({ children }) => {
   const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode;
-  const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0];
+  const currentLanguage = i18next.languages?.[0];
 
   const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
   const [language, setLanguage] = useLocalStorage('language', currentLanguage);