completely removed modal reducer

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,5 +1,4 @@
 import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
-import { IDialogProps } from '~/redux/modal/constants';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/constants/node';
 import { BetterScrollDialog } from '../BetterScrollDialog';
@@ -15,6 +14,7 @@ import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 import { useCloseOnEscape } from '~/hooks';
 import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
+import { IDialogProps } from '~/types/modal';
 
 interface Props extends IDialogProps {
   node: INode;

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { DIALOGS, IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/hooks';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
@@ -12,13 +11,15 @@ import { BetterScrollDialog } from '../BetterScrollDialog';
 
 import styles from './styles.module.scss';
 import * as ACTIONS from '~/redux/auth/actions';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { ISocialProvider } from '~/redux/auth/types';
 import { pick } from 'ramda';
 import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
 import { OAUTH_EVENT_TYPES } from '~/redux/types';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
 import { useTranslatedError } from '~/hooks/data/useTranslatedError';
+import { IDialogProps } from '~/types/modal';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Dialog } from '~/constants/modal';
 
 const mapStateToProps = state => ({
   ...pick(['error', 'is_registering'], selectAuthLogin(state)),
@@ -28,7 +29,6 @@ const mapDispatchToProps = {
   userSendLoginRequest: ACTIONS.userSendLoginRequest,
   userSetLoginError: ACTIONS.userSetLoginError,
   authLoginWithSocial: ACTIONS.authLoginWithSocial,
-  modalShowDialog: MODAL_ACTIONS.modalShowDialog,
   authGotOauthLoginEvent: ACTIONS.authGotOauthLoginEvent,
 };
 
@@ -40,12 +40,13 @@ const LoginDialogUnconnected: FC<IProps> = ({
   onRequestClose,
   userSendLoginRequest,
   userSetLoginError,
-  modalShowDialog,
   authGotOauthLoginEvent,
 }) => {
   const [username, setUserName] = useState('');
   const [password, setPassword] = useState('');
 
+  const showRestoreDialog = useShowModal(Dialog.RestoreRequest);
+
   const onSubmit = useCallback(
     (event: FormEvent) => {
       event.preventDefault();
@@ -57,9 +58,9 @@ const LoginDialogUnconnected: FC<IProps> = ({
   const onRestoreRequest = useCallback(
     event => {
       event.preventDefault();
-      modalShowDialog(DIALOGS.RESTORE_REQUEST);
+      showRestoreDialog();
     },
-    [modalShowDialog]
+    [showRestoreDialog]
   );
 
   const openOauthWindow = useCallback(

src/containers/dialogs/LoginSocialRegisterDialog/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { IDialogProps } from '~/redux/modal/constants';
 import { BetterScrollDialog } from '~/containers/dialogs/BetterScrollDialog';
 import { Padder } from '~/components/containers/Padder';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
@@ -12,6 +11,7 @@ import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { useCloseOnEscape } from '~/hooks';
 import { LoginSocialRegisterButtons } from '~/containers/dialogs/LoginSocialRegisterButtons';
 import { Toggle } from '~/components/input/Toggle';
+import { IDialogProps } from '~/types/modal';
 
 const mapStateToProps = selectAuthRegisterSocial;
 const mapDispatchToProps = {

src/containers/dialogs/Modal/index.tsx

@@ -1,34 +1,26 @@
-import React, { FC, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { DIALOG_CONTENT } from '~/constants/dialogs';
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectModal } from '~/redux/modal/selectors';
-import { modalSetDialog, modalSetShown, modalShowDialog } from '~/redux/modal/actions';
+import React, { FC } from 'react';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
+import { DIALOG_CONTENT } from '~/constants/modal';
+import { useModalStore } from '~/store/modal/useModalStore';
+import { has } from 'ramda';
+import { observer } from 'mobx-react';
 
 type IProps = {};
 
-const Modal: FC<IProps> = ({}) => {
-  const { is_shown, dialog } = useShallowSelect(selectModal);
-  const dispatch = useDispatch();
+const Modal: FC<IProps> = observer(() => {
+  const { current, hide } = useModalStore();
 
-  const onRequestClose = useCallback(() => {
-    dispatch(modalSetShown(false));
-    dispatch(modalSetDialog(''));
-  }, [dispatch]);
-
-  const onDialogChange = useCallback((val: string) => dispatch(modalShowDialog(val)), [dispatch]);
-
-  if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null;
+  if (!current || !has(current, DIALOG_CONTENT)) {
+    return null;
+  }
 
   return (
-    <ModalWrapper onOverlayClick={onRequestClose}>
-      {React.createElement(DIALOG_CONTENT[dialog], {
-        onRequestClose,
-        onDialogChange,
+    <ModalWrapper onOverlayClick={hide}>
+      {React.createElement(DIALOG_CONTENT[current!]!, {
+        onRequestClose: hide,
       })}
     </ModalWrapper>
   );
-};
+});
 
 export { Modal };

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -1,33 +1,22 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect, useRef, VFC } from 'react';
 
 import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
 import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
 import 'photoswipe/dist/photoswipe.css';
 import 'photoswipe/dist/default-skin/default-skin.css';
-import { IState } from '~/redux/store';
-import { selectModal } from '~/redux/modal/selectors';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { useBlockBackButton } from '~/hooks/navigation/useBlockBackButton';
+import { useModal } from '~/hooks/modal/useModal';
+import { usePhotoSwipeStore } from '~/store/photoSwipe/usePhotoSwipeStore';
+import { observer } from 'mobx-react';
 
-const mapStateToProps = (state: IState) => ({
-  photoswipe: selectModal(state).photoswipe,
-});
-
-const mapDispatchToProps = {
-  modalSetShown: MODAL_ACTIONS.modalSetShown,
-};
-
-type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
+const PhotoSwipe: VFC = observer(() => {
   let ref = useRef<HTMLDivElement>(null);
-
-  const closeModal = useCallback(() => modalSetShown(false), [modalSetShown]);
+  const { hideModal } = useModal();
+  const photoswipe = usePhotoSwipeStore();
 
   useEffect(() => {
     new Promise(async resolve => {
@@ -63,12 +52,12 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
       });
 
       ps.init();
-      ps.listen('destroy', closeModal);
-      ps.listen('close', closeModal);
+      ps.listen('destroy', hideModal);
+      ps.listen('close', hideModal);
     });
-  }, [closeModal, photoswipe.images, photoswipe.index]);
+  }, [hideModal, photoswipe.images, photoswipe.index]);
 
-  useBlockBackButton(closeModal);
+  useBlockBackButton(hideModal);
 
   return (
     <div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>
@@ -112,8 +101,6 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
       </div>
     </div>
   );
-};
-
-const PhotoSwipe = connect(mapStateToProps, mapDispatchToProps)(PhotoSwipeUnconnected);
+});
 
 export { PhotoSwipe };

src/containers/dialogs/ProfileDialog/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { ProfileInfo } from '~/containers/profile/ProfileInfo';
-import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
@@ -14,6 +13,7 @@ import { ProfileDescription } from '~/components/profile/ProfileDescription';
 import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 import { ProfileSettings } from '~/components/profile/ProfileSettings';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
+import { IDialogProps } from '~/types/modal';
 
 const mapStateToProps = state => ({
   profile: selectAuthProfile(state),

src/containers/dialogs/RestorePasswordDialog/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
@@ -13,6 +12,7 @@ import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';
 import { useCloseOnEscape } from '~/hooks';
+import { IDialogProps } from '~/types/modal';
 
 const mapStateToProps = state => ({
   restore: selectAuthRestore(state),

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
@@ -13,6 +12,7 @@ import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';
 import { useCloseOnEscape } from '~/hooks';
+import { IDialogProps } from '~/types/modal';
 
 const mapStateToProps = state => ({
   restore: selectAuthRestore(state),