removed PhotoSwipeStore

src/containers/dialogs/LoadingDialog/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, VFC } from 'react';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import styles from './styles.module.scss';
 
-const LoadingDialog: FC<{}> = () => (
+const LoadingDialog: VFC = () => (
   <div className={styles.wrap}>
     <LoaderCircle size={64} />
   </div>

src/containers/dialogs/LoginDialog/index.tsx

@@ -58,7 +58,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
   const onRestoreRequest = useCallback(
     event => {
       event.preventDefault();
-      showRestoreDialog();
+      showRestoreDialog({});
     },
     [showRestoreDialog]
   );

src/containers/dialogs/Modal/index.tsx

@@ -1,14 +1,14 @@
-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-lite";
+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-lite';
 
 type IProps = {};
 
 const Modal: FC<IProps> = observer(() => {
-  const { current, hide } = useModalStore();
+  const { current, hide, props } = useModalStore();
 
   if (!current || !has(current, DIALOG_CONTENT)) {
     return null;
@@ -16,8 +16,9 @@ const Modal: FC<IProps> = observer(() => {
 
   return (
     <ModalWrapper onOverlayClick={hide}>
-      {React.createElement(DIALOG_CONTENT[current!]!, {
+      {React.createElement(DIALOG_CONTENT[current!]! as any, {
         onRequestClose: hide,
+        ...props,
       })}
     </ModalWrapper>
   );

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -8,18 +8,23 @@ 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';
+import { IFile } from '~/redux/types';
+import { IDialogProps } from '~/types/modal';
 
-const PhotoSwipe: VFC = observer(() => {
+export interface PhotoSwipeProps extends IDialogProps {
+  items: IFile[];
+  index: number;
+}
+
+const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
   let ref = useRef<HTMLDivElement>(null);
   const { hideModal } = useModal();
-  const photoswipe = usePhotoSwipeStore();
 
   useEffect(() => {
     new Promise(async resolve => {
       const images = await Promise.all(
-        photoswipe.images.map(
+        items.map(
           image =>
             new Promise(resolveImage => {
               const img = new Image();
@@ -44,7 +49,7 @@ const PhotoSwipe: VFC = observer(() => {
       resolve(images);
     }).then(images => {
       const ps = new PhotoSwipeJs(ref.current, PhotoSwipeUI_Default, images, {
-        index: photoswipe.index || 0,
+        index: index || 0,
         closeOnScroll: false,
         history: false,
       });
@@ -53,7 +58,7 @@ const PhotoSwipe: VFC = observer(() => {
       ps.listen('destroy', hideModal);
       ps.listen('close', hideModal);
     });
-  }, [hideModal, photoswipe.images, photoswipe.index]);
+  }, [hideModal, items, index]);
 
   useBlockBackButton(hideModal);
 

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
+import React, { FC, useCallback, useEffect, useMemo, useState, VFC } from 'react';
+import { connect, useDispatch } from 'react-redux';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
@@ -7,29 +7,31 @@ import { Button } from '~/components/input/Button';
 import styles from './styles.module.scss';
 
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { pick } from 'ramda';
 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';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
+import { IAuthState } from '~/redux/auth/types';
 
-const mapStateToProps = state => ({
-  restore: selectAuthRestore(state),
-});
+interface RestoreRequestDialogProps extends IDialogProps {}
 
-const mapDispatchToProps = pick(['authRequestRestoreCode', 'authSetRestore'], AUTH_ACTIONS);
-
-type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const RestoreRequestDialogUnconnected: FC<IProps> = ({
-  restore: { error, is_loading, is_succesfull },
-  authSetRestore,
-  onRequestClose,
-  authRequestRestoreCode,
-}) => {
+const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }) => {
+  const dispatch = useDispatch();
+  const { error, is_loading, is_succesfull } = useShallowSelect(selectAuthRestore);
   const [field, setField] = useState('');
 
+  const authSetRestore = useCallback(
+    (restore: Partial<IAuthState['restore']>) => dispatch(AUTH_ACTIONS.authSetRestore(restore)),
+    [dispatch]
+  );
+
+  const authRequestRestoreCode = useCallback(
+    (field: string) => dispatch(AUTH_ACTIONS.authRequestRestoreCode(field)),
+    [dispatch]
+  );
+
   const onSubmit = useCallback(
     event => {
       event.preventDefault();
@@ -105,9 +107,4 @@ const RestoreRequestDialogUnconnected: FC<IProps> = ({
   );
 };
 
-const RestoreRequestDialog = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(RestoreRequestDialogUnconnected);
-
 export { RestoreRequestDialog };