refactor: custom modals

5 files changed, 123 insertions, 28 deletions

diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..c4299fd
--- /dev/null
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import "../css/Dialog.css"
+
+interface ConfirmDialogProps {
+    title: string;
+    subtitle: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ title, subtitle, onConfirm, onCancel }) => {
+    return (
+        <div className='dimmer'>
+            <div className='dialog'>
+                <div className='dialog-element dialog-header'>
+                    <span>{title}</span>
+                </div>
+                <div className='dialog-element dialog-description'>
+                    <span>{subtitle}</span>
+                </div>
+                <div className='dialog-element dialog-btns-container'>
+                    <button onClick={onCancel}>Cancel</button>
+                    <button onClick={onConfirm}>Confirm</button>
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export default ConfirmDialog;
diff --git a/frontend/src/components/MapDeleteConfirmDialog.tsx b/frontend/src/components/MapDeleteConfirmDialog.tsx
deleted file mode 100644
index 1518a14..0000000
--- a/frontend/src/components/MapDeleteConfirmDialog.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import "../css/MapDeleteConfirmDialog.css"
-
-interface MapDeleteConfirmDialogProps {
-    open: boolean;
-    onClose: () => void;
-    map_id: number;
-    record_id: number;
-};
-
-const MapDeleteConfirmDialog: React.FC<MapDeleteConfirmDialogProps> = ({ open, onClose, map_id, record_id }) => {
-    if (open) {
-        return (
-            <div className='dimmer'>
-                <div>
-    
-                </div>
-            </div>
-        )
-    }
-    
-    return (
-        <></>
-    )
-};
-
-export default MapDeleteConfirmDialog;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
new file mode 100644
index 0000000..0a8db42
--- /dev/null
+++ b/frontend/src/components/MessageDialog.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import "../css/Dialog.css"
+
+interface MessageDialogProps {
+    title: string;
+    subtitle: string;
+    onClose: () => void;
+};
+
+const MessageDialog: React.FC<MessageDialogProps> = ({ title, subtitle, onClose }) => {
+    return (
+        <div className='dimmer'>
+            <div className='dialog'>
+                <div className='dialog-element dialog-header'>
+                    <span>{title}</span>
+                </div>
+                <div className='dialog-element dialog-description'>
+                    <span>{subtitle}</span>
+                </div>
+                <div className='dialog-element dialog-btns-container'>
+                    <button onClick={onClose}>Ok</button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MessageDialog;
diff --git a/frontend/src/components/UseConfirm.tsx b/frontend/src/components/UseConfirm.tsx
new file mode 100644
index 0000000..2fe0e12
--- /dev/null
+++ b/frontend/src/components/UseConfirm.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import ConfirmDialog from './ConfirmDialog';
+
+const useConfirm = ( title: string, subtitle: string ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
+
+    const confirm = () => {
+        setIsOpen(true);
+        return new Promise((resolve) => {
+            setResolvePromise(() => resolve);
+        });
+    };
+
+    const handleConfirm = () => {
+        setIsOpen(false);
+        if (resolvePromise) {
+            resolvePromise(true);
+        }
+    }
+
+    const handleCancel = () => {
+        setIsOpen(false);
+        if (resolvePromise) {
+            resolvePromise(false);
+        }
+    }
+
+    const ConfirmDialogComponent = isOpen && (
+        <ConfirmDialog title={title} subtitle={subtitle} onConfirm={handleConfirm} onCancel={handleCancel}></ConfirmDialog>
+    );
+
+    return { confirm, ConfirmDialogComponent };
+}
+
+export default useConfirm;
diff --git a/frontend/src/components/UseMessage.tsx b/frontend/src/components/UseMessage.tsx
new file mode 100644
index 0000000..fbd3c82
--- /dev/null
+++ b/frontend/src/components/UseMessage.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import MessageDialog from "./MessageDialog";
+
+const useMessage = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const [title, setTitle] = useState<string>("");
+    const [subtitle, setSubtitle] = useState<string>("");
+
+    const message = (title: string, subtitle: string) => {
+        setIsOpen(true);
+        setTitle(title);
+        setSubtitle(subtitle);
+    };
+
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+
+    const MessageDialogComponent = isOpen && (
+        <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
+    );
+
+    return { message, MessageDialogComponent };
+}
+
+export default useMessage;