removed all router-modals

src/containers/dialogs/EditorCreateDialog/index.tsx

@@ -1,30 +1,19 @@
 import React, { FC, useCallback, useMemo, useRef } from 'react';
 import { EMPTY_NODE, NODE_TYPES } from '~/constants/node';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
-import { useHistory, useRouteMatch } from 'react-router';
 import { values } from 'ramda';
 import { INode } from '~/types';
 import { useCreateNode } from '~/hooks/node/useCreateNode';
+import { DialogComponentProps } from '~/types/modal';
 
-const EditorCreateDialog: FC = () => {
-  const history = useHistory();
-  const {
-    params: { type },
-    url,
-  } = useRouteMatch<{ type: string }>();
-
-  const backUrl = useMemo(() => {
-    return (url && url.replace(/\/create\/(.*)$/, '')) || '/';
-  }, [url]);
-
-  const goBack = useCallback(() => {
-    history.replace(backUrl);
-  }, [backUrl, history]);
+export interface EditorCreateDialogProps extends DialogComponentProps {
+  type: typeof NODE_TYPES[keyof typeof NODE_TYPES];
+  isInLab: boolean;
+}
 
+const EditorCreateDialog: FC<EditorCreateDialogProps> = ({ type, isInLab, onRequestClose }) => {
   const isExist = useMemo(() => values(NODE_TYPES).some(el => el === type), [type]);
 
-  const isInLab = useMemo(() => !!url.match(/^\/lab/), [url]);
-
   const data = useRef({ ...EMPTY_NODE, type, is_promoted: !isInLab });
 
   const createNode = useCreateNode();
@@ -32,16 +21,16 @@ const EditorCreateDialog: FC = () => {
   const onSubmit = useCallback(
     async (node: INode) => {
       await createNode(node);
-      goBack();
+      onRequestClose();
     },
-    [goBack, createNode]
+    [onRequestClose, createNode]
   );
 
   if (!type || !isExist) {
     return null;
   }
 
-  return <EditorDialog node={data.current} onRequestClose={goBack} onSubmit={onSubmit} />;
+  return <EditorDialog node={data.current} onRequestClose={onRequestClose} onSubmit={onSubmit} />;
 };
 
 export { EditorCreateDialog };

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,7 +1,7 @@
 import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/constants/node';
-import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
+import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { prop } from 'ramda';
 import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
@@ -9,8 +9,6 @@ import { EditorButtons } from '~/components/editors/EditorButtons';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { FormikProvider } from 'formik';
 import { INode } from '~/types';
-import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
-import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 import { useCloseOnEscape } from '~/hooks';
 import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
 import { DialogComponentProps } from '~/types/modal';
@@ -50,8 +48,6 @@ const EditorDialog: FC<Props> = observer(({ node, onRequestClose, onSubmit }) =>
     setConfirmModalShown(true);
   }, [dirty, isConfirmModalShown, onRequestClose, closeConfirmModal]);
 
-  const error = useTranslatedError(status);
-
   useCloseOnEscape(onClose);
 
   if (!component) {
@@ -59,29 +55,26 @@ const EditorDialog: FC<Props> = observer(({ node, onRequestClose, onSubmit }) =>
   }
 
   return (
-    <ModalWrapper onOverlayClick={onClose}>
-      <UploaderContextProvider value={uploader}>
-        <FormikProvider value={formik}>
-          <form onSubmit={handleSubmit} className={styles.form}>
-            <BetterScrollDialog
-              footer={<EditorButtons />}
-              backdrop={<CoverBackdrop cover={values.cover} />}
-              width={860}
-              error={error}
-              onClose={onClose}
-            >
-              <>
-                {isConfirmModalShown && (
-                  <EditorConfirmClose onApprove={onRequestClose} onDecline={closeConfirmModal} />
-                )}
+    <UploaderContextProvider value={uploader}>
+      <FormikProvider value={formik}>
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <BetterScrollDialog
+            footer={<EditorButtons />}
+            backdrop={<CoverBackdrop cover={values.cover} />}
+            width={860}
+            onClose={onClose}
+          >
+            <>
+              {isConfirmModalShown && (
+                <EditorConfirmClose onApprove={onRequestClose} onDecline={closeConfirmModal} />
+              )}
 
-                <div className={styles.editor}>{createElement(component)}</div>
-              </>
-            </BetterScrollDialog>
-          </form>
-        </FormikProvider>
-      </UploaderContextProvider>
-    </ModalWrapper>
+              <div className={styles.editor}>{createElement(component)}</div>
+            </>
+          </BetterScrollDialog>
+        </form>
+      </FormikProvider>
+    </UploaderContextProvider>
   );
 });
 

src/containers/dialogs/EditorEditDialog/index.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback } from 'react';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
-import { useHistory, useRouteMatch } from 'react-router';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import styles from './styles.module.scss';
@@ -8,37 +7,27 @@ import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { useUpdateNode } from '~/hooks/node/useUpdateNode';
 import { INode } from '~/types';
 import { observer } from 'mobx-react-lite';
+import { DialogComponentProps } from '~/types/modal';
 
-const EditorEditDialog: FC = observer(() => {
-  const history = useHistory();
+export interface EditorEditDialogProps extends DialogComponentProps {
+  nodeId: number;
+}
 
-  const {
-    params: { id },
-    url,
-  } = useRouteMatch<{ id: string }>();
-
-  const backUrl = useMemo(() => {
-    return url.replace(/\/edit$/, '');
-  }, [url]);
-
-  const goBack = useCallback(() => {
-    history.replace(backUrl);
-  }, [backUrl, history]);
-
-  const { node, isLoading } = useLoadNode(parseInt(id, 10));
-  const updateNode = useUpdateNode(parseInt(id, 10));
+const EditorEditDialog: FC<EditorEditDialogProps> = observer(({ nodeId, onRequestClose }) => {
+  const { node, isLoading } = useLoadNode(nodeId);
+  const updateNode = useUpdateNode(nodeId);
 
   const onSubmit = useCallback(
     async (node: INode) => {
       await updateNode(node);
-      goBack();
+      onRequestClose();
     },
-    [updateNode, goBack]
+    [updateNode, onRequestClose]
   );
 
   if (isLoading || !node) {
     return (
-      <ModalWrapper onOverlayClick={goBack}>
+      <ModalWrapper onOverlayClick={onRequestClose}>
         <div className={styles.loader}>
           <LoaderCircle size={64} />
         </div>
@@ -46,7 +35,7 @@ const EditorEditDialog: FC = observer(() => {
     );
   }
 
-  return <EditorDialog node={node} onRequestClose={goBack} onSubmit={onSubmit} />;
+  return <EditorDialog node={node} onRequestClose={onRequestClose} onSubmit={onSubmit} />;
 });
 
 export { EditorEditDialog };