i18n confirmation dialog

Author: ciur

frontend/apps/ui/public/localization/de/_default.json

@@ -53,6 +53,11 @@
     "deleteDocument": "Dokument löschen",
     "dangerZone": "Gefahrenzone"
   },
+  "deleteEntireDocumentConfirmDialog": {
+    "title": "Dokument löschen",
+    "mainMessage": "Möchtest du dieses Dokument wirklich löschen?",
+    "confirmButtonText": "Ja, lösche diese Dokument"
+  },
   "load-more": "Mehr anzeigen",
   "app.version": "Version",
   "me": "Ich",

frontend/apps/ui/public/localization/en/_default.json

@@ -53,6 +53,11 @@
     "deleteDocument": "Delete document",
     "dangerZone": "Danger Zone"
   },
+  "deleteEntireDocumentConfirmDialog": {
+    "title": "Document Delete",
+    "mainMessage": "Do you really want to delete this document?",
+    "confirmButtonText": "Yes, delete this document"
+  },
   "load-more": "Load more",
   "app.version": "Version",
   "me": "Me",

frontend/apps/ui/src/features/document/components/DeleteEntireDocumentConfirm.tsx

@@ -1,10 +1,10 @@
 import {useAppSelector} from "@/app/hooks"
-import Error from "@/components/Error"
 import PanelContext from "@/contexts/PanelContext"
 import {useDeleteNodesMutation} from "@/features/nodes/apiSlice"
 import {selectCurrentNodeID} from "@/features/ui/uiSlice"
-import {Button, Group, Loader, Modal} from "@mantine/core"
-import {useContext, useState} from "react"
+import {useContext, useEffect, useState} from "react"
+import type {I18NDeleteEntireDocumentConfirmDialog} from "viewer"
+import {DeleteEntireDocumentConfirmDialog} from "viewer"
 
 import type {PanelMode} from "@/types"
 import {useTranslation} from "react-i18next"
@@ -16,16 +16,12 @@ interface Args {
   text?: string
 }
 
-const TEXT =
-  "You are about to delete ALL pages. This is same as deleting entire document. Delete entire document?"
-
-export default function DeleteWithAllPagesSelected({
+export default function DeleteEntireDocumentConfirmDialogContainer({
   opened,
-  onCancel,
   onSubmit,
-  text = TEXT
+  onCancel
 }: Args) {
-  const {t} = useTranslation()
+  const txt = useI18nText()
   const [error, setError] = useState("")
   const mode: PanelMode = useContext(PanelContext)
   const currentNodeID = useAppSelector(s => selectCurrentNodeID(s, mode))
@@ -44,23 +40,39 @@ export default function DeleteWithAllPagesSelected({
 
   const reset = () => {
     setError("")
+    onCancel()
   }
 
   return (
-    <Modal title={t("documents.delete.one")} opened={opened} onClose={onCancel}>
-      {text}
-      {error && <Error message={error} />}
-      <Group justify="space-between" mt="md">
-        <Button variant="default" onClick={onCancel}>
-          {t("common.no")}
-        </Button>
-        <Group>
-          {isLoading && <Loader size="sm" />}
-          <Button disabled={isLoading} onClick={onDeleteDocument} color={"red"}>
-            {t("common.yes")}
-          </Button>
-        </Group>
-      </Group>
-    </Modal>
+    <DeleteEntireDocumentConfirmDialog
+      txt={txt}
+      opened={opened}
+      error={error}
+      inProgress={isLoading}
+      onSubmit={onDeleteDocument}
+      onCancel={reset}
+    />
   )
 }
+
+function useI18nText(): I18NDeleteEntireDocumentConfirmDialog | undefined {
+  const {t, i18n} = useTranslation()
+  const [txt, setTxt] = useState<I18NDeleteEntireDocumentConfirmDialog>()
+
+  useEffect(() => {
+    if (i18n.isInitialized) {
+      setTxt({
+        title: t("deleteEntireDocumentConfirmDialog.title"),
+        mainMessage: t("deleteEntireDocumentConfirmDialog.mainMessage"),
+        cancel: t("common.cancel"),
+        confirmButtonText: t(
+          "deleteEntireDocumentConfirmDialog.confirmButtonText"
+        )
+      })
+    } else {
+      setTxt(undefined)
+    }
+  }, [i18n.isInitialized, t])
+
+  return txt
+}

frontend/apps/ui/src/features/document/components/Viewer.tsx

@@ -18,7 +18,6 @@ import ThumbnailsToggle from "@/components/document/ThumbnailsToggle"
 import classes from "@/components/document/Viewer.module.css"
 import {applyPageChangesThunk} from "@/features/document/actions/applyPageOpChanges"
 import ActionButtons from "@/features/document/components/ActionButtons"
-import DeleteEntireDocumentConfirm from "@/features/document/components/DeleteEntireDocumentConfirm"
 import {useCurrentDocVer} from "@/features/document/hooks"
 import {
   pagesDeleted,
@@ -40,6 +39,7 @@ import ContextMenu from "./ContextMenu"
 import {useSelectedPages} from "@/features/document/hooks"
 import useContextMenu from "@/features/document/hooks/useContextMenu"
 import {viewerSelectionCleared} from "@/features/ui/uiSlice"
+import DeleteEntireDocumentConfirm from "./DeleteEntireDocumentConfirm"
 import PagesHaveChangedDialog from "./PageHaveChangedDialog"
 import PageList from "./PageList"
 import ThumbnailList from "./ThumbnailList"

frontend/packages/viewer/src/components/DeleteEntireDocumentConfirmDialog/DeleteEntireDocumentConfirmDialog.tsx

@@ -0,0 +1,47 @@
+import {Button, Group, Modal, Text} from "@mantine/core"
+import {SubmitButton} from "kommon"
+import type {I18NDeleteEntireDocumentConfirmDialog} from "./types"
+
+interface Args {
+  opened: boolean
+  inProgress: boolean
+  txt?: I18NDeleteEntireDocumentConfirmDialog
+  error?: string
+  onCancel?: () => void
+  onSubmit?: () => void
+}
+
+const EmptyFunc = () => {}
+
+export default function DeleteEntireDocumentConfirmDialog({
+  opened,
+  txt,
+  error,
+  inProgress,
+  onCancel,
+  onSubmit
+}: Args) {
+  return (
+    <Modal
+      title={txt?.title || "Delete Document"}
+      opened={opened}
+      onClose={onCancel || EmptyFunc}
+    >
+      {txt?.mainMessage || "Do you really want to delete this document?"}
+      {error && <Text c="red">{error}</Text>}
+      <Group justify="space-between" mt="md">
+        <Button variant="default" onClick={onCancel}>
+          {txt?.cancel || "Cancel"}
+        </Button>
+        <Group>
+          <SubmitButton
+            inProgress={inProgress}
+            onClick={onSubmit}
+            color={"red"}
+            text={txt?.confirmButtonText || "Yes, delete this document"}
+          />
+        </Group>
+      </Group>
+    </Modal>
+  )
+}

frontend/packages/viewer/src/components/DeleteEntireDocumentConfirmDialog/index.tsx

@@ -0,0 +1,5 @@
+import DeleteEntireDocumentConfirmDialog from "./DeleteEntireDocumentConfirmDialog"
+import type {I18NDeleteEntireDocumentConfirmDialog} from "./types"
+
+export default DeleteEntireDocumentConfirmDialog
+export type {I18NDeleteEntireDocumentConfirmDialog}

frontend/packages/viewer/src/components/DeleteEntireDocumentConfirmDialog/types.ts

@@ -0,0 +1,6 @@
+export interface I18NDeleteEntireDocumentConfirmDialog {
+  title: string
+  mainMessage: string
+  confirmButtonText: string
+  cancel: string
+}

frontend/packages/viewer/src/index.tsx

@@ -4,6 +4,8 @@ import type {
   MoveDocumentDirection
 } from "./components/ContextMenu"
 import ContextMenu from "./components/ContextMenu"
+import type {I18NDeleteEntireDocumentConfirmDialog} from "./components/DeleteEntireDocumentConfirmDialog"
+import DeleteEntireDocumentConfirmDialog from "./components/DeleteEntireDocumentConfirmDialog"
 import type {
   DownloadDocumentVersion,
   I18NDownloadButtonText
@@ -25,6 +27,7 @@ import Zoom from "./components/Zoom"
 
 export {
   ContextMenu,
+  DeleteEntireDocumentConfirmDialog,
   DownloadButton,
   ExtractPagesModal,
   Page,
@@ -38,6 +41,7 @@ export {
 export type {
   DownloadDocumentVersion,
   ExtractPagesDirection,
+  I18NDeleteEntireDocumentConfirmDialog,
   I18NDownloadButtonText,
   I18NExtractPagesModal,
   I18NPagesHaveChangedDialogText,