#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,17 +20,24 @@ 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 (
+    <ModalWrapper onOverlayClick={onClose}>
       <FileUploaderProvider value={uploader}>
         <FormikProvider value={formik}>
           <form onSubmit={handleSubmit} className={styles.form}>
@@ -39,13 +46,14 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
               backdrop={<CoverBackdrop cover={values.cover} />}
               width={860}
               error=""
-            onClose={onRequestClose}
+              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]);
 
+  if (isLoading) {
     return (
-    <ModalWrapper onOverlayClick={console.log}>
-      {isLoading ? (
+      <ModalWrapper onOverlayClick={goBack}>
         <div className={styles.loader}>
           <LoaderCircle size={64} />
         </div>
-      ) : (
-        <EditorDialog node={data} onRequestClose={goBack} />
-      )}
       </ModalWrapper>
     );
+  }
+
+  return <EditorDialog node={data} onRequestClose={goBack} />;
 };
 
 export { EditorEditDialog };