removed PhotoSwipeStore

src/components/main/Header/index.tsx

@@ -132,7 +132,12 @@ const HeaderUnconnected: FC<IProps> = observer(
           )}
 
           {!is_user && (
-            <Button className={styles.user_button} onClick={onLogin} round color="secondary">
+            <Button
+              className={styles.user_button}
+              onClick={() => onLogin({})}
+              round
+              color="secondary"
+            >
               ВДОХ
             </Button>
           )}

src/constants/modal/index.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, VFC } from 'react';
 import { LoginDialog } from '~/containers/dialogs/LoginDialog';
 import { LoginSocialRegisterDialog } from '~/containers/dialogs/LoginSocialRegisterDialog';
 import { LoadingDialog } from '~/containers/dialogs/LoadingDialog';
@@ -6,7 +6,7 @@ import { TestDialog } from '~/containers/dialogs/TestDialog';
 import { ProfileDialog } from '~/containers/dialogs/ProfileDialog';
 import { RestoreRequestDialog } from '~/containers/dialogs/RestoreRequestDialog';
 import { RestorePasswordDialog } from '~/containers/dialogs/RestorePasswordDialog';
-import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe';
+import { PhotoSwipe, PhotoSwipeProps } from '~/containers/dialogs/PhotoSwipe';
 import { IDialogProps } from '~/types/modal';
 
 export enum Dialog {
@@ -20,7 +20,7 @@ export enum Dialog {
   Photoswipe = 'Photoswipe',
 }
 
-export const DIALOG_CONTENT: Record<Dialog, FC<IDialogProps>> = {
+export const DIALOG_CONTENT = {
   [Dialog.Login]: LoginDialog,
   [Dialog.LoginSocialRegister]: LoginSocialRegisterDialog,
   [Dialog.Loading]: LoadingDialog,
@@ -29,4 +29,4 @@ export const DIALOG_CONTENT: Record<Dialog, FC<IDialogProps>> = {
   [Dialog.RestoreRequest]: RestoreRequestDialog,
   [Dialog.RestorePassword]: RestorePasswordDialog,
   [Dialog.Photoswipe]: PhotoSwipe,
-};
+} as const;

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 };

src/hooks/modal/useModal.ts

@@ -1,13 +1,24 @@
 import { useModalStore } from '~/store/modal/useModalStore';
-import { useCallback } from 'react';
-import { Dialog } from '~/constants/modal';
+import { FC, useCallback, VFC } from 'react';
+import { Dialog, DIALOG_CONTENT } from '~/constants/modal';
+import { IDialogProps } from '~/types/modal';
+
+export type DialogContentProps = {
+  [K in keyof typeof DIALOG_CONTENT]: typeof DIALOG_CONTENT[K] extends (props: infer U) => any
+    ? U extends IDialogProps
+      ? keyof Omit<U, 'onRequestClose' | 'children'> extends never
+        ? {}
+        : Omit<U, 'onRequestClose' | 'children'>
+      : {}
+    : {};
+};
 
 export const useModal = () => {
   const { setCurrent, hide } = useModalStore();
 
   const showModal = useCallback(
-    (dialog: Dialog) => {
-      setCurrent(dialog);
+    <T extends Dialog>(dialog: T, props: DialogContentProps[T]) => {
+      setCurrent(dialog, props);
     },
     [setCurrent]
   );

src/hooks/modal/useShowModal.ts

@@ -1,11 +1,14 @@
 import { useCallback } from 'react';
-import { useModal } from '~/hooks/modal/useModal';
+import { DialogContentProps, useModal } from '~/hooks/modal/useModal';
 import { Dialog } from '~/constants/modal';
 
-export const useShowModal = (dialog: Dialog) => {
+export const useShowModal = <T extends Dialog>(dialog: T) => {
   const modal = useModal();
 
-  return useCallback(() => {
-    modal.showModal(dialog);
-  }, [dialog, modal]);
+  return useCallback(
+    (props: DialogContentProps[T]) => {
+      modal.showModal(dialog, props);
+    },
+    [dialog, modal]
+  );
 };

src/hooks/navigation/useImageModal.ts

@@ -1,18 +1,15 @@
 import { useCallback } from 'react';
 import { IFile } from '~/redux/types';
-import { usePhotoSwipeStore } from '~/store/photoSwipe/usePhotoSwipeStore';
 import { useShowModal } from '~/hooks/modal/useShowModal';
 import { Dialog } from '~/constants/modal';
 
 export const useImageModal = () => {
-  const { setData } = usePhotoSwipeStore();
   const showModal = useShowModal(Dialog.Photoswipe);
 
   return useCallback(
     (images: IFile[], index: number) => {
-      setData(images, index);
-      showModal();
+      showModal({ items: images, index });
     },
-    [setData, showModal]
+    [showModal]
   );
 };

src/redux/auth/sagas.ts

@@ -152,7 +152,7 @@ function* loadProfile({ username }: ReturnType<typeof authLoadProfile>): SagaIte
 }
 
 function* openProfile({ username, tab = 'profile' }: ReturnType<typeof authOpenProfile>) {
-  modalStore.setCurrent(Dialog.Profile);
+  modalStore.setCurrent(Dialog.Profile, {});
   yield put(authSetProfile({ tab }));
 
   const success: Unwrap<typeof loadProfile> = yield call(loadProfile, authLoadProfile(username));
@@ -265,7 +265,7 @@ function* showRestoreModal({ code }: ReturnType<typeof authShowRestoreModal>) {
 
     yield put(authSetRestore({ user: data.user, code, is_loading: false }));
 
-    modalStore.setCurrent(Dialog.RestoreRequest);
+    modalStore.setCurrent(Dialog.RestoreRequest, {});
   } catch (error) {
     showErrorToast(error);
 
@@ -273,7 +273,7 @@ function* showRestoreModal({ code }: ReturnType<typeof authShowRestoreModal>) {
       authSetRestore({ is_loading: false, error: getErrorMessage(error) || ERRORS.CODE_IS_INVALID })
     );
 
-    modalStore.setCurrent(Dialog.RestoreRequest);
+    modalStore.setCurrent(Dialog.RestoreRequest, {});
   }
 }
 
@@ -378,7 +378,7 @@ function* loginWithSocial({ token }: ReturnType<typeof authLoginWithSocial>) {
     // Backend asks us for account registration
     if (current !== Dialog.LoginSocialRegister && data?.needs_register) {
       yield put(authSetRegisterSocial({ token }));
-      modalStore.setCurrent(Dialog.LoginSocialRegister);
+      modalStore.setCurrent(Dialog.LoginSocialRegister, {});
       return;
     }
 

src/store/index.ts

@@ -1,13 +1,11 @@
 import { makeAutoObservable } from 'mobx';
 import { FlowStore } from '~/store/flow/FlowStore';
 import { ModalStore } from '~/store/modal/ModalStore';
-import { PhotoSwipeStore } from '~/store/photoSwipe/PhotoSwipeStore';
 import { LabStore } from '~/store/lab/LabStore';
 
 export class Store {
   flow = new FlowStore();
   modal = new ModalStore();
-  photoSwipe = new PhotoSwipeStore();
   lab = new LabStore();
 
   constructor() {

src/store/modal/ModalStore.tsx

@@ -1,14 +1,22 @@
 import { makeAutoObservable } from 'mobx';
 import { Dialog } from '~/constants/modal';
+import { DialogContentProps } from '~/hooks/modal/useModal';
 
 export class ModalStore {
   current: Dialog | null = null;
+  props: object | undefined;
 
   constructor() {
     makeAutoObservable(this);
   }
 
-  setCurrent = (current: Dialog | null) => (this.current = current);
+  setCurrent = <T extends Dialog>(current: T, props: DialogContentProps[T]) => {
+    this.props = props;
+    this.current = current ?? {};
+  };
 
-  hide = () => (this.current = null);
+  hide = () => {
+    this.current = null;
+    this.props = {};
+  };
 }

src/store/photoSwipe/PhotoSwipeStore.tsx

@@ -1,16 +0,0 @@
-import { makeAutoObservable } from 'mobx';
-import { IFile } from '~/redux/types';
-
-export class PhotoSwipeStore {
-  images: IFile[] = [];
-  index: number = 0;
-
-  constructor() {
-    makeAutoObservable(this);
-  }
-
-  setData = (images: IFile[], index: number) => {
-    this.images = images;
-    this.index = index;
-  };
-}

src/store/photoSwipe/usePhotoSwipeStore.tsx

@@ -1,3 +0,0 @@
-import { useStore } from '~/utils/context/StoreContextProvider';
-
-export const usePhotoSwipeStore = () => useStore().photoSwipe;