#58 made dialogs as routes

src/containers/dialogs/EditorEditDialog/index.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { EMPTY_NODE } from '~/redux/node/constants';
+import { EditorDialog } from '~/containers/dialogs/EditorDialog';
+import { useHistory, useRouteMatch } from 'react-router';
+import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
+import { apiGetNodeWithCancel } from '~/redux/node/api';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import styles from './styles.module.scss';
+
+const EditorEditDialog: FC = () => {
+  const [data, setData] = useState(EMPTY_NODE);
+  const [isLoading, setLoading] = useState(false);
+  const history = useHistory();
+
+  const {
+    params: { id },
+    url,
+  } = useRouteMatch<{ id: string }>();
+
+  const backUrl = useMemo(() => {
+    return url.replace(/\/edit$/, '');
+  }, [url]);
+
+  const goBack = useCallback(() => {
+    history.replace(backUrl);
+  }, [backUrl, history]);
+
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+
+    const { request, cancel } = apiGetNodeWithCancel({ id });
+
+    setLoading(true);
+    request
+      .then(data => setData(data.node))
+      .then(() => setLoading(false))
+      .catch(console.log);
+
+    return () => cancel();
+  }, [id]);
+
+  return (
+    <ModalWrapper onOverlayClick={console.log}>
+      {isLoading ? (
+        <div className={styles.loader}>
+          <LoaderCircle size={64} />
+        </div>
+      ) : (
+        <EditorDialog node={data} onRequestClose={goBack} />
+      )}
+    </ModalWrapper>
+  );
+};
+
+export { EditorEditDialog };