From 6f81c5e194c0e307817d324ed1b2746a459270b6 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Sun, 18 Dec 2022 22:34:10 +0100
Subject: [PATCH] fix(frontend): Fix i18n types

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../src/components/common/links/translated-external-link.tsx | 5 +++--
 .../src/components/common/links/translated-internal-link.tsx | 5 +++--
 frontend/src/components/common/links/types.d.ts              | 4 ++--
 .../components/notifications/ui-notification-boundary.tsx    | 2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/links/translated-external-link.tsx b/frontend/src/components/common/links/translated-external-link.tsx
index f393e3358..ef060f0a0 100644
--- a/frontend/src/components/common/links/translated-external-link.tsx
+++ b/frontend/src/components/common/links/translated-external-link.tsx
@@ -5,7 +5,7 @@
  */
 import { ExternalLink } from './external-link'
 import type { TranslatedLinkProps } from './types'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 /**
@@ -17,5 +17,6 @@ import { useTranslation } from 'react-i18next'
  */
 export const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
-  return <ExternalLink text={t(i18nKey, i18nOption)} {...props} />
+  const text = useMemo(() => (i18nOption ? t(i18nKey, i18nOption) : t(i18nKey)), [i18nKey, i18nOption, t])
+  return <ExternalLink text={text} {...props} />
 }
diff --git a/frontend/src/components/common/links/translated-internal-link.tsx b/frontend/src/components/common/links/translated-internal-link.tsx
index 25b84ed7d..2bb21de4c 100644
--- a/frontend/src/components/common/links/translated-internal-link.tsx
+++ b/frontend/src/components/common/links/translated-internal-link.tsx
@@ -5,7 +5,7 @@
  */
 import { InternalLink } from './internal-link'
 import type { TranslatedLinkProps } from './types'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 /**
@@ -17,5 +17,6 @@ import { useTranslation } from 'react-i18next'
  */
 export const TranslatedInternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
-  return <InternalLink text={t(i18nKey, i18nOption)} {...props} />
+  const text = useMemo(() => (i18nOption ? t(i18nKey, i18nOption) : t(i18nKey)), [i18nKey, i18nOption, t])
+  return <InternalLink text={text} {...props} />
 }
diff --git a/frontend/src/components/common/links/types.d.ts b/frontend/src/components/common/links/types.d.ts
index 1422205f5..cbb2a2003 100644
--- a/frontend/src/components/common/links/types.d.ts
+++ b/frontend/src/components/common/links/types.d.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { IconName } from '../fork-awesome/fork-awesome-icon'
-import type { TOptions } from 'i18next'
+import type { TOptionsBase } from 'i18next'
 
 interface GeneralLinkProp {
   href: string
@@ -20,5 +20,5 @@ export interface LinkWithTextProps extends GeneralLinkProp {
 
 export interface TranslatedLinkProps extends GeneralLinkProp {
   i18nKey: string
-  i18nOption?: TOptions
+  i18nOption?: TOptionsBase & Record<string, unknown>
 }
diff --git a/frontend/src/components/notifications/ui-notification-boundary.tsx b/frontend/src/components/notifications/ui-notification-boundary.tsx
index 6ec0e89ef..220e42f28 100644
--- a/frontend/src/components/notifications/ui-notification-boundary.tsx
+++ b/frontend/src/components/notifications/ui-notification-boundary.tsx
@@ -75,7 +75,7 @@ export const UiNotificationBoundary: React.FC<PropsWithChildren> = ({ children }
   )
 
   const showErrorNotification = useCallback(
-    (messageI18nKey: string, messageI18nOptions?: TOptions) =>
+    (messageI18nKey: string, messageI18nOptions: Record<string, unknown> = {}) =>
       (error: Error): void => {
         log.error(t(messageI18nKey, messageI18nOptions), error)
         void dispatchUiNotification('common.errorOccurred', messageI18nKey, {