Fixed: Improve translation loading

(cherry picked from commit 73c5ec1da4dd00301e1b0dddbcea37590a99b045)

Closes #2699

frontend/src/Components/Page/ErrorPage.js

@@ -7,7 +7,7 @@ function ErrorPage(props) {
   const {
     version,
     isLocalStorageSupported,
-    hasTranslationsError,
+    translationsError,
     authorError,
     customFiltersError,
     tagsError,
@@ -21,8 +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 (translationsError) {
+    errorMessage = getErrorMessage(translationsError, 'Failed to load translations from API');
   } else if (authorError) {
     errorMessage = getErrorMessage(authorError, 'Failed to load author from API');
   } else if (customFiltersError) {
@@ -55,7 +55,7 @@ function ErrorPage(props) {
 ErrorPage.propTypes = {
   version: PropTypes.string.isRequired,
   isLocalStorageSupported: PropTypes.bool.isRequired,
-  hasTranslationsError: PropTypes.bool.isRequired,
+  translationsError: PropTypes.object,
   authorError: PropTypes.object,
   customFiltersError: PropTypes.object,
   tagsError: PropTypes.object,

frontend/src/Components/Page/PageConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { createSelector } from 'reselect';
-import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
+import { fetchTranslations, saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchAuthor } from 'Store/Actions/authorActions';
 import { fetchBooks } from 'Store/Actions/bookActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
@@ -52,6 +52,7 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.metadataProfiles.isPopulated,
   (state) => state.settings.importLists.isPopulated,
   (state) => state.system.status.isPopulated,
+  (state) => state.app.translations.isPopulated,
   (
     customFiltersIsPopulated,
     tagsIsPopulated,
@@ -60,7 +61,8 @@ const selectIsPopulated = createSelector(
     qualityProfilesIsPopulated,
     metadataProfilesIsPopulated,
     importListsIsPopulated,
-    systemStatusIsPopulated
+    systemStatusIsPopulated,
+    translationsIsPopulated
   ) => {
     return (
       customFiltersIsPopulated &&
@@ -70,7 +72,8 @@ const selectIsPopulated = createSelector(
       qualityProfilesIsPopulated &&
       metadataProfilesIsPopulated &&
       importListsIsPopulated &&
-      systemStatusIsPopulated
+      systemStatusIsPopulated &&
+      translationsIsPopulated
     );
   }
 );
@@ -84,6 +87,7 @@ const selectErrors = createSelector(
   (state) => state.settings.metadataProfiles.error,
   (state) => state.settings.importLists.error,
   (state) => state.system.status.error,
+  (state) => state.app.translations.error,
   (
     customFiltersError,
     tagsError,
@@ -92,7 +96,8 @@ const selectErrors = createSelector(
     qualityProfilesError,
     metadataProfilesError,
     importListsError,
-    systemStatusError
+    systemStatusError,
+    translationsError
   ) => {
     const hasError = !!(
       customFiltersError ||
@@ -102,7 +107,8 @@ const selectErrors = createSelector(
       qualityProfilesError ||
       metadataProfilesError ||
       importListsError ||
-      systemStatusError
+      systemStatusError ||
+      translationsError
     );
 
     return {
@@ -114,7 +120,8 @@ const selectErrors = createSelector(
       qualityProfilesError,
       metadataProfilesError,
       importListsError,
-      systemStatusError
+      systemStatusError,
+      translationsError
     };
   }
 );
@@ -176,6 +183,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchStatus() {
       dispatch(fetchStatus());
     },
+    dispatchFetchTranslations() {
+      dispatch(fetchTranslations());
+    },
     onResize(dimensions) {
       dispatch(saveDimensions(dimensions));
     },
@@ -210,6 +220,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchImportLists();
       this.props.dispatchFetchUISettings();
       this.props.dispatchFetchStatus();
+      this.props.dispatchFetchTranslations();
     }
   }
 
@@ -225,7 +236,6 @@ class PageConnector extends Component {
 
   render() {
     const {
-      hasTranslationsError,
       isPopulated,
       hasError,
       dispatchFetchAuthor,
@@ -237,15 +247,15 @@ class PageConnector extends Component {
       dispatchFetchImportLists,
       dispatchFetchUISettings,
       dispatchFetchStatus,
+      dispatchFetchTranslations,
       ...otherProps
     } = this.props;
 
-    if (hasTranslationsError || hasError || !this.state.isLocalStorageSupported) {
+    if (hasError || !this.state.isLocalStorageSupported) {
       return (
         <ErrorPage
           {...this.state}
           {...otherProps}
-          hasTranslationsError={hasTranslationsError}
         />
       );
     }
@@ -266,7 +276,6 @@ class PageConnector extends Component {
 }
 
 PageConnector.propTypes = {
-  hasTranslationsError: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   hasError: PropTypes.bool.isRequired,
   isSidebarVisible: PropTypes.bool.isRequired,
@@ -280,6 +289,7 @@ PageConnector.propTypes = {
   dispatchFetchImportLists: PropTypes.func.isRequired,
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
+  dispatchFetchTranslations: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
 };
 

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -21,28 +21,28 @@ const SIDEBAR_WIDTH = parseInt(dimensions.sidebarWidth);
 const links = [
   {
     iconName: icons.AUTHOR_CONTINUING,
-    title: 'Library',
+    title: () => translate('Library'),
     to: '/',
     alias: '/authors',
     children: [
       {
-        title: 'Authors',
+        title: () => translate('Authors'),
         to: '/authors'
       },
       {
-        title: 'Books',
+        title: () => translate('Books'),
         to: '/books'
       },
       {
-        title: 'Add New',
+        title: () => translate('AddNew'),
         to: '/add/search'
       },
       {
-        title: 'Bookshelf',
+        title: () => translate('Bookshelf'),
         to: '/shelf'
       },
       {
-        title: 'Unmapped Files',
+        title: () => translate('UnmappedFiles'),
         to: '/unmapped'
       }
     ]
@@ -50,26 +50,26 @@ const links = [
 
   {
     iconName: icons.CALENDAR,
-    title: 'Calendar',
+    title: () => translate('Calendar'),
     to: '/calendar'
   },
 
   {
     iconName: icons.ACTIVITY,
-    title: 'Activity',
+    title: () => translate('Activity'),
     to: '/activity/queue',
     children: [
       {
-        title: 'Queue',
+        title: () => translate('Queue'),
         to: '/activity/queue',
         statusComponent: QueueStatusConnector
       },
       {
-        title: 'History',
+        title: () => translate('History'),
         to: '/activity/history'
       },
       {
-        title: 'Blocklist',
+        title: () => translate('Blocklist'),
         to: '/activity/blocklist'
       }
     ]
@@ -77,15 +77,15 @@ const links = [
 
   {
     iconName: icons.WARNING,
-    title: 'Wanted',
+    title: () => translate('Wanted'),
     to: '/wanted/missing',
     children: [
       {
-        title: 'Missing',
+        title: () => translate('Missing'),
         to: '/wanted/missing'
       },
       {
-        title: 'Cutoff Unmet',
+        title: () => translate('CutoffUnmet'),
         to: '/wanted/cutoffunmet'
       }
     ]
@@ -93,19 +93,19 @@ const links = [
 
   {
     iconName: icons.SETTINGS,
-    title: 'Settings',
+    title: () => translate('Settings'),
     to: '/settings',
     children: [
       {
-        title: 'Media Management',
+        title: () => translate('MediaManagement'),
         to: '/settings/mediamanagement'
       },
       {
-        title: 'Profiles',
+        title: () => translate('Profiles'),
         to: '/settings/profiles'
       },
       {
-        title: 'Quality',
+        title: () => translate('Quality'),
         to: '/settings/quality'
       },
       {
@@ -117,31 +117,31 @@ const links = [
         to: '/settings/indexers'
       },
       {
-        title: 'Download Clients',
+        title: () => translate('DownloadClients'),
         to: '/settings/downloadclients'
       },
       {
-        title: 'Import Lists',
+        title: () => translate('ImportLists'),
         to: '/settings/importlists'
       },
       {
-        title: 'Connect',
+        title: () => translate('Connect'),
         to: '/settings/connect'
       },
       {
-        title: 'Metadata',
+        title: () => translate('Metadata'),
         to: '/settings/metadata'
       },
       {
-        title: 'Tags',
+        title: () => translate('Tags'),
         to: '/settings/tags'
       },
       {
-        title: 'General',
+        title: () => translate('General'),
         to: '/settings/general'
       },
       {
-        title: 'UI',
+        title: () => translate('Ui'),
         to: '/settings/ui'
       }
     ]
@@ -149,32 +149,32 @@ const links = [
 
   {
     iconName: icons.SYSTEM,
-    title: 'System',
+    title: () => translate('System'),
     to: '/system/status',
     children: [
       {
-        title: 'Status',
+        title: () => translate('Status'),
         to: '/system/status',
         statusComponent: HealthStatusConnector
       },
       {
-        title: 'Tasks',
+        title: () => translate('Tasks'),
         to: '/system/tasks'
       },
       {
-        title: 'Backup',
+        title: () => translate('Backup'),
         to: '/system/backup'
       },
       {
-        title: 'Updates',
+        title: () => translate('Updates'),
         to: '/system/updates'
       },
       {
-        title: 'Events',
+        title: () => translate('Events'),
         to: '/system/events'
       },
       {
-        title: 'Log Files',
+        title: () => translate('LogFiles'),
         to: '/system/logs/files'
       }
     ]