Use English as fallback language

ui/src/i18nProvider/en.json

@@ -6,7 +6,7 @@
             "fields": {
                 "albumArtist": "Album Artist",
                 "duration": "Time",
-                "trackNumber": "Track #",
+                "trackNumber": "#",
                 "playCount": "Plays",
                 "title": "Title",
                 "artist": "Artist",
@@ -19,9 +19,7 @@
                 "updatedAt": "Uploaded at"
             },
             "actions": {
-                "addToQueue": "Play Later"
+                "addToQueue": "Play Later",
-            },
-            "action": {
                 "playNow": "Play Now"
             }
         },

ui/src/i18nProvider/index.js

@@ -1,28 +1,61 @@
 import polyglotI18nProvider from 'ra-i18n-polyglot'
+import { useGetList } from 'react-admin'
+import deepmerge from 'deepmerge'
 import dataProvider from '../dataProvider'
 import en from './en.json'
 
+// Only returns current selected locale if its translations are found in localStorage
 const defaultLocale = function () {
   const locale = localStorage.getItem('locale')
-  const current = JSON.parse(localStorage.getItem('translation'))
+  const current = localStorage.getItem('translation')
   if (current && current.id === locale) {
     return locale
   }
   return 'en'
 }
 
-const i18nProvider = polyglotI18nProvider((locale) => {
+const prepareLanguage = (lang) => {
-  if (locale === 'en') {
+  // Make "albumSongs" resource use the same translations as "song"
-    return en
+  lang.resources.albumSong = lang.resources.song
+  // ra.boolean.null should always be empty
+  lang.ra.boolean.null = ''
+  // Fallback to english translations
+  return deepmerge(en, lang)
 }
+
+const i18nProvider = polyglotI18nProvider((locale) => {
+  // English is bundled
+  if (locale === 'en') {
+    return prepareLanguage(en)
+  }
+  // If the requested locale is in already loaded, return it
   const current = JSON.parse(localStorage.getItem('translation'))
   if (current && current.id === locale) {
-    return JSON.parse(current.data)
+    return prepareLanguage(JSON.parse(current.data))
   }
+  // If not, get it from the server, and store it in localStorage
   return dataProvider.getOne('translation', { id: locale }).then((res) => {
     localStorage.setItem('translation', JSON.stringify(res.data))
-    return JSON.parse(res.data.data)
+    return prepareLanguage(JSON.parse(res.data.data))
   })
 }, defaultLocale())
 
 export default i18nProvider
+
+// React Hook to get a list of all languages available. English is hardcoded
+export const useGetLanguageChoices = () => {
+  const { ids, data, loaded, loading } = useGetList(
+    'translation',
+    { page: 1, perPage: -1 },
+    { field: '', order: '' },
+    {}
+  )
+
+  const choices = [{ id: 'en', name: 'English' }]
+  if (loaded) {
+    ids.forEach((id) => choices.push({ id: id, name: data[id].name }))
+  }
+  choices.sort((a, b) => a.name.localeCompare(b.name))
+
+  return { choices, loaded, loading }
+}

ui/src/personal/Personal.js

@@ -5,7 +5,6 @@ import {
   SelectInput,
   SimpleForm,
   Title,
-  useGetList,
   useLocale,
   useSetLocale,
   useTranslate,
@@ -15,6 +14,7 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
 import { changeTheme } from './actions'
 import themes from '../themes'
 import { docsUrl } from '../utils/docsUrl'
+import { useGetLanguageChoices } from '../i18nProvider'
 
 const useStyles = makeStyles({
   root: { marginTop: '1em' },
@@ -35,23 +35,12 @@ const HelpMsg = ({ caption }) => (
 )
 
 const SelectLanguage = (props) => {
-  const { ids, data, loaded } = useGetList(
-    'translation',
-    { page: 1, perPage: -1 },
-    { field: '', order: '' },
-    {}
-  )
-
   const translate = useTranslate()
   const setLocale = useSetLocale()
   const locale = useLocale()
+  const { choices } = useGetLanguageChoices()
 
-  const langChoices = [{ id: 'en', name: 'English' }]
+  choices.push({
-  if (loaded) {
-    ids.forEach((id) => langChoices.push({ id: id, name: data[id].name }))
-  }
-  langChoices.sort((a, b) => a.name.localeCompare(b.name))
-  langChoices.push({
     id: helpKey,
     name: <HelpMsg caption={'Help to translate'} />,
   })
@@ -62,7 +51,7 @@ const SelectLanguage = (props) => {
       source="language"
       label={translate('menu.personal.options.language')}
       defaultValue={locale}
-      choices={langChoices}
+      choices={choices}
       translateChoice={false}
       onChange={(event) => {
         if (event.target.value === helpKey) {