#58 added exit confirmation

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 };

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>
   );
 };
 

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 };