english fallback when using other languages

src/utils/language.ts

@@ -21,38 +21,53 @@ export default class Tr extends React.Component<IProps, IState> {
     }
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     const { text } = this.props
-    getConfigOption('language').then((language: string) => {
+    let language = await getConfigOption('language')
-      // Get translation file
-      if (!language) language = 'en'
 
-      invoke('get_lang', { lang: language }).then((response) => {
+    // Get translation file
-        const translation_obj = JSON.parse((response as string) || '{}')
+    if (!language) language = 'en'
 
-        // Traversal
+    const response = await invoke('get_lang', { lang: language })
-        if (text.includes('.')) {
+    const default_resp = await invoke('get_lang', { lang: 'en' })
-          const keys = text.split('.')
-          let translation: string | Record<string, string> = translation_obj
 
-          for (let i = 0; i < keys.length; i++) {
+    const translation_obj = JSON.parse((response as string) || '{}')
-            if (!translation) {
+    const default_obj = JSON.parse((default_resp as string) || '{}')
-              translation = ''
-            } else {
-              translation = typeof translation !== 'string' ? translation[keys[i]] : (translation as string)
-            }
-          }
 
-          this.setState({
+    // Traversal
-            translated_text: translation as string,
+    if (text.includes('.')) {
-          })
+      const keys = text.split('.')
+      let translation: string | Record<string, string> = translation_obj
+
+      for (let i = 0; i < keys.length; i++) {
+        if (!translation) {
+          translation = ''
         } else {
-          this.setState({
+          translation = typeof translation !== 'string' ? translation[keys[i]] : (translation as string)
-            translated_text: translation_obj[text] || '',
-          })
         }
+      }
+
+      // If we could not find a translation, use the default one
+      if (!translation) {
+        translation = default_obj
+
+        for (let i = 0; i < keys.length; i++) {
+          if (!translation) {
+            translation = ''
+          } else {
+            translation = typeof translation !== 'string' ? translation[keys[i]] : (translation as string)
+          }
+        }
+      }
+
+      this.setState({
+        translated_text: translation as string,
       })
-    })
+    } else {
+      this.setState({
+        translated_text: translation_obj[text] || '',
+      })
+    }
   }
 
   render() {
@@ -82,6 +97,7 @@ export async function getLanguages() {
 export async function translate(text: string) {
   const language = (await getConfigOption('language')) || 'en'
   const translation_json = JSON.parse((await invoke('get_lang', { lang: language })) || '{}')
+  const default_json = JSON.parse(await invoke('get_lang', { lang: 'en' }))
 
   // Traversal
   if (text.includes('.')) {
@@ -96,6 +112,19 @@ export async function translate(text: string) {
       }
     }
 
+    // If we could not find a translation, use the default one
+    if (!translation) {
+      translation = default_json
+
+      for (let i = 0; i < keys.length; i++) {
+        if (!translation) {
+          translation = ''
+        } else {
+          translation = typeof translation !== 'string' ? translation[keys[i]] : (translation as string)
+        }
+      }
+    }
+
     return translation
   } else {
     return translation_json[text] || ''