Fixed: Improve translation loading

(cherry picked from commit 73c5ec1da4dd00301e1b0dddbcea37590a99b045)

Closes #2699

frontend/src/Store/Actions/appActions.js

@@ -4,6 +4,7 @@ import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import getSectionState from 'Utilities/State/getSectionState';
 import updateSectionState from 'Utilities/State/updateSectionState';
+import { fetchTranslations as fetchAppTranslations } from 'Utilities/String/translate';
 import createHandleActions from './Creators/createHandleActions';
 
 function getDimensions(width, height) {
@@ -41,7 +42,12 @@ export const defaultState = {
   isReconnecting: false,
   isDisconnected: false,
   isRestarting: false,
-  isSidebarVisible: !getDimensions(window.innerWidth, window.innerHeight).isSmallScreen
+  isSidebarVisible: !getDimensions(window.innerWidth, window.innerHeight).isSmallScreen,
+  translations: {
+    isFetching: true,
+    isPopulated: false,
+    error: null
+  }
 };
 
 //
@@ -53,6 +59,7 @@ export const SAVE_DIMENSIONS = 'app/saveDimensions';
 export const SET_VERSION = 'app/setVersion';
 export const SET_APP_VALUE = 'app/setAppValue';
 export const SET_IS_SIDEBAR_VISIBLE = 'app/setIsSidebarVisible';
+export const FETCH_TRANSLATIONS = 'app/fetchTranslations';
 
 export const PING_SERVER = 'app/pingServer';
 
@@ -66,6 +73,7 @@ export const setAppValue = createAction(SET_APP_VALUE);
 export const showMessage = createAction(SHOW_MESSAGE);
 export const hideMessage = createAction(HIDE_MESSAGE);
 export const pingServer = createThunk(PING_SERVER);
+export const fetchTranslations = createThunk(FETCH_TRANSLATIONS);
 
 //
 // Helpers
@@ -127,6 +135,17 @@ function pingServerAfterTimeout(getState, dispatch) {
 export const actionHandlers = handleThunks({
   [PING_SERVER]: function(getState, payload, dispatch) {
     pingServerAfterTimeout(getState, dispatch);
+  },
+  [FETCH_TRANSLATIONS]: async function(getState, payload, dispatch) {
+    const isFetchingComplete = await fetchAppTranslations();
+
+    dispatch(setAppValue({
+      translations: {
+        isFetching: false,
+        isPopulated: isFetchingComplete,
+        error: isFetchingComplete ? null : 'Failed to load translations from API'
+      }
+    }));
   }
 });
 

frontend/src/Store/Actions/bookActions.js

@@ -24,12 +24,12 @@ export const section = 'books';
 export const filters = [
   {
     key: 'all',
-    label: translate('All'),
+    label: () => translate('All'),
     filters: []
   },
   {
     key: 'monitored',
-    label: translate('Monitored'),
+    label: () => translate('Monitored'),
     filters: [
       {
         key: 'monitored',
@@ -40,7 +40,7 @@ export const filters = [
   },
   {
     key: 'unmonitored',
-    label: translate('Unmonitored'),
+    label: () => translate('Unmonitored'),
     filters: [
       {
         key: 'monitored',
@@ -51,7 +51,7 @@ export const filters = [
   },
   {
     key: 'missing',
-    label: translate('Missing'),
+    label: () => translate('Missing'),
     filters: [
       {
         key: 'monitored',
@@ -67,7 +67,7 @@ export const filters = [
   },
   {
     key: 'wanted',
-    label: translate('Wanted'),
+    label: () => translate('Wanted'),
     filters: [
       {
         key: 'monitored',

frontend/src/Store/Actions/queueActions.js

@@ -60,32 +60,32 @@ export const defaultState = {
     columns: [
       {
         name: 'status',
-        columnLabel: translate('Status'),
+        columnLabel: () => translate('Status'),
         isSortable: true,
         isVisible: true,
         isModifiable: false
       },
       {
         name: 'authorMetadata.sortName',
-        label: translate('Author'),
+        label: () => translate('Author'),
         isSortable: true,
         isVisible: true
       },
       {
         name: 'books.title',
-        label: translate('BookTitle'),
+        label: () => translate('BookTitle'),
         isSortable: true,
         isVisible: true
       },
       {
         name: 'books.releaseDate',
-        label: translate('ReleaseDate'),
+        label: () => translate('ReleaseDate'),
         isSortable: true,
         isVisible: false
       },
       {
         name: 'quality',
-        label: translate('Quality'),
+        label: () => translate('Quality'),
         isSortable: true,
         isVisible: true
       },
@@ -97,64 +97,64 @@ export const defaultState = {
       },
       {
         name: 'customFormatScore',
-        columnLabel: translate('CustomFormatScore'),
+        columnLabel: () => translate('CustomFormatScore'),
         label: React.createElement(Icon, {
           name: icons.SCORE,
-          title: translate('CustomFormatScore')
+          title: () => translate('CustomFormatScore')
         }),
         isVisible: false
       },
       {
         name: 'protocol',
-        label: translate('Protocol'),
+        label: () => translate('Protocol'),
         isSortable: true,
         isVisible: false
       },
       {
         name: 'indexer',
-        label: translate('Indexer'),
+        label: () => translate('Indexer'),
         isSortable: true,
         isVisible: false
       },
       {
         name: 'downloadClient',
-        label: translate('DownloadClient'),
+        label: () => translate('DownloadClient'),
         isSortable: true,
         isVisible: false
       },
       {
         name: 'title',
-        label: translate('ReleaseTitle'),
+        label: () => translate('ReleaseTitle'),
         isSortable: true,
         isVisible: false
       },
       {
         name: 'size',
-        label: translate('Size'),
+        label: () => translate('Size'),
         isSortable: true,
         isVisible: false
       },
       {
         name: 'outputPath',
-        label: translate('OutputPath'),
+        label: () => translate('OutputPath'),
         isSortable: false,
         isVisible: false
       },
       {
         name: 'estimatedCompletionTime',
-        label: translate('TimeLeft'),
+        label: () => translate('TimeLeft'),
         isSortable: true,
         isVisible: true
       },
       {
         name: 'progress',
-        label: translate('Progress'),
+        label: () => translate('Progress'),
         isSortable: true,
         isVisible: true
       },
       {
         name: 'actions',
-        columnLabel: translate('Actions'),
+        columnLabel: () => translate('Actions'),
         isVisible: true,
         isModifiable: false
       }

frontend/src/Store/Actions/releaseActions.js

@@ -199,7 +199,7 @@ export const defaultState = {
     },
     {
       name: 'customFormatScore',
-      label: translate('CustomFormatScore'),
+      label: () => translate('CustomFormatScore'),
       type: filterBuilderTypes.NUMBER
     },
     {

frontend/src/Store/Actions/systemActions.js

@@ -82,34 +82,34 @@ export const defaultState = {
     columns: [
       {
         name: 'level',
-        columnLabel: translate('Level'),
+        columnLabel: () => translate('Level'),
         isSortable: false,
         isVisible: true,
         isModifiable: false
       },
       {
         name: 'time',
-        label: translate('Time'),
+        label: () => translate('Time'),
         isSortable: true,
         isVisible: true,
         isModifiable: false
       },
       {
         name: 'logger',
-        label: translate('Component'),
+        label: () => translate('Component'),
         isSortable: false,
         isVisible: true,
         isModifiable: false
       },
       {
         name: 'message',
-        label: translate('Message'),
+        label: () => translate('Message'),
         isVisible: true,
         isModifiable: false
       },
       {
         name: 'actions',
-        columnLabel: translate('Actions'),
+        columnLabel: () => translate('Actions'),
         isSortable: true,
         isVisible: true,
         isModifiable: false