Merge branch 'master' into fix/default-language-app-startup

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/App.jsx

@@ -1,7 +1,12 @@
 import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
 import { createHashHistory } from 'history'
-import { Admin as RAAdmin, Resource } from 'react-admin'
+import {
+  Admin as RAAdmin,
+  Resource,
+  useSetLocale,
+  useRefresh,
+} from 'react-admin'
 import { HotKeys } from 'react-hotkeys'
 import dataProvider from './dataProvider'
 import authProvider from './authProvider'
@@ -32,7 +37,7 @@ import {
   shareDialogReducer,
 } from './reducers'
 import createAdminStore from './store/createAdminStore'
-import { i18nProvider } from './i18n'
+import { i18nProvider, retrieveTranslation } from './i18n'
 import config, { shareInfo } from './config'
 import { keyMap } from './hotkeys'
 import useChangeThemeColor from './useChangeThemeColor'
@@ -40,6 +45,7 @@ import SharePlayer from './share/SharePlayer'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { DndProvider } from 'react-dnd'
 import missing from './missing/index.js'
+import { useEffect } from 'react'
 
 const history = createHashHistory()
 
@@ -78,6 +84,24 @@ const App = () => (
 )
 
 const Admin = (props) => {
+  const setLocale = useSetLocale()
+  const refresh = useRefresh()
+  useEffect(() => {
+    if (config.defaultLanguage !== '' && !localStorage.getItem('locale')) {
+      retrieveTranslation(config.defaultLanguage)
+        .then(() => setLocale(config.defaultLanguage))
+        .then(() => {
+          localStorage.setItem('locale', config.defaultLanguage)
+          refresh(true)
+        })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(
+            'Cannot load language "' + config.defaultLanguage + '": ' + e,
+          )
+        })
+    }
+  }, [setLocale, refresh])
   useChangeThemeColor()
   /* eslint-disable react/jsx-key */
   return (

ui/src/layout/Login.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Field, Form } from 'react-final-form'
 import { useDispatch } from 'react-redux'
@@ -13,8 +13,6 @@ import {
   createMuiTheme,
   useLogin,
   useNotify,
-  useRefresh,
-  useSetLocale,
   useTranslate,
   useVersion,
 } from 'react-admin'
@@ -24,7 +22,6 @@ import Notification from './Notification'
 import useCurrentTheme from '../themes/useCurrentTheme'
 import config from '../config'
 import { clearQueue } from '../actions'
-import { retrieveTranslation } from '../i18n'
 import { INSIGHTS_DOC_URL } from '../consts.js'
 
 const useStyles = makeStyles(
@@ -400,27 +397,8 @@ Login.propTypes = {
 // the right theme
 const LoginWithTheme = (props) => {
   const theme = useCurrentTheme()
-  const setLocale = useSetLocale()
-  const refresh = useRefresh()
   const version = useVersion()
 
-  useEffect(() => {
-    if (config.defaultLanguage !== '' && !localStorage.getItem('locale')) {
-      retrieveTranslation(config.defaultLanguage)
-        .then(() => {
-          setLocale(config.defaultLanguage).then(() => {
-            localStorage.setItem('locale', config.defaultLanguage)
-          })
-          refresh(true)
-        })
-        .catch((e) => {
-          throw new Error(
-            'Cannot load language "' + config.defaultLanguage + '": ' + e,
-          )
-        })
-    }
-  }, [refresh, setLocale])
-
   return (
     <ThemeProvider theme={createMuiTheme(theme)}>
       <Login key={version} {...props} />