Merge pull request #1104 from Arnei/update-i18next-to-23

Update i18next to 23.2.11

package.json

@@ -25,7 +25,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "final-form": "^4.20.9",
-    "i18next": "^22.5.0",
+    "i18next": "^23.2.11",
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",

src/main/KeyboardControls.tsx

@@ -1,5 +1,6 @@
 import { css } from "@emotion/react";
-import { TFuncKey } from "i18next";
+import { ParseKeys } from "i18next";
+
 import React from "react";
 
 import { KeyMapDisplayOptions } from 'react-hotkeys';
@@ -9,7 +10,7 @@ import { flexGapReplacementStyle } from "../cssStyles";
 import { getAllHotkeys } from "../globalKeys";
 import { selectTheme } from "../redux/themeSlice";
 
-const Group: React.FC<{name: TFuncKey, entries: KeyMapDisplayOptions[]}> = ({name, entries}) => {
+const Group: React.FC<{name: ParseKeys, entries: KeyMapDisplayOptions[]}> = ({name, entries}) => {
 
   const { t } = useTranslation();
   const theme = useSelector(selectTheme);
@@ -27,7 +28,7 @@ const Group: React.FC<{name: TFuncKey, entries: KeyMapDisplayOptions[]}> = ({nam
 
   return (
     <div css={groupStyle}>
-      <h3 css={headingStyle}>{t(name) as string}</h3>
+      <h3 css={headingStyle}>{t(name)}</h3>
       {entries.map((entry: KeyMapDisplayOptions, index: number) => (
         <Entry params={entry} key={index}></Entry>
       ))}
@@ -137,7 +138,7 @@ const KeyboardControls: React.FC = () => {
       const groups: JSX.Element[] = [];
       for (const key in obj) {
         if (obj[key].length > 0) {
-          groups.push(<Group name={key as TFuncKey} entries={obj[key]} key={key}/>);
+          groups.push(<Group name={key as ParseKeys} entries={obj[key]} key={key}/>);
         }
       }
 

src/main/Metadata.tsx

@@ -27,7 +27,7 @@ import { configureFieldsAttributes, settings } from '../config'
 import { AppDispatch } from "../redux/store";
 import { selectTheme } from "../redux/themeSlice";
 import { ThemeProvider } from "@mui/material/styles";
-import { TFuncKey } from "i18next";
+import { ParseKeys } from "i18next";
 
 /**
  * Creates a Metadata form
@@ -474,10 +474,10 @@ const Metadata: React.FC = () => {
         // Parse Label
         let descLabel = null
         if (i18n.exists(`metadata.${field.id}`)) {
-          descLabel = t(`metadata.${field.id}.${key.replaceAll(".", "-")}` as TFuncKey)
+          descLabel = t(`metadata.${field.id}.${key.replaceAll(".", "-")}` as ParseKeys)
 
           if (field.id === "license") {
-            descLabel = t(`metadata.${field.id}.${JSON.parse(key).label.replaceAll(".", "-")}` as TFuncKey)
+            descLabel = t(`metadata.${field.id}.${JSON.parse(key).label.replaceAll(".", "-")}` as ParseKeys)
           }
         }
 
@@ -626,7 +626,7 @@ const Metadata: React.FC = () => {
           <div css={fieldStyle} data-testid={field.id}>
             <label css={fieldLabelStyle} htmlFor={input.name}>{
               i18n.exists(`metadata.labels.${field.id}`) ?
-                t(`metadata.labels.${field.id}` as TFuncKey) as string : field.id
+                t(`metadata.labels.${field.id}` as ParseKeys) as string : field.id
             }</label>
 
             {generateComponentWithModifiedInput(field, input)}
@@ -646,7 +646,7 @@ const Metadata: React.FC = () => {
       <div key={catalogIndex}>
         <h2>
           {i18n.exists(`metadata.${catalog.title.replaceAll(".", "-")}`) ?
-            t(`metadata.${catalog.title.replaceAll(".", "-")}` as TFuncKey) as string : catalog.title
+            t(`metadata.${catalog.title.replaceAll(".", "-")}` as ParseKeys) as string : catalog.title
           }
         </h2>