refactor(forms): create ConfirmationModal from Publish & Delete btns

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/ConfirmationModal.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Modal, Icon, Message } from "semantic-ui-react";
+
+export function ConfirmationModal({
+  header,
+  content,
+  trigger,
+  actions,
+  isOpen,
+  close,
+}) {
+  return (
+    <>
+      {trigger}
+      <Modal
+        open={isOpen}
+        onClose={close}
+        size="small"
+        closeIcon
+        closeOnDimmerClick={false}
+      >
+        <Modal.Header>{header}</Modal.Header>
+        {content && (
+          <Modal.Content>
+            <Message visible warning>
+              <p>
+                <Icon name="warning sign" /> {content}
+              </p>
+            </Message>
+          </Modal.Content>
+        )}
+        <Modal.Actions>{actions}</Modal.Actions>
+      </Modal>
+    </>
+  );
+}
+
+export default ConfirmationModal;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/index.js

@@ -0,0 +1,2 @@
+export * from './ConfirmationModal';
+export { default } from './ConfirmationModal';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/DeleteButton.jsx

@@ -1,76 +1,72 @@
 import React from "react";
-import { Button, Modal, Icon, Message } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { i18next } from "@translations/i18next";
 import {
   useConfirmationModal,
   useFormConfig,
   useDepositApiClient,
+  ConfirmationModal,
 } from "@js/oarepo_ui";
 import PropTypes from "prop-types";
 
 export const DeleteButton = React.memo(
   ({ modalMessage, modalHeader, redirectUrl }) => {
-    const { isModalOpen, handleCloseModal, handleOpenModal } =
-      useConfirmationModal();
+    const {
+      isOpen: isModalOpen,
+      close: closeModal,
+      open: openModal,
+    } = useConfirmationModal();
     const {
       formConfig: { permissions },
     } = useFormConfig();
     const { values, isSubmitting, _delete, isDeleting } = useDepositApiClient();
 
     return (
-      <React.Fragment>
+      <>
         {values.id && permissions?.can_delete_draft && (
-          <Button
-            name="delete"
-            color="red"
-            onClick={handleOpenModal}
-            icon="delete"
-            labelPosition="left"
-            content={i18next.t("Delete")}
-            type="button"
-            disabled={isSubmitting}
-            loading={isDeleting}
-            fluid
+          <ConfirmationModal
+            header={modalHeader}
+            content={modalMessage}
+            isOpen={isModalOpen}
+            close={closeModal}
+            trigger={
+              <Button
+                name="delete"
+                color="red"
+                onClick={openModal}
+                icon="delete"
+                labelPosition="left"
+                content={i18next.t("Delete")}
+                type="button"
+                disabled={isSubmitting}
+                loading={isDeleting}
+                fluid
+              />
+            }
+            actions={
+              <>
+                <Button onClick={closeModal} floated="left">
+                  {i18next.t("Cancel")}
+                </Button>
+                <Button
+                  name="delete"
+                  disabled={isSubmitting}
+                  loading={isDeleting}
+                  color="red"
+                  onClick={() => {
+                    _delete(redirectUrl);
+                    closeModal();
+                  }}
+                  icon="delete"
+                  labelPosition="left"
+                  content={i18next.t("Delete")}
+                  type="button"
+                />
+              </>
+            }
           />
         )}
-        <Modal
-          open={isModalOpen}
-          onClose={handleCloseModal}
-          size="small"
-          closeIcon
-          closeOnDimmerClick={false}
-        >
-          <Modal.Header>{modalHeader}</Modal.Header>
-          {modalMessage && (
-            <Modal.Content>
-              <Message visible warning>
-                <p>
-                  <Icon name="warning sign" /> {modalMessage}
-                </p>
-              </Message>
-            </Modal.Content>
-          )}
-          <Modal.Actions>
-            <Button onClick={handleCloseModal} floated="left">
-              {i18next.t("Cancel")}
-            </Button>
-            <Button
-              name="delete"
-              disabled={isSubmitting}
-              loading={isDeleting}
-              color="red"
-              onClick={() => {
-                _delete(redirectUrl);
-                handleCloseModal();
-              }}
-              icon="delete"
-              labelPosition="left"
-              content={i18next.t("Delete")}
-              type="button"
-            />
-          </Modal.Actions>
-        </Modal>
-      </React.Fragment>
+      </>
     );
   }
 );

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/PublishButton.jsx

@@ -1,47 +1,44 @@
 import React from "react";
-import { Button, Modal, Message, Icon } from "semantic-ui-react";
+import { Button } from "semantic-ui-react";
 import { i18next } from "@translations/oarepo_ui/i18next";
-import { useConfirmationModal, useDepositApiClient } from "@js/oarepo_ui";
+import {
+  useConfirmationModal,
+  useDepositApiClient,
+  ConfirmationModal,
+} from "@js/oarepo_ui";
 import PropTypes from "prop-types";
 
 export const PublishButton = React.memo(({ modalMessage, modalHeader }) => {
-  const { isModalOpen, handleCloseModal, handleOpenModal } =
-    useConfirmationModal();
+  const {
+    isOpen: isModalOpen,
+    close: closeModal,
+    open: openModal,
+  } = useConfirmationModal();
   const { isSubmitting, publish } = useDepositApiClient();
 
   return (
-    <React.Fragment>
-      <Button
-        name="publish"
-        color="green"
-        onClick={handleOpenModal}
-        icon="upload"
-        labelPosition="left"
-        content={i18next.t("Publish")}
-        type="button"
-        disabled={isSubmitting}
-        loading={isSubmitting}
-        fluid
-      />
-      <Modal
-        open={isModalOpen}
-        onClose={handleCloseModal}
-        size="small"
-        closeIcon
-        closeOnDimmerClick={false}
-      >
-        <Modal.Header>{modalHeader}</Modal.Header>
-        {modalMessage && (
-          <Modal.Content>
-            <Message visible warning>
-              <p>
-                <Icon name="warning sign" /> {modalMessage}
-              </p>
-            </Message>
-          </Modal.Content>
-        )}
-        <Modal.Actions>
-          <Button onClick={handleCloseModal} floated="left">
+    <ConfirmationModal
+      header={modalHeader}
+      content={modalMessage}
+      isOpen={isModalOpen}
+      close={closeModal}
+      trigger={
+        <Button
+          name="publish"
+          color="green"
+          onClick={openModal}
+          icon="upload"
+          labelPosition="left"
+          content={i18next.t("Publish")}
+          type="button"
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          fluid
+        />
+      }
+      actions={
+        <>
+          <Button onClick={closeModal} floated="left">
             {i18next.t("Cancel")}
           </Button>
           <Button
@@ -51,16 +48,16 @@ export const PublishButton = React.memo(({ modalMessage, modalHeader }) => {
             color="green"
             onClick={() => {
               publish();
-              handleCloseModal();
+              closeModal();
             }}
             icon="upload"
             labelPosition="left"
             content={i18next.t("Publish")}
             type="submit"
           />
-        </Modal.Actions>
-      </Modal>
-    </React.Fragment>
+        </>
+      }
+    />
   );
 });
 

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/index.js

@@ -13,4 +13,5 @@ export * from "./DeleteButton";
 export * from "./PreviewButton";
 export * from "./PublishButton";
 export * from "./SaveButton";
-export * from "./ValidateButton";
+export * from "./ValidateButton";
+export * from "./ConfirmationModal";

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js

@@ -62,12 +62,12 @@ export const useVocabularyOptions = (vocabularyType) => {
 };
 
 export const useConfirmationModal = () => {
-  const [isModalOpen, setIsModalOopen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
 
-  const handleCloseModal = () => setIsModalOopen(false);
-  const handleOpenModal = () => setIsModalOopen(true);
+  const close = React.useCallback(() => setIsOpen(false));
+  const open = React.useCallback(() => setIsOpen(true));
 
-  return { isModalOpen, handleCloseModal, handleOpenModal };
+  return { isOpen, close, open };
 };
 
 export const useFormFieldValue = ({
@@ -166,7 +166,7 @@ export const useDepositApiClient = (
     ? new baseApiClient(createUrl, recordSerializer)
     : new OARepoDepositApiClient(createUrl, recordSerializer);
 
-  async function save(saveWithoutDisplayingValidationErrors = false) {
+  async function save (saveWithoutDisplayingValidationErrors = false) {
     let response;
 
     setSubmitting(true);
@@ -231,7 +231,7 @@ export const useDepositApiClient = (
     }
   }
 
-  async function publish() {
+  async function publish () {
     // call save and if save returns false, exit
     const saveResult = await save();
 
@@ -296,11 +296,11 @@ export const useDepositApiClient = (
     }
   }
 
-  async function read(recordUrl) {
+  async function read (recordUrl) {
     return await apiClient.readDraft({ self: recordUrl });
   }
 
-  async function _delete(redirectUrl) {
+  async function _delete (redirectUrl) {
     if (!redirectUrl)
       throw new Error(
         "You must provide url where to be redirected after deleting a draft"
@@ -358,10 +358,10 @@ export const useDepositFileApiClient = (baseApiClient) => {
     ? new baseApiClient()
     : new OARepoDepositFileApiClient();
 
-  async function read(draft) {
+  async function read (draft) {
     return await apiClient.readDraftFiles(draft);
   }
-  async function _delete(file) {
+  async function _delete (file) {
     setValues(
       _omit(values, [
         "errors",

oarepo_ui/theme/assets/semantic-ui/translations/oarepo_ui/messages/cs/LC_MESSAGES/translations.json

@@ -70,5 +70,6 @@
     "Validate form": "Zkontrolovat formulář",
     "Delete": "Smazat",
     "Are you sure you wish delete this draft?": "Jste si jistý, že chcete smazat tento koncept?",
-    "If you delete the draft, the work you have done on it will be lost.": "Pokud koncept smažete, práce, kterou jste na něm vykonali, bude ztracena."
+    "If you delete the draft, the work you have done on it will be lost.": "Pokud koncept smažete, práce, kterou jste na něm vykonali, bude ztracena.",
+    "Cancel": "Zrušit"
 }