From 3e8c2d4b6e7511f3f469c1fb4e50ebb4ef6999cb Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 29 Mar 2021 15:48:00 +0700
Subject: [PATCH] #58 added exit confirmation

---
 .../dialogs/EditorCreateDialog/index.tsx      |  7 +--
 src/containers/dialogs/EditorDialog/index.tsx | 48 +++++++++++--------
 .../dialogs/EditorEditDialog/index.tsx        | 16 +++----
 3 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/containers/dialogs/EditorCreateDialog/index.tsx b/src/containers/dialogs/EditorCreateDialog/index.tsx
index 215f0172..30d26d27 100644
--- a/src/containers/dialogs/EditorCreateDialog/index.tsx
+++ b/src/containers/dialogs/EditorCreateDialog/index.tsx
@@ -3,7 +3,6 @@ import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
 import { useHistory, useRouteMatch } from 'react-router';
 import { values } from 'ramda';
-import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 
 const EditorCreateDialog: FC = () => {
   const history = useHistory();
@@ -28,11 +27,7 @@ const EditorCreateDialog: FC = () => {
     return null;
   }
 
-  return (
-    <ModalWrapper onOverlayClick={goBack}>
-      <EditorDialog node={data.current} onRequestClose={goBack} />
-    </ModalWrapper>
-  );
+  return <EditorDialog node={data.current} onRequestClose={goBack} />;
 };
 
 export { EditorCreateDialog };
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index 0eb26972..5a070157 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -1,6 +1,5 @@
-import React, { createElement, FC, useMemo } from 'react';
+import React, { createElement, FC, useCallback, useMemo } from 'react';
 import { IDialogProps } from '~/redux/modal/constants';
-import { useCloseOnEscape } from '~/utils/hooks';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/redux/node/constants';
 import { BetterScrollDialog } from '../BetterScrollDialog';
@@ -12,6 +11,7 @@ import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploade
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { FormikProvider } from 'formik';
 import { INode } from '~/redux/types';
+import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 
 interface Props extends IDialogProps {
   node: INode;
@@ -20,32 +20,40 @@ interface Props extends IDialogProps {
 const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
   const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, []);
   const formik = useNodeFormFormik(node, uploader, onRequestClose);
-  const { values, handleSubmit } = formik;
-
-  useCloseOnEscape(onRequestClose);
+  const { values, handleSubmit, dirty } = formik;
 
   const component = useMemo(() => node.type && prop(node.type, NODE_EDITORS), [node.type]);
 
+  const onClose = useCallback(() => {
+    if (!window.confirm('Точно выйти?')) {
+      return;
+    }
+
+    onRequestClose();
+  }, [onRequestClose, dirty]);
+
   if (!component) {
     return null;
   }
 
   return (
-    <FileUploaderProvider value={uploader}>
-      <FormikProvider value={formik}>
-        <form onSubmit={handleSubmit} className={styles.form}>
-          <BetterScrollDialog
-            footer={<EditorButtons />}
-            backdrop={<CoverBackdrop cover={values.cover} />}
-            width={860}
-            error=""
-            onClose={onRequestClose}
-          >
-            <div className={styles.editor}>{createElement(component)}</div>
-          </BetterScrollDialog>
-        </form>
-      </FormikProvider>
-    </FileUploaderProvider>
+    <ModalWrapper onOverlayClick={onClose}>
+      <FileUploaderProvider value={uploader}>
+        <FormikProvider value={formik}>
+          <form onSubmit={handleSubmit} className={styles.form}>
+            <BetterScrollDialog
+              footer={<EditorButtons />}
+              backdrop={<CoverBackdrop cover={values.cover} />}
+              width={860}
+              error=""
+              onClose={onClose}
+            >
+              <div className={styles.editor}>{createElement(component)}</div>
+            </BetterScrollDialog>
+          </form>
+        </FormikProvider>
+      </FileUploaderProvider>
+    </ModalWrapper>
   );
 };
 
diff --git a/src/containers/dialogs/EditorEditDialog/index.tsx b/src/containers/dialogs/EditorEditDialog/index.tsx
index ebdd98b2..88550f8f 100644
--- a/src/containers/dialogs/EditorEditDialog/index.tsx
+++ b/src/containers/dialogs/EditorEditDialog/index.tsx
@@ -41,17 +41,17 @@ const EditorEditDialog: FC = () => {
     return () => cancel();
   }, [id]);
 
-  return (
-    <ModalWrapper onOverlayClick={console.log}>
-      {isLoading ? (
+  if (isLoading) {
+    return (
+      <ModalWrapper onOverlayClick={goBack}>
         <div className={styles.loader}>
           <LoaderCircle size={64} />
         </div>
-      ) : (
-        <EditorDialog node={data} onRequestClose={goBack} />
-      )}
-    </ModalWrapper>
-  );
+      </ModalWrapper>
+    );
+  }
+
+  return <EditorDialog node={data} onRequestClose={goBack} />;
 };
 
 export { EditorEditDialog };