#428

frontend/src/lib/dialogues/useDialogue.ts

@@ -26,7 +26,7 @@ type ChoiceOptions<T extends string> = { title:         ReactNode
 					 closeLabel?:   ReactNode }
 
 type DialogueFormAction = {
-  label:      string
+  label:      ReactNode
   placement?: 'start' | 'end'
   variant?:   DialogueVariant
   disabled?:  boolean
@@ -37,10 +37,10 @@ type DialogueFormControls = {
   setActions: (actions: DialogueFormAction[]) => void
   confirm:    (options: ConfirmOptions) => Promise<boolean> }
 
-type DialogueFormOptions = { title:         string
+type DialogueFormOptions = { title:         ReactNode
 			     description?:  ReactNode
 			     body:          (controls: DialogueFormControls) => ReactNode
-			     cancelText?:   string
+			     cancelText?:   ReactNode
 			     size?:         'default' | 'large' }
 
 type DialogueAPI =

frontend/src/lib/postImportSourceValidation.ts

@@ -1,3 +1,5 @@
+import { translateUIMessage } from '@/lib/i18n'
+
 import type { PostImportSourceIssue } from '@/lib/postImportTypes'
 
 const MAX_ROWS = 100
@@ -67,7 +69,8 @@ export const validateImportSource = (
         {
           issues.push ({
               sourceRow,
-              message: `取込件数は ${ MAX_ROWS } 件までです．`,
+              message: translateUIMessage ('validation.tooMany', 'imports', 'ja', {
+		  count: MAX_ROWS }).text,
               url: displayUrl })
           return
         }
@@ -75,7 +78,7 @@ export const validateImportSource = (
         {
           issues.push ({
               sourceRow,
-              message: 'URL が長すぎます．',
+              message: translateUIMessage ('validation.urlTooLong', 'imports', 'ja').text,
               url: displayUrl })
           return
         }
@@ -84,7 +87,7 @@ export const validateImportSource = (
         {
           issues.push ({
               sourceRow,
-              message: 'URL の形式が不正です．',
+              message: translateUIMessage ('validation.invalidUrl', 'imports', 'ja').text,
               url: displayUrl })
           return
         }
@@ -92,7 +95,7 @@ export const validateImportSource = (
         {
           issues.push ({
               sourceRow,
-              message: 'HTTP または HTTPS の URL ではありません．',
+              message: translateUIMessage ('validation.protocol', 'imports', 'ja').text,
               url: displayUrl })
           return
         }
@@ -100,7 +103,7 @@ export const validateImportSource = (
         {
           issues.push ({
               sourceRow,
-              message: 'URL の形式が不正です．',
+              message: translateUIMessage ('validation.invalidUrl', 'imports', 'ja').text,
               url: displayUrl })
           return
         }
@@ -110,7 +113,8 @@ export const validateImportSource = (
         {
           issues.push ({
               sourceRow,
-              message: `${ duplicateRow } 行目と同じ URL です．`,
+              message: translateUIMessage ('validation.duplicateRow', 'imports', 'ja', {
+		  row: duplicateRow }).text,
               url: displayUrl })
           return
         }

frontend/src/lib/postImportStorage.ts

@@ -1,3 +1,5 @@
+import { translateUIMessage } from '@/lib/i18n'
+
 import type { StorageErrorHandler } from '@/lib/postImportTypes'
 
 const SOURCE_DRAFT_KEY = 'post-import-source-draft'
@@ -16,7 +18,7 @@ const readStorage = (
   }
   catch
   {
-    onError?.('保存済みデータを読み込めませんでした．')
+    onError?.(translateUIMessage ('storage.readFailed', 'imports', 'ja').text)
     return null
   }
 }
@@ -37,7 +39,7 @@ const writeStorage = (
   }
   catch
   {
-    onError?.('ブラウザへ保存できませんでした．')
+    onError?.(translateUIMessage ('storage.writeFailed', 'imports', 'ja').text)
     return false
   }
 }
@@ -56,7 +58,7 @@ const removeStorage = (
   }
   catch
   {
-    onError?.('保存済みデータを削除できませんでした．')
+    onError?.(translateUIMessage ('storage.clearFailed', 'imports', 'ja').text)
   }
 }
 

frontend/src/lib/useUITranslation.ts

@@ -1,4 +1,4 @@
-import { createElement } from 'react'
+import { createElement, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import LocalisedText from '@/components/LocalisedText'
@@ -10,15 +10,15 @@ export const useUITranslation = (namespace = 'common') => {
   const locale = useLocale ()
   useTranslation (namespace, { lng: locale })
 
-  const message = (key: string, values?: Record<string, string | number>) => {
+  const message = useCallback ((key: string, values?: Record<string, string | number>) => {
     return translateUIMessage (key, namespace, locale, values)
-  }
+  }, [namespace, locale])
 
-  const label = (key: string, values?: Record<string, string | number>) => {
+  const label = useCallback ((key: string, values?: Record<string, string | number>) => {
     const result = message (key, values)
     return createElement (LocalisedText, {
 	language: result.language, children: result.text })
-  }
+  }, [message])
 
   return { message, label }
 }