fix: useTranslation hook in react components

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx

@@ -13,8 +13,8 @@ import { replaceInContent } from '../tool-bar/formatters/replace-in-content'
 import { replaceSelection } from '../tool-bar/formatters/replace-selection'
 import type { CursorSelection } from '../tool-bar/formatters/types/cursor-selection'
 import type { EditorView } from '@codemirror/view'
-import { t } from 'i18next'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 /**
  * @param view the codemirror instance that is used to insert the Markdown code
@@ -35,6 +35,7 @@ type handleUploadSignature = (
  * Provides a callback that uploads a given file and inserts the correct Markdown code into the current editor.
  */
 export const useHandleUpload = (): handleUploadSignature => {
+  const { t } = useTranslation()
   const { showErrorNotification } = useUiNotifications()
 
   return useCallback(
@@ -70,6 +71,6 @@ export const useHandleUpload = (): handleUploadSignature => {
           ])
         })
     },
-    [showErrorNotification]
+    [showErrorNotification, t]
   )
 }

frontend/src/components/layout/settings-dialog/settings-modal.tsx

@@ -7,10 +7,10 @@ import type { CommonModalProps } from '../../common/modals/common-modal'
 import { CommonModal } from '../../common/modals/common-modal'
 import { EditorSettingsTabContent } from './editor/editor-settings-tab-content'
 import { GlobalSettingsTabContent } from './global/global-settings-tab-content'
-import { t } from 'i18next'
 import React from 'react'
 import { Modal, Tab, Tabs } from 'react-bootstrap'
 import { Gear as IconGear } from 'react-bootstrap-icons'
+import { useTranslation } from 'react-i18next'
 
 /**
  * Shows global and scope specific settings
@@ -19,6 +19,8 @@ import { Gear as IconGear } from 'react-bootstrap-icons'
  * @param onHide callback that is executed if the modal should be closed
  */
 export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
+  const { t } = useTranslation()
+
   return (
     <CommonModal
       show={show}

frontend/src/components/notifications/ui-notification-boundary.tsx

@@ -7,11 +7,11 @@ import { Logger } from '../../utils/logger'
 import type { DispatchOptions, UiNotification } from './types'
 import { UiNotifications } from './ui-notifications'
 import type { TOptions } from 'i18next'
-import { t } from 'i18next'
 import { DateTime } from 'luxon'
 import type { PropsWithChildren } from 'react'
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
 import { ExclamationTriangle as IconExclamationTriangle } from 'react-bootstrap-icons'
+import { useTranslation } from 'react-i18next'
 import { v4 as uuid } from 'uuid'
 
 const log = new Logger('Notifications')
@@ -48,6 +48,7 @@ const uiNotificationContext = createContext<UiNotificationContext | undefined>(u
  * @param children The children that receive the context
  */
 export const UiNotificationBoundary: React.FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
   const [uiNotifications, setUiNotifications] = useState<UiNotification[]>([])
 
   const dispatchUiNotification = useCallback(
@@ -84,7 +85,7 @@ export const UiNotificationBoundary: React.FC<PropsWithChildren> = ({ children }
           icon: IconExclamationTriangle
         })
       },
-    [dispatchUiNotification]
+    [dispatchUiNotification, t]
   )
 
   const dismissNotification = useCallback((notificationUuid: string): void => {