#58 made dialogs as routes

src/containers/dialogs/Modal/index.tsx

@@ -1,57 +1,34 @@
-import React, { Attributes, FC, useCallback } from 'react';
-import { connect } from 'react-redux';
-import ReactDOM from 'react-dom';
-import styles from './styles.module.scss';
-import { IState } from '~/redux/store';
-import * as ACTIONS from '~/redux/modal/actions';
+import React, { FC, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import { DIALOG_CONTENT } from '~/constants/dialogs';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectModal } from '~/redux/modal/selectors';
+import { modalSetDialog, modalSetShown, modalShowDialog } from '~/redux/modal/actions';
+import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 
-const mapStateToProps = ({ modal }: IState) => ({ ...modal });
-const mapDispatchToProps = {
-  modalSetShown: ACTIONS.modalSetShown,
-  modalSetDialog: ACTIONS.modalSetDialog,
-  modalShowDialog: ACTIONS.modalShowDialog,
-};
+type IProps = {};
 
-type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
+const Modal: FC<IProps> = ({}) => {
+  const { is_shown, dialog } = useShallowSelect(selectModal);
+  const dispatch = useDispatch();
 
-const ModalUnconnected: FC<IProps> = ({
-  modalSetShown,
-  modalSetDialog,
-  modalShowDialog,
-  is_shown,
-  dialog,
-}) => {
   const onRequestClose = useCallback(() => {
-    modalSetShown(false);
-    modalSetDialog('');
-  }, [modalSetShown, modalSetDialog]);
+    dispatch(modalSetShown(false));
+    dispatch(modalSetDialog(''));
+  }, [dispatch]);
+
+  const onDialogChange = useCallback((val: string) => dispatch(modalShowDialog(val)), [dispatch]);
 
   if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null;
 
-  return ReactDOM.createPortal(
-    <div className={styles.fixed}>
-      <div className={styles.overlay} onClick={onRequestClose} />
-      <div className={styles.content}>
-        {React.createElement(DIALOG_CONTENT[dialog], {
-          onRequestClose,
-          onDialogChange: modalShowDialog,
-        })}
-      </div>
-    </div>,
-    document.body
+  return (
+    <ModalWrapper onOverlayClick={onRequestClose}>
+      {React.createElement(DIALOG_CONTENT[dialog], {
+        onRequestClose,
+        onDialogChange,
+      })}
+    </ModalWrapper>
   );
 };
 
-const Modal = connect(mapStateToProps, mapDispatchToProps)(ModalUnconnected);
-
-export { ModalUnconnected, Modal };
-
-/*
-
-  <div className={styles.content_scroller}>
-    <div className={styles.content_padder}>
-    </div>
-  </div>
-
-*/
+export { Modal };

src/containers/dialogs/Modal/styles.module.scss

@@ -1,61 +0,0 @@
-@import "src/styles/variables";
-
-.fixed {
-  position: fixed;
-  z-index: 30;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  animation: appear 0.25s forwards;
-}
-
-.content_scroller {
-  width: 100%;
-  max-width: 100vw;
-  max-height: 100vh;
-  overflow: auto;
-}
-
-.content_padder {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparentize($color: #000000, $amount: 0.9);
-  cursor: pointer;
-  animation: appear 0.25s forwards;
-
-  @include can_backdrop {
-    backdrop-filter: blur(15px);
-  }
-}