Fixed: Ensure translations are fetched before loading app

(cherry picked from commit ad2721dc55f3233e4c299babe5744418bc530418)

Closes #8814
Closes #8817
This commit is contained in:
Mark McDowall 2023-07-14 16:55:25 -07:00 committed by Bogdan
parent f38077aac7
commit c61cca7952
6 changed files with 38 additions and 18 deletions

View File

@ -83,6 +83,10 @@ module.exports = (env) => {
hints: false
},
experiments: {
topLevelAwait: true
},
plugins: [
new webpack.DefinePlugin({
__DEV__: !isProduction,

View File

@ -7,13 +7,13 @@ import PageConnector from 'Components/Page/PageConnector';
import ApplyTheme from './ApplyTheme';
import AppRoutes from './AppRoutes';
function App({ store, history }) {
function App({ store, history, hasTranslationsError }) {
return (
<DocumentTitle title={window.Radarr.instanceName}>
<Provider store={store}>
<ConnectedRouter history={history}>
<ApplyTheme>
<PageConnector>
<PageConnector hasTranslationsError={hasTranslationsError}>
<AppRoutes app={App} />
</PageConnector>
</ApplyTheme>
@ -25,7 +25,8 @@ function App({ store, history }) {
App.propTypes = {
store: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
history: PropTypes.object.isRequired,
hasTranslationsError: PropTypes.bool.isRequired
};
export default App;

View File

@ -7,6 +7,7 @@ function ErrorPage(props) {
const {
version,
isLocalStorageSupported,
hasTranslationsError,
moviesError,
customFiltersError,
tagsError,
@ -20,6 +21,8 @@ function ErrorPage(props) {
if (!isLocalStorageSupported) {
errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
} else if (hasTranslationsError) {
errorMessage = 'Failed to load translations from API';
} else if (moviesError) {
errorMessage = getErrorMessage(moviesError, 'Failed to load movie from API');
} else if (customFiltersError) {
@ -52,6 +55,7 @@ function ErrorPage(props) {
ErrorPage.propTypes = {
version: PropTypes.string.isRequired,
isLocalStorageSupported: PropTypes.bool.isRequired,
hasTranslationsError: PropTypes.bool.isRequired,
moviesError: PropTypes.object,
customFiltersError: PropTypes.object,
tagsError: PropTypes.object,

View File

@ -232,6 +232,7 @@ class PageConnector extends Component {
render() {
const {
hasTranslationsError,
isPopulated,
hasError,
dispatchFetchMovies,
@ -246,11 +247,12 @@ class PageConnector extends Component {
...otherProps
} = this.props;
if (hasError || !this.state.isLocalStorageSupported) {
if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
return (
<ErrorPage
{...this.state}
{...otherProps}
hasTranslationsError={hasTranslationsError}
/>
);
}
@ -271,6 +273,7 @@ class PageConnector extends Component {
}
PageConnector.propTypes = {
hasTranslationsError: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
hasError: PropTypes.bool.isRequired,
isSidebarVisible: PropTypes.bool.isRequired,

View File

@ -1,22 +1,27 @@
import createAjaxRequest from 'Utilities/createAjaxRequest';
function getTranslations() {
let localization = null;
const ajaxOptions = {
async: false,
return createAjaxRequest({
global: false,
dataType: 'json',
url: '/localization',
success: function(data) {
localization = data.Strings;
}
};
createAjaxRequest(ajaxOptions);
return localization;
url: '/localization'
}).request;
}
const translations = getTranslations();
let translations = {};
export function fetchTranslations() {
return new Promise(async(resolve) => {
try {
const data = await getTranslations();
translations = data.Strings;
resolve(true);
} catch (error) {
resolve(false);
}
});
}
export default function translate(key, args) {
const translation = translations[key] || key;

View File

@ -2,7 +2,7 @@ import { createBrowserHistory } from 'history';
import React from 'react';
import { render } from 'react-dom';
import createAppStore from 'Store/createAppStore';
import App from './App/App';
import { fetchTranslations } from 'Utilities/String/translate';
import './preload';
import './polyfills';
@ -11,11 +11,14 @@ import './index.css';
const history = createBrowserHistory();
const store = createAppStore(history);
const hasTranslationsError = !await fetchTranslations();
const { default: App } = await import('./App/App');
render(
<App
store={store}
history={history}
hasTranslationsError={hasTranslationsError}
/>,
document.getElementById('root')
);