Improve support for use of i18next; rely on browser caching to keep things simple

resources/scripts/i18n.ts

@@ -1,32 +1,35 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import LocalStorageBackend from 'i18next-localstorage-backend';
-import XHR from 'i18next-xhr-backend';
-import Backend from 'i18next-chained-backend';
+import I18NextHttpBackend, { BackendOptions } from 'i18next-http-backend';
+import I18NextMultiloadBackendAdapter from 'i18next-multiload-backend-adapter';
+
+// If we're using HMR use a unique hash per page reload so that we're always
+// doing cache busting. Otherwise just use the builder provided hash value in
+// the URL to allow cache busting to occur whenever the front-end is rebuilt.
+const hash = module.hot ? Date.now().toString(16) : process.env.WEBPACK_BUILD_HASH;
 
 i18n
-    .use(Backend)
+    .use(I18NextMultiloadBackendAdapter)
     .use(initReactI18next)
     .init({
-        debug: process.env.NODE_ENV !== 'production',
+        debug: process.env.DEBUG === 'true',
         lng: 'en',
         fallbackLng: 'en',
         keySeparator: '.',
         backend: {
-            backends: [
-                LocalStorageBackend,
-                XHR,
-            ],
-            backendOptions: [ {
-                prefix: 'pterodactyl_lng__',
-                expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days, in milliseconds
-                store: window.localStorage,
-            }, {
-                loadPath: '/locales/{{lng}}/{{ns}}.json',
-            } ],
+            backend: I18NextHttpBackend,
+            backendOption: {
+                loadPath: `/locales/locale.json?locale={{lng}}&namespace={{ns}}&hash=${hash}`,
+                allowMultiLoading: true,
+            } as BackendOptions,
+        } as Record<string, any>,
+        interpolation: {
+            // Per i18n-react documentation: this is not needed since React is already
+            // handling escapes for us.
+            escapeValue: false,
         },
     });
 
-// i18n.loadNamespaces(['validation']);
+i18n.loadNamespaces([ 'validation' ]).catch(console.error);
 
 export default i18n;