mirror of https://github.com/Radarr/Radarr
Fixed: Ensure translations are fetched before loading app
(cherry picked from commit ad2721dc55f3233e4c299babe5744418bc530418) Closes #8814 Closes #8817
This commit is contained in:
parent
f38077aac7
commit
c61cca7952
|
@ -83,6 +83,10 @@ module.exports = (env) => {
|
||||||
hints: false
|
hints: false
|
||||||
},
|
},
|
||||||
|
|
||||||
|
experiments: {
|
||||||
|
topLevelAwait: true
|
||||||
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
__DEV__: !isProduction,
|
__DEV__: !isProduction,
|
||||||
|
|
|
@ -7,13 +7,13 @@ import PageConnector from 'Components/Page/PageConnector';
|
||||||
import ApplyTheme from './ApplyTheme';
|
import ApplyTheme from './ApplyTheme';
|
||||||
import AppRoutes from './AppRoutes';
|
import AppRoutes from './AppRoutes';
|
||||||
|
|
||||||
function App({ store, history }) {
|
function App({ store, history, hasTranslationsError }) {
|
||||||
return (
|
return (
|
||||||
<DocumentTitle title={window.Radarr.instanceName}>
|
<DocumentTitle title={window.Radarr.instanceName}>
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<ConnectedRouter history={history}>
|
<ConnectedRouter history={history}>
|
||||||
<ApplyTheme>
|
<ApplyTheme>
|
||||||
<PageConnector>
|
<PageConnector hasTranslationsError={hasTranslationsError}>
|
||||||
<AppRoutes app={App} />
|
<AppRoutes app={App} />
|
||||||
</PageConnector>
|
</PageConnector>
|
||||||
</ApplyTheme>
|
</ApplyTheme>
|
||||||
|
@ -25,7 +25,8 @@ function App({ store, history }) {
|
||||||
|
|
||||||
App.propTypes = {
|
App.propTypes = {
|
||||||
store: PropTypes.object.isRequired,
|
store: PropTypes.object.isRequired,
|
||||||
history: PropTypes.object.isRequired
|
history: PropTypes.object.isRequired,
|
||||||
|
hasTranslationsError: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
@ -7,6 +7,7 @@ function ErrorPage(props) {
|
||||||
const {
|
const {
|
||||||
version,
|
version,
|
||||||
isLocalStorageSupported,
|
isLocalStorageSupported,
|
||||||
|
hasTranslationsError,
|
||||||
moviesError,
|
moviesError,
|
||||||
customFiltersError,
|
customFiltersError,
|
||||||
tagsError,
|
tagsError,
|
||||||
|
@ -20,6 +21,8 @@ function ErrorPage(props) {
|
||||||
|
|
||||||
if (!isLocalStorageSupported) {
|
if (!isLocalStorageSupported) {
|
||||||
errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
|
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) {
|
} else if (moviesError) {
|
||||||
errorMessage = getErrorMessage(moviesError, 'Failed to load movie from API');
|
errorMessage = getErrorMessage(moviesError, 'Failed to load movie from API');
|
||||||
} else if (customFiltersError) {
|
} else if (customFiltersError) {
|
||||||
|
@ -52,6 +55,7 @@ function ErrorPage(props) {
|
||||||
ErrorPage.propTypes = {
|
ErrorPage.propTypes = {
|
||||||
version: PropTypes.string.isRequired,
|
version: PropTypes.string.isRequired,
|
||||||
isLocalStorageSupported: PropTypes.bool.isRequired,
|
isLocalStorageSupported: PropTypes.bool.isRequired,
|
||||||
|
hasTranslationsError: PropTypes.bool.isRequired,
|
||||||
moviesError: PropTypes.object,
|
moviesError: PropTypes.object,
|
||||||
customFiltersError: PropTypes.object,
|
customFiltersError: PropTypes.object,
|
||||||
tagsError: PropTypes.object,
|
tagsError: PropTypes.object,
|
||||||
|
|
|
@ -232,6 +232,7 @@ class PageConnector extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
hasTranslationsError,
|
||||||
isPopulated,
|
isPopulated,
|
||||||
hasError,
|
hasError,
|
||||||
dispatchFetchMovies,
|
dispatchFetchMovies,
|
||||||
|
@ -246,11 +247,12 @@ class PageConnector extends Component {
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (hasError || !this.state.isLocalStorageSupported) {
|
if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
|
||||||
return (
|
return (
|
||||||
<ErrorPage
|
<ErrorPage
|
||||||
{...this.state}
|
{...this.state}
|
||||||
{...otherProps}
|
{...otherProps}
|
||||||
|
hasTranslationsError={hasTranslationsError}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -271,6 +273,7 @@ class PageConnector extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
PageConnector.propTypes = {
|
PageConnector.propTypes = {
|
||||||
|
hasTranslationsError: PropTypes.bool.isRequired,
|
||||||
isPopulated: PropTypes.bool.isRequired,
|
isPopulated: PropTypes.bool.isRequired,
|
||||||
hasError: PropTypes.bool.isRequired,
|
hasError: PropTypes.bool.isRequired,
|
||||||
isSidebarVisible: PropTypes.bool.isRequired,
|
isSidebarVisible: PropTypes.bool.isRequired,
|
||||||
|
|
|
@ -1,22 +1,27 @@
|
||||||
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||||
|
|
||||||
function getTranslations() {
|
function getTranslations() {
|
||||||
let localization = null;
|
return createAjaxRequest({
|
||||||
const ajaxOptions = {
|
global: false,
|
||||||
async: false,
|
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
url: '/localization',
|
url: '/localization'
|
||||||
success: function(data) {
|
}).request;
|
||||||
localization = data.Strings;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
createAjaxRequest(ajaxOptions);
|
|
||||||
|
|
||||||
return localization;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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) {
|
export default function translate(key, args) {
|
||||||
const translation = translations[key] || key;
|
const translation = translations[key] || key;
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { createBrowserHistory } from 'history';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from 'react-dom';
|
import { render } from 'react-dom';
|
||||||
import createAppStore from 'Store/createAppStore';
|
import createAppStore from 'Store/createAppStore';
|
||||||
import App from './App/App';
|
import { fetchTranslations } from 'Utilities/String/translate';
|
||||||
|
|
||||||
import './preload';
|
import './preload';
|
||||||
import './polyfills';
|
import './polyfills';
|
||||||
|
@ -11,11 +11,14 @@ import './index.css';
|
||||||
|
|
||||||
const history = createBrowserHistory();
|
const history = createBrowserHistory();
|
||||||
const store = createAppStore(history);
|
const store = createAppStore(history);
|
||||||
|
const hasTranslationsError = !await fetchTranslations();
|
||||||
|
const { default: App } = await import('./App/App');
|
||||||
|
|
||||||
render(
|
render(
|
||||||
<App
|
<App
|
||||||
store={store}
|
store={store}
|
||||||
history={history}
|
history={history}
|
||||||
|
hasTranslationsError={hasTranslationsError}
|
||||||
/>,
|
/>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue