removed all router-modals

src/components/bars/SubmitBar/index.tsx

@@ -1,26 +1,26 @@
 import React, { FC, useCallback, useState } from 'react';
 import { Icon } from '~/components/input/Icon';
-import { Link } from 'react-router-dom';
 import classNames from 'classnames';
-import { useRouteMatch } from 'react-router';
 import styles from './styles.module.scss';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Dialog } from '~/constants/modal';
 
 interface Props {
   isLab?: boolean;
 }
 
 const SubmitBar: FC<Props> = ({ isLab }) => {
-  const { url } = useRouteMatch();
+  const showModal = useShowModal(Dialog.CreateNode);
   const [focused, setFocused] = useState(false);
 
   const onFocus = useCallback(() => setFocused(true), [setFocused]);
   const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
   const createUrl = useCallback(
-    (type: string) => {
-      return [url.replace(/\/$/, ''), 'create', type].join('/');
+    (type: string) => () => {
+      showModal({ type, isInLab: !!isLab });
     },
-    [url]
+    [isLab, showModal]
   );
 
   const icon = isLab ? 'lab' : 'plus';
@@ -28,21 +28,21 @@ const SubmitBar: FC<Props> = ({ isLab }) => {
   return (
     <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
       <div className={classNames(styles.panel, { [styles.active]: focused })}>
-        <Link to={createUrl('image')} className={styles.link}>
+        <button onClick={createUrl('image')} className={styles.link}>
           <Icon icon="image" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('text')} className={styles.link}>
+        <button onClick={createUrl('text')} className={styles.link}>
           <Icon icon="text" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('video')} className={styles.link}>
+        <button onClick={createUrl('video')} className={styles.link}>
           <Icon icon="video" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('audio')} className={styles.link}>
+        <button onClick={createUrl('audio')} className={styles.link}>
           <Icon icon="audio" size={32} />
-        </Link>
+        </button>
       </div>
 
       <button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button">

src/components/node/NodeTitle/index.tsx

@@ -27,6 +27,7 @@ interface IProps {
   onLike: () => void;
   onStar: () => void;
   onLock: () => void;
+  onEdit: () => void;
 }
 
 const NodeTitle: VFC<IProps> = memo(
@@ -50,6 +51,7 @@ const NodeTitle: VFC<IProps> = memo(
     onStar,
     onLike,
     onLock,
+    onEdit,
   }) => {
     return (
       <div className={classNames(styles.wrap)}>
@@ -91,11 +93,7 @@ const NodeTitle: VFC<IProps> = memo(
                   <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
                 </div>
 
-                {!!id && (
-                  <Link to={URLS.NODE_EDIT_URL(id)}>
-                    <Icon icon="edit" size={24} />
-                  </Link>
-                )}
+                {!!id && <Icon icon="edit" size={24} onClick={onEdit} />}
               </div>
             </div>
           )}