#428

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[]>> ({ })
@@ -220,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'
@@ -242,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'
@@ -278,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
@@ -286,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' && (
@@ -300,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 => (
@@ -340,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
@@ -348,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>