Refactor: modal body and footer

MHMighani · May 24, 2022 · e5d529b · e5d529b
1 parent e4b028b
commit e5d529b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/client/src/components/common/modal.jsx b/client/src/components/common/modal.jsx
@@ -1,20 +1,13 @@
 import BootModal from "react-bootstrap/Modal";
 
-function CustomModal({ title, show, body, handleConfirm, handleClose }) {
+function CustomModal({ title, show, body, handleClose, footer }) {
   return (
     <BootModal show={show} onHide={handleClose}>
       <BootModal.Header closeButton>
         <BootModal.Title>{title}</BootModal.Title>
       </BootModal.Header>
-
-      <BootModal.Footer>
-        <button className="btn btn-success" onClick={handleConfirm}>
-          تایید
-        </button>
-        <button className="btn btn-danger" onClick={handleClose}>
-          انصراف
-        </button>
-      </BootModal.Footer>
+      {body && <BootModal.Body>{body}</BootModal.Body>}
+      {footer && <BootModal.Footer>{footer}</BootModal.Footer>}
     </BootModal>
   );
 }

diff --git a/client/src/hooks/useDeleteMessage.js b/client/src/hooks/useDeleteMessage.js
@@ -23,12 +23,24 @@ const useDeleteMsgModal = (handleConfirm) => {
     handleDelMsgClose();
   };
 
+  const modalFooter = (
+    <>
+      <button className="btn btn-success" onClick={handleMessageConfirm}>
+        تایید
+      </button>
+      <button className="btn btn-danger" onClick={handleDelMsgClose}>
+        انصراف
+      </button>
+    </>
+  );
+
   const modalBody = (
     <CustomModal
       title={title}
       handleClose={handleDelMsgClose}
       show={messageDisplay}
       handleConfirm={handleMessageConfirm}
+      footer={modalFooter}
     />
   );