Add i18n apply button (#2968)

packages/page-settings/src/I18n/index.tsx

@@ -6,6 +6,7 @@ import FileSaver from 'file-saver';
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Columar, Column, Dropdown, Progress, Spinner, Toggle } from '@polkadot/react-components';
+import i18n from '@polkadot/react-components/i18n';
 import languageCache from '@polkadot/react-components/i18n/cache';
 import { useToggle } from '@polkadot/react-hooks';
 import uiSettings from '@polkadot/ui-settings';
@@ -185,6 +186,13 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
     [english, lng]
   );
 
+  const _doApply = useCallback(
+    (): void => {
+      i18n.reloadResources().catch(console.error);
+    },
+    []
+  );
+
   const _onDownload = useCallback(
     () => doDownload(strings || {}, withEmpty),
     [strings, withEmpty]
@@ -242,6 +250,11 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
         />
       </div>
       <Button.Group>
+        <Button
+          icon='refresh'
+          label={t<string>('Apply to UI')}
+          onClick={_doApply}
+        />
         <Button
           icon='download'
           label={t<string>('Generate {{lng}}/translation.json', { replace: { lng } })}

packages/react-components/src/i18n/index.ts

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import i18n from 'i18next';
+import i18next from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import uiSettings, { LANGUAGE_DEFAULT } from '@polkadot/ui-settings';
@@ -22,7 +22,7 @@ languageDetector.addDetector({
   name: 'i18nLangDetector'
 });
 
-i18n
+i18next
   .use(languageDetector)
   .use(initReactI18next)
   .use(Backend)
@@ -84,12 +84,12 @@ i18n
   );
 
 uiSettings.on('change', (settings): void => {
-  i18n.changeLanguage(
+  i18next.changeLanguage(
     settings.i18nLang === LANGUAGE_DEFAULT
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-      ? i18n.services.languageDetector.detect()
+      ? i18next.services.languageDetector.detect()
       : settings.i18nLang
   ).catch(console.error);
 });
 
-export default i18n;
+export default i18next;