Updated lanquage selectors and fixed traditional chinese (#598)

* Updated lanquage selectors and fixed traditional chinese

#448 

- Modified the language selectors to remain the base language regardless of the translation.
- Traditional Chinese also had the wrong code and the name/code swapped.

* Removed the split on `-`

This was causing an issue with Chinese traditional / simplified.

* Updated supported lanquages for chinese

removed `zh` and replaced it with `zh-cn`. Modified the supported languages to match the `navigator.language` for chinese.

* Updated chinese lanquage codes

Updated the Chinese language codes to match the rest of the language codes.

* Fixing snapshots and fixing a deprecation problem

Co-authored-by: Jesús Espino <jespinog@gmail.com>

webapp/src/combinedProviders.tsx

@@ -22,7 +22,7 @@ const CombinedProviders = React.memo((props: Props): JSX.Element => {
     const {language, setLanguage, user} = props
     return (
         <IntlProvider
-            locale={language.split(/[-_]/)[0]}
+            locale={language.split(/[_]/)[0]}
             messages={getMessages(language)}
         >
             <SetLanguageContext.Provider value={setLanguage}>

webapp/src/components/properties/user/user.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import {IntlProvider} from 'react-intl'
-import {render, wait} from '@testing-library/react'
+import {render, waitFor} from '@testing-library/react'
 
 import {act} from 'react-dom/test-utils'
 
@@ -55,11 +55,10 @@ describe('components/properties/user', () => {
         )
 
         let container
-        act(() => {
+        await waitFor(() => {
             const renderResult = render(component)
             container = renderResult.container
         })
-        await wait()
         expect(container).toMatchSnapshot()
     })
 
@@ -74,11 +73,10 @@ describe('components/properties/user', () => {
         )
 
         let container
-        act(() => {
+        await waitFor(() => {
             const renderResult = render(component)
             container = renderResult.container
         })
-        await wait()
         expect(container).toMatchSnapshot()
     })
 
@@ -93,11 +91,10 @@ describe('components/properties/user', () => {
         )
 
         let container: Element | DocumentFragment = {} as Element
-        act(() => {
+        await waitFor(() => {
             const renderResult = render(component)
             container = renderResult.container
         })
-        await wait()
 
         if (container) {
             // this is the actual element where the click event triggers

webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap

@@ -112,7 +112,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Spanish
+                        Español
                       </div>
                       <div
                         class="noicon"
@@ -127,7 +127,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        German
+                        Deutsch
                       </div>
                       <div
                         class="noicon"
@@ -142,7 +142,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Japanese
+                        日本語
                       </div>
                       <div
                         class="noicon"
@@ -157,7 +157,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        French
+                        Français
                       </div>
                       <div
                         class="noicon"
@@ -172,7 +172,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Dutch
+                        Nederlands
                       </div>
                       <div
                         class="noicon"
@@ -187,7 +187,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Russian
+                        Pусский
                       </div>
                       <div
                         class="noicon"
@@ -202,7 +202,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Traditional Chinese
+                        中文 (繁體)
                       </div>
                       <div
                         class="noicon"
@@ -217,7 +217,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Simplified Chinese
+                        中文 (简体)
                       </div>
                       <div
                         class="noicon"
@@ -232,7 +232,7 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
                       <div
                         class="menu-name"
                       >
-                        Turkish
+                        Türkçe
                       </div>
                       <div
                         class="noicon"

webapp/src/components/sidebar/sidebarSettingsMenu.tsx

@@ -58,47 +58,47 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
         {
             code: 'es',
             name: 'spanish',
-            displayName: 'Spanish',
+            displayName: 'Español',
         },
         {
             code: 'de',
             name: 'german',
-            displayName: 'German',
+            displayName: 'Deutsch',
         },
         {
             code: 'ja',
             name: 'japanese',
-            displayName: 'Japanese',
+            displayName: '日本語',
         },
         {
             code: 'fr',
             name: 'french',
-            displayName: 'French',
+            displayName: 'Français',
         },
         {
             code: 'nl',
             name: 'dutch',
-            displayName: 'Dutch',
+            displayName: 'Nederlands',
         },
         {
             code: 'ru',
             name: 'russian',
-            displayName: 'Russian',
+            displayName: 'Pусский',
         },
         {
-            code: 'chinese',
-            name: 'zh',
-            displayName: 'Traditional Chinese',
+            code: 'zh-cn',
+            name: 'chinese',
+            displayName: '中文 (繁體)',
         },
         {
-            code: 'zh_Hans',
+            code: 'zh-tx',
             name: 'simplified-chinese',
-            displayName: 'Simplified Chinese',
+            displayName: '中文 (简体)',
         },
         {
             code: 'tr',
             name: 'turkish',
-            displayName: 'Turkish',
+            displayName: 'Türkçe',
         },
         {
             code: 'oc',
@@ -160,7 +160,7 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
                                 <Menu.Text
                                     key={language.code}
                                     id={`${language.name}-lang`}
-                                    name={intl.formatMessage({id: `Sidebar.${language.name}`, defaultMessage: language.displayName})}
+                                    name={language.displayName}
                                     onClick={async () => setLanguage(language.code)}
                                     rightIcon={intl.locale.toLowerCase() === language.code ? <CheckIcon/> : null}
                                 />

webapp/src/i18n.tsx

@@ -13,7 +13,7 @@ import messages_tr from '../i18n/tr.json'
 import messages_zhHant from '../i18n/zh_Hant.json'
 import messages_zhHans from '../i18n/zh_Hans.json'
 
-const supportedLanguages = ['de', 'fr', 'ja', 'nl', 'ru', 'es', 'oc', 'tr', 'zh', 'zh_Hant', 'zh_Hans']
+const supportedLanguages = ['de', 'fr', 'ja', 'nl', 'ru', 'es', 'oc', 'tr', 'zh-cn', 'zh-tw']
 
 export function getMessages(lang: string): {[key: string]: string} {
     switch (lang) {
@@ -33,11 +33,9 @@ export function getMessages(lang: string): {[key: string]: string} {
         return messages_oc
     case 'tr':
         return messages_tr
-    case 'zh':
+    case 'zh-cn':
         return messages_zhHant
-    case 'zh_Hant':
-        return messages_zhHant
-    case 'zh_Hans':
+    case 'zh-tw':
         return messages_zhHans
     }
     return messages_en