add a new language - Ukrainian && fix bug with dayjs locale (#472)

src/App/App.tsx

@@ -13,10 +13,10 @@ import Loading from '../components/Loading';
 import Box from '../muiComponents/Box';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';
+import loadDayJSLocale from '../design-tokens/load-dayjs-locale';
 
 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
-import loadDayJSLocale from './load-dayjs-locale';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor: theme?.palette.background.default,

src/components/Icon/Icon.tsx

@@ -14,6 +14,7 @@ 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 ukraine from './img/ukraine.svg';
 import earth from './img/earth.svg';
 import verdaccio from './img/verdaccio.svg';
 import filebinary from './img/filebinary.svg';
@@ -34,6 +35,7 @@ export interface IconsMap {
   germany: string;
   india: string;
   japan: string;
+  ukraine: string;
   earth: string;
   verdaccio: string;
   license: string;
@@ -63,6 +65,7 @@ export const Icons: IconsMap = {
   usa,
   france,
   japan,
+  ukraine,
 };
 
 export interface Props {

src/components/Icon/img/ukraine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="ukraine"><path d="M0 248v121.6C0 396.8 21.6 416 48 416h400c26.4 0 48-19.2 48-46.4V248H0z" fill="#fdce0c"/><path d="M248 248l197.6 168c26.4 0 50.4-19.2 50.4-46.4V248H248z" fill="#f4ba00"/><path d="M448 80H48C21.6 80 0 99.2 0 126.4V248h496V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#44c1ef"/><path d="M448 80H48l200 168h248V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#18b4ea"/><path d="M496 368.8c0 29.6-21.6 47.2-48 47.2H48c-26.4 0-48-20.8-48-48" fill="#f2a700"/><path d="M48 80h400c26.4 0 48 19.2 48 46.4V216" fill="#10a2e2"/></svg>

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -59,6 +59,11 @@ const getTranslatedCurrentLanguageDetails = (
         translation: t('lng.japanese'),
         icon: 'japan',
       };
+    case 'uk-UA':
+      return {
+        translation: t('lng.ukraine'),
+        icon: 'ukraine',
+      };
     default:
       return {
         translation: t('lng.english'),

src/design-tokens/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 import i18next from 'i18next';
 
+import loadDayJSLocale from './load-dayjs-locale';
 import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
 import useLocalStorage from './useLocalStorage';
@@ -22,7 +23,8 @@ const ThemeProvider: React.FC = ({ children }) => {
 
   useEffect(() => {
     changeLanguage();
-  }, [language, changeLanguage]);
+    loadDayJSLocale();
+  }, [language, changeLanguage, loadDayJSLocale]);
 
   return (
     <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode, language, setLanguage }}>

src/design-tokens/load-dayjs-locale.ts

@@ -19,12 +19,7 @@ function loadDayJSLocale() {
   const fallbackLanguage = getFallFackLanguage();
   const locale = i18n.language || fallbackLanguage;
 
-  // dayjs loades en-US by default
-  if (!locale || locale === 'en-US') {
-    return;
-  }
-
-  switch (locale.toLowerCase()) {
+  switch (locale?.toLowerCase()) {
     case 'pt-br':
       {
         require('dayjs/locale/pt-br');
@@ -61,7 +56,17 @@ function loadDayJSLocale() {
         dayjs.locale('ja');
       }
       break;
+    case 'uk-ua':
+      {
+        require('dayjs/locale/uk');
+        dayjs.locale('uk');
+      }
+      break;
     default:
+      {
+        require('dayjs/locale/en');
+        dayjs.locale('en');
+      }
       break;
   }
 }