アイヌ語追加 (#428) (#433)

Reviewed-on: #433
Co-authored-by: miteruzo <miteruzo@naver.com>

frontend/src/components/dialogues/DialogueProvider.test.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
+import { MemoryRouter } from 'react-router-dom'
 
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import useDialogue from '@/lib/dialogues/useDialogue'
@@ -49,7 +50,7 @@ describe ('DialogueProvider', () => {
 	  </button>)
     }
 
-    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    render (<MemoryRouter><DialogueProvider><Launcher/></DialogueProvider></MemoryRouter>)
     fireEvent.click (screen.getByRole ('button', { name: '開く' }))
 
     expect (screen.getByText ('一件目')).toBeInTheDocument ()
@@ -73,7 +74,7 @@ describe ('DialogueProvider', () => {
 	  </button>)
     }
 
-    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    render (<MemoryRouter><DialogueProvider><Launcher/></DialogueProvider></MemoryRouter>)
     fireEvent.click (screen.getByRole ('button', { name: '開く' }))
 
     const dialogue = screen.getByRole ('dialog')
@@ -101,7 +102,7 @@ describe ('DialogueProvider', () => {
 	  </button>)
     }
 
-    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    render (<MemoryRouter><DialogueProvider><Launcher/></DialogueProvider></MemoryRouter>)
     fireEvent.click (screen.getByRole ('button', { name: '開く' }))
     const action = await screen.findByRole ('button', { name: '左操作' })
     fireEvent.click (action)

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -8,6 +8,7 @@ import { Dialog,
 	 DialogHeader,
 	 DialogTitle } from '@/components/ui/dialog'
 import { DialogueContext } from '@/lib/dialogues/useDialogue'
+import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC, ReactNode } from 'react'
 import type { AlertOptions,
@@ -42,6 +43,7 @@ type Props = { children: ReactNode }
 
 
 const DialogueProvider: FC<Props> = ({ children }) => {
+  const { label } = useUITranslation ('shared')
   const [queue, setQueue] = useState<DialogueRequest[]> ([])
   const [pendingIds, setPendingIds] = useState<number[]> ([])
   const [formActions, setFormActions] = useState<Record<number, DialogueFormAction[]>> ({ })
@@ -88,8 +90,9 @@ const DialogueProvider: FC<Props> = ({ children }) => {
     })
     setPendingIds (current => current.filter (pendingId => pendingId !== id))
     setFormActions (current => {
-	const { [id]: _, ...rest } = current
-	return rest
+      const rest = { ...current }
+      delete rest[id]
+      return rest
     })
     delete formControls.current[id]
   }, [])
@@ -178,6 +181,8 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 		    closeRequest (active.id, active.kind !== 'confirm' && null)
 		}}>
 	      <DialogContent
+		  closeLabel={(active.kind === 'confirm' || active.kind === 'choice')
+		      ? active.options.closeLabel : undefined}
 		  className={
 		      active.kind === 'form'
 		      ? `flex max-h-[calc(100dvh-1rem)] ${ active.options.size === 'large'
@@ -217,9 +222,9 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 			   className="shrink-0 flex-col gap-2 pt-4
 				      md:flex-row md:justify-between md:gap-0 md:space-x-0">
 			 <div className="flex w-full flex-col gap-2 md:w-auto md:flex-row">
-			   {startActions.map (action => (
+			   {startActions.map ((action, index) => (
 			       <Button
-				   key={action.label}
+				   key={index}
 				   className="w-full md:w-auto"
 				   variant={action.variant === 'danger'
 				       ? 'destructive'
@@ -239,12 +244,12 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 			       onClick={() => closeRequest (active.id)}
 			       disabled={pendingIds.includes (active.id)
 				   || nestedConfirm?.parentId === active.id}>
-			     {active.options.cancelText ?? '取消'}
+			     {active.options.cancelText ?? label ('actions.cancel')}
 			   </Button>
 
-			   {endActions.map (action => (
+			   {endActions.map ((action, index) => (
 			       <Button
-				   key={action.label}
+				   key={index}
 				   className="w-full md:w-auto"
 				   variant={action.variant === 'danger'
 				       ? 'destructive'
@@ -275,7 +280,7 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 			       <Button
 				   variant="outline"
 				   onClick={() => closeRequest (active.id, false)}>
-				 {active.options.cancelText ?? '取消'}
+				 {active.options.cancelText ?? label ('actions.cancel')}
 			       </Button>
 
 			       <Button
@@ -283,13 +288,13 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 					    ? 'destructive'
 					    : 'default'}
 				   onClick={() => closeRequest (active.id, true)}>
-				 {active.options.confirmText ?? '確定'}
+				 {active.options.confirmText ?? label ('dialogue.confirm')}
 			       </Button>
 			     </>)}
 
 			 {active.kind === 'alert' && (
 			     <Button onClick={() => closeRequest (active.id)}>
-			       {active.options.okText ?? '確定'}
+			       {active.options.okText ?? label ('dialogue.confirm')}
 			     </Button>)}
 
 			 {active.kind === 'choice' && (
@@ -297,7 +302,7 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 			       <Button
 				   variant="outline"
 				   onClick={() => closeRequest (active.id, null)}>
-				 {active.options.cancelText ?? '取消'}
+				 {active.options.cancelText ?? label ('actions.cancel')}
 			       </Button>
 
 			       {active.options.choices.map (choice => (
@@ -322,7 +327,8 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 		  if (!(open))
 		    closeNestedConfirm (false)
 		}}>
-	      <DialogContent className="px-6 pb-6 pt-7">
+	      <DialogContent className="px-6 pb-6 pt-7"
+		  closeLabel={nestedConfirm.options.closeLabel}>
 		<DialogHeader className="pl-8">
 		  <DialogTitle>{nestedConfirm.options.title}</DialogTitle>
 
@@ -336,7 +342,7 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 		  <Button
 		      variant="outline"
 		      onClick={() => closeNestedConfirm (false)}>
-		    {nestedConfirm.options.cancelText ?? '取消'}
+		    {nestedConfirm.options.cancelText ?? label ('actions.cancel')}
 		  </Button>
 
 		  <Button
@@ -344,7 +350,7 @@ const DialogueProvider: FC<Props> = ({ children }) => {
 			  ? 'destructive'
 			  : 'default'}
 		      onClick={() => closeNestedConfirm (true)}>
-		    {nestedConfirm.options.confirmText ?? '確定'}
+		    {nestedConfirm.options.confirmText ?? label ('dialogue.confirm')}
 		  </Button>
 		</DialogFooter>
 	      </DialogContent>