Merge pull request #292 from NDLA-H5P/fix/missing-translation-keys

library.json

@@ -3,7 +3,7 @@
   "machineName": "H5PEditor.TopicMap",
   "majorVersion": 0,
   "minorVersion": 1,
-  "patchVersion": 13,
+  "patchVersion": 14,
   "runnable": 0,
   "preloadedJs": [
     {

src/components/Draggable/Draggable.tsx

@@ -1,25 +1,27 @@
 import * as React from "react";
+import { useState } from "react";
 import { t } from "../../h5p/H5P.util";
 import { ArrowType } from "../../types/ArrowType";
+import { ContextMenuAction } from "../../types/ContextMenuAction";
 import { OccupiedCell } from "../../types/OccupiedCell";
 import { Position } from "../../types/Position";
+import { ResizeDirection } from "../../types/ResizeDirection";
 import { Size } from "../../types/Size";
+import { TranslationKey } from "../../types/TranslationKey";
 import {
   calculateClosestValidPositionComponent,
   calculateClosestValidSizeComponent,
   getPointerPositionFromEvent,
 } from "../../utils/draggable.utils";
 import { positionIsFree } from "../../utils/grid.utils";
 import { ContextMenu, ContextMenuButtonType } from "../ContextMenu/ContextMenu";
-import { ContextMenuAction } from "../../types/ContextMenuAction";
 import { Dialog } from "../Dialog/Dialog";
 import { ScaleHandles } from "../ScaleHandles/ScaleHandles";
 import styles from "./Draggable.module.scss";
-import { ResizeDirection } from "../../types/ResizeDirection";
 
-const labelTexts = {
-  selected: t("draggable_selected"),
-  notSelected: t("draggable_not-selected"),
+const labelTextKeys: Record<string, TranslationKey> = {
+  selected: "draggable_selected",
+  notSelected: "draggable_not-selected",
 };
 
 export type DraggableProps = {
@@ -68,28 +70,27 @@ export const Draggable: React.FC<DraggableProps> = ({
   isArrow,
   updateArrowType,
 }) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [isSelected, setIsSelected] = React.useState(selectedItem === id);
-  const [labelText, setLabelText] = React.useState(labelTexts.notSelected);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isSelected, setIsSelected] = useState(selectedItem === id);
+  const [labelText, setLabelText] = useState(t(labelTextKeys.notSelected));
   const [pointerStartPosition, setPointerStartPosition] =
-    React.useState<Position | null>();
-  const [{ width, height }, setSize] = React.useState<Size>({
+    useState<Position | null>();
+  const [{ width, height }, setSize] = useState<Size>({
     // prettier-ignore
     width: calculateClosestValidSizeComponent(initialWidth, gapSize, cellSize, gridSize.width),
     // prettier-ignore
     height: calculateClosestValidSizeComponent(initialHeight, gapSize, cellSize, gridSize.height),
   });
-  const [position, setPosition] = React.useState<Position>({
+  const [position, setPosition] = useState<Position>({
     // prettier-ignore
     x: calculateClosestValidPositionComponent(initialXPosition, gapSize, cellSize, gridSize.width, width),
     // prettier-ignore
     y: calculateClosestValidPositionComponent(initialYPosition, gapSize, cellSize, gridSize.height, height),
   });
-  const [previousPosition, setPreviousPosition] =
-    React.useState<Position>(position);
-  const [isResizing, setIsResizing] = React.useState<boolean>();
+  const [previousPosition, setPreviousPosition] = useState(position);
+  const [isResizing, setIsResizing] = useState(false);
   const [showDeleteConfirmationDialog, setShowDeleteConfirmationDialog] =
-    React.useState<boolean>(false);
+    useState(false);
 
   // Update Draggable's size whenever the container's size changes
   React.useEffect(
@@ -263,7 +264,9 @@ export const Draggable: React.FC<DraggableProps> = ({
   }, []);
 
   React.useEffect(() => {
-    setLabelText(isSelected ? labelTexts.selected : labelTexts.notSelected);
+    setLabelText(
+      isSelected ? t(labelTextKeys.selected) : t(labelTextKeys.notSelected),
+    );
   }, [isSelected]);
 
   const horizontalScaleHandleLabelText = "";

src/components/ThemePicker/ThemePicker.tsx

@@ -28,7 +28,7 @@ export const ThemePicker: React.FC<ThemePickerProps> = ({
 
   const colorThemes = React.useMemo(
     () =>
-      themes.map(({ label, value }) => (
+      themes.map(({ labelKey, value }) => (
         <button
           type="button"
           key={value}
@@ -37,7 +37,7 @@ export const ThemePicker: React.FC<ThemePickerProps> = ({
           }`}
           onClick={() => setTheme(value)}
         >
-          {label}
+          {t(labelKey)}
           <div className={styles.colorCircles}>{renderColorCircles()}</div>
         </button>
       )),

src/components/Toolbar/Toolbar.tsx

@@ -3,15 +3,16 @@ import { t } from "../../h5p/H5P.util";
 import { H5PFieldImage } from "../../types/h5p/H5PField";
 import { H5PForm } from "../../types/h5p/H5PForm";
 import { Params } from "../../types/h5p/Params";
+import { TranslationKey } from "../../types/TranslationKey";
 import { AppearanceDialog } from "../AppearanceDialog/AppearanceDialog";
 import { ToolbarButton } from "../ToolbarButton/ToolbarButton";
 import styles from "./Toolbar.module.scss";
 
-const labelTexts = {
-  mapColor: t("toolbar-button-type_map-color"),
-  createBox: t("toolbar-button-type_create-box"),
-  createArrow: t("toolbar-button-type_create-arrow"),
-  cannotCreateArrow: t("toolbar-button-type_cannot-create-arrow"),
+const labelTextKeys: Record<string, TranslationKey> = {
+  mapColor: "toolbar-button-type_map-color",
+  createBox: "toolbar-button-type_create-box",
+  createArrow: "toolbar-button-type_create-arrow",
+  cannotCreateArrow: "toolbar-button-type_cannot-create-arrow",
 };
 
 /*
@@ -72,15 +73,15 @@ export const Toolbar: React.FC<ToolBarProps> = ({
     <div className={styles.toolbar}>
       <ToolbarButton
         icon={ToolbarButtonType.MapColor}
-        label={labelTexts.mapColor}
+        label={t(labelTextKeys.mapColor)}
         onClick={() => setAppearanceDialogOpen(wasOpen => !wasOpen)}
         active={false}
         showActive={false}
         isDisabled={false}
       />
       <ToolbarButton
         icon={ToolbarButtonType.CreateBox}
-        label={labelTexts.createBox}
+        label={t(labelTextKeys.createBox)}
         onClick={() => setActive(ToolbarButtonType.CreateBox)}
         active={checkIfActive(ToolbarButtonType.CreateBox)}
         showActive
@@ -90,8 +91,8 @@ export const Toolbar: React.FC<ToolBarProps> = ({
         icon={ToolbarButtonType.CreateArrow}
         label={
           isArrowButtonDisabled
-            ? labelTexts.cannotCreateArrow
-            : labelTexts.createArrow
+            ? t(labelTextKeys.cannotCreateArrow)
+            : t(labelTextKeys.createArrow)
         }
         onClick={() => setActive(ToolbarButtonType.CreateArrow)}
         active={checkIfActive(ToolbarButtonType.CreateArrow)}

src/h5p/H5P.util.ts

@@ -1,14 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { H5PObject, H5PEditorObject } from "../../H5P";
-import type { libraryStrings } from "../../language/en.json";
+import { TranslationKey } from "../types/TranslationKey";
 
 export const H5P: H5PObject = (window as any).H5P ?? {};
 export const H5PEditor: H5PEditorObject = (window as any).H5PEditor ?? {};
 export const t: (
-  key: keyof typeof libraryStrings,
-  vars?: Record<string, string> | undefined,
-) => string = H5PEditor.t.bind(null, "H5PEditor.TopicMap");
-
+  key: TranslationKey,
+  vars?: Record<string, string>,
+) => string = (key, vars) => H5PEditor.t("H5PEditor.TopicMap", key, vars);
 /**
  * Get absolute path to image from relative parameters path
  *

src/types/TranslationKey.ts

@@ -0,0 +1,3 @@
+import type { libraryStrings } from "../../language/en.json";
+
+export type TranslationKey = keyof typeof libraryStrings;

src/utils/theme.utils.ts

@@ -1,9 +1,10 @@
-import { t } from "../h5p/H5P.util";
 import { ColorTheme } from "../types/ColorTheme";
+import { TranslationKey } from "../types/TranslationKey";
 
-export const themes = Object.values(ColorTheme).map(value => ({
-  value,
-  label: t(`global_theme-${value}`),
-}));
+export const themes: Array<{ value: ColorTheme; labelKey: TranslationKey }> =
+  Object.values(ColorTheme).map(value => ({
+    value,
+    labelKey: `global_theme-${value}`,
+  }));
 
 export const defaultTheme = ColorTheme.Blue;