i18n: use babel-loader plugin

src/explorer/renameFileDialog/18n.test.ts

@@ -2,11 +2,11 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import { lookup } from '../../../test';
-import { RenameFileDialogStringId } from './i18n';
-import en from './i18n.en.json';
+import { I18nId } from './i18n';
+import en from './translations/en.json';
 
-describe('Ensure .json file has matches for RenameFileStringId', () => {
-    test.each(Object.values(RenameFileDialogStringId))('%s', (id) => {
+describe('Ensure .json file has matches for I18nId', () => {
+    test.each(Object.values(I18nId))('%s', (id) => {
         expect(lookup(en, id)).toBeDefined();
     });
 });

src/explorer/renameFileDialog/RenameFileDialog.tsx

@@ -10,20 +10,15 @@ import {
     validateFileName,
 } from '../../pybricksMicropython/lib';
 import { useSelector } from '../../reducers';
-import FileNameFormGroup from '../FileNameFormGroup';
+import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { renameFileDialogDidAccept, renameFileDialogDidCancel } from './actions';
-import { RenameFileDialogStringId } from './i18n';
-import en from './i18n.en.json';
+import { I18nId } from './i18n';
 
 const RenameFileDialog: React.VFC = () => {
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.renameFileDialog.isOpen);
     const oldName = useSelector((s) => s.explorer.renameFileDialog.fileName);
-    const [i18n] = useI18n({
-        id: 'renameFileDialog',
-        translations: { en },
-        fallback: en,
-    });
+    const [i18n] = useI18n();
 
     const [baseName, extension] = oldName.split(/(\.\w+)$/);
 
@@ -47,7 +42,7 @@ const RenameFileDialog: React.VFC = () => {
 
     return (
         <Dialog
-            title={i18n.translate(RenameFileDialogStringId.Title, {
+            title={i18n.translate(I18nId.Title, {
                 fileName: oldName,
             })}
             isOpen={isOpen}
@@ -75,7 +70,7 @@ const RenameFileDialog: React.VFC = () => {
                             disabled={result !== FileNameValidationResult.IsOk}
                             type="submit"
                         >
-                            {i18n.translate(RenameFileDialogStringId.ActionRename)}
+                            {i18n.translate(I18nId.ActionRename)}
                         </Button>
                     </div>
                 </div>

src/explorer/renameFileDialog/i18n.en.json

@@ -1,8 +0,0 @@
-{
-    "renameFileDialog": {
-        "title": "Rename '{fileName}'",
-        "action": {
-            "rename": "Rename"
-        }
-    }
-}

src/explorer/renameFileDialog/i18n.ts

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-export enum RenameFileDialogStringId {
-    Title = 'renameFileDialog.title',
-    ActionRename = 'renameFileDialog.action.rename',
+export enum I18nId {
+    Title = 'title',
+    ActionRename = 'action.rename',
 }

src/explorer/renameFileDialog/translations/en.json

@@ -0,0 +1,6 @@
+{
+    "title": "Rename '{fileName}'",
+    "action": {
+        "rename": "Rename"
+    }
+}