#58 made dialogs as routes

src/components/bars/SubmitBar/index.tsx

@@ -1,58 +1,44 @@
-import React, { FC, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { FC, useCallback, useState } from 'react';
 import { Icon } from '~/components/input/Icon';
-import { nodeCreate } from '~/redux/node/actions';
-
-import styles from './styles.module.scss';
-import { NODE_TYPES } from '~/redux/node/constants';
+import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import { useRouteMatch } from 'react-router';
+import styles from './styles.module.scss';
 
 interface Props {
   isLab?: boolean;
 }
 
 const SubmitBar: FC<Props> = ({ isLab }) => {
-  const dispatch = useDispatch();
+  const { url } = useRouteMatch();
+  const [focused, setFocused] = useState(false);
 
-  const onOpenImageEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.IMAGE, isLab)), [
-    dispatch,
-  ]);
-
-  const onOpenTextEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.TEXT, isLab)), [
-    dispatch,
-  ]);
-
-  const onOpenVideoEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.VIDEO, isLab)), [
-    dispatch,
-  ]);
-
-  const onOpenAudioEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.AUDIO, isLab)), [
-    dispatch,
-  ]);
+  const onFocus = useCallback(() => setFocused(true), [setFocused]);
+  const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
   return (
     <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
-      <div className={styles.panel}>
-        <div onClick={onOpenImageEditor}>
-          <Icon icon="image" />
-        </div>
+      <div className={classNames(styles.panel, { [styles.active]: focused })}>
+        <Link to={`${url}/create/image`} className={styles.link}>
+          <Icon icon="image" size={32} />
+        </Link>
 
-        <div onClick={onOpenTextEditor}>
-          <Icon icon="text" />
-        </div>
+        <Link to={`${url}/create/text`} className={styles.link}>
+          <Icon icon="text" size={32} />
+        </Link>
 
-        <div onClick={onOpenVideoEditor}>
-          <Icon icon="video" />
-        </div>
+        <Link to={`${url}/create/video`} className={styles.link}>
+          <Icon icon="video" size={32} />
+        </Link>
 
-        <div onClick={onOpenAudioEditor}>
-          <Icon icon="audio" />
-        </div>
+        <Link to={`${url}/create/audio`} className={styles.link}>
+          <Icon icon="audio" size={32} />
+        </Link>
       </div>
 
-      <div className={styles.button}>
+      <button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button">
         <Icon icon="plus" />
-      </div>
+      </button>
     </div>
   );
 };

src/components/bars/SubmitBar/styles.module.scss

@@ -5,13 +5,7 @@
   bottom: 0;
   left: 50%;
   transform: translate($content_width / 2 + $gap, 0);
-  z-index: 4;
-
-  &:hover {
-    .panel {
-      transform: translate(0, 0);
-    }
-  }
+  z-index: 14;
 
   @media (max-width: $content_width + ($bar_height + $gap) * 2) {
     left: 100%;
@@ -31,6 +25,8 @@
   cursor: pointer;
   position: relative;
   z-index: 2;
+  border: none;
+  outline: none;
 
   svg {
     width: 32px;
@@ -50,24 +46,32 @@
   padding-bottom: $bar_height;
   border-radius: $radius $radius 0 0;
   transform: translate(0, 100%);
-  transition: transform 250ms;
+  transition: transform 250ms 250ms;
 
-  div {
-    @include outer_shadow;
-    height: $bar_height;
-    width: $bar_height;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    svg {
-      width: 32px;
-      height: 32px;
-    }
-
-    &:first-child {
-      border-radius: $radius $radius 0 0;
-    }
+  &.active {
+    transform: translate(0, 0);
+    transition: transform 250ms;
+  }
+}
+
+.link {
+  @include outer_shadow;
+
+  height: $bar_height;
+  width: $bar_height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  fill: white;
+  color: white;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  &:first-child {
+    border-radius: $radius $radius 0 0;
   }
 }