From 82308d2a91d92f0f7502c3dbad8433348c3765ed Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 7 Jan 2022 20:37:49 +0700 Subject: [PATCH] removed PhotoSwipeStore --- src/components/main/Header/index.tsx | 7 +++- src/constants/modal/index.ts | 8 ++-- .../dialogs/LoadingDialog/index.tsx | 4 +- src/containers/dialogs/LoginDialog/index.tsx | 2 +- src/containers/dialogs/Modal/index.tsx | 17 ++++---- src/containers/dialogs/PhotoSwipe/index.tsx | 17 +++++--- .../dialogs/RestoreRequestDialog/index.tsx | 39 +++++++++---------- src/hooks/modal/useModal.ts | 19 +++++++-- src/hooks/modal/useShowModal.ts | 13 ++++--- src/hooks/navigation/useImageModal.ts | 7 +--- src/redux/auth/sagas.ts | 8 ++-- src/store/index.ts | 2 - src/store/modal/ModalStore.tsx | 12 +++++- src/store/photoSwipe/PhotoSwipeStore.tsx | 16 -------- src/store/photoSwipe/usePhotoSwipeStore.tsx | 3 -- 15 files changed, 90 insertions(+), 84 deletions(-) delete mode 100644 src/store/photoSwipe/PhotoSwipeStore.tsx delete mode 100644 src/store/photoSwipe/usePhotoSwipeStore.tsx diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 91a917c1..00e77f62 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -132,7 +132,12 @@ const HeaderUnconnected: FC = observer( )} {!is_user && ( - )} diff --git a/src/constants/modal/index.ts b/src/constants/modal/index.ts index 671d709f..f1ed0b0c 100644 --- a/src/constants/modal/index.ts +++ b/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> = { +export const DIALOG_CONTENT = { [Dialog.Login]: LoginDialog, [Dialog.LoginSocialRegister]: LoginSocialRegisterDialog, [Dialog.Loading]: LoadingDialog, @@ -29,4 +29,4 @@ export const DIALOG_CONTENT: Record> = { [Dialog.RestoreRequest]: RestoreRequestDialog, [Dialog.RestorePassword]: RestorePasswordDialog, [Dialog.Photoswipe]: PhotoSwipe, -}; +} as const; diff --git a/src/containers/dialogs/LoadingDialog/index.tsx b/src/containers/dialogs/LoadingDialog/index.tsx index 7ebea6de..d054c5fc 100644 --- a/src/containers/dialogs/LoadingDialog/index.tsx +++ b/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 = () => (
diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index d4ff0f99..b517175a 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -58,7 +58,7 @@ const LoginDialogUnconnected: FC = ({ const onRestoreRequest = useCallback( event => { event.preventDefault(); - showRestoreDialog(); + showRestoreDialog({}); }, [showRestoreDialog] ); diff --git a/src/containers/dialogs/Modal/index.tsx b/src/containers/dialogs/Modal/index.tsx index 364ab360..ecbbc50a 100644 --- a/src/containers/dialogs/Modal/index.tsx +++ b/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 = 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 = observer(() => { return ( - {React.createElement(DIALOG_CONTENT[current!]!, { + {React.createElement(DIALOG_CONTENT[current!]! as any, { onRequestClose: hide, + ...props, })} ); diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx index db1b1be4..38adb50a 100644 --- a/src/containers/dialogs/PhotoSwipe/index.tsx +++ b/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 = observer(({ index, items }) => { let ref = useRef(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); diff --git a/src/containers/dialogs/RestoreRequestDialog/index.tsx b/src/containers/dialogs/RestoreRequestDialog/index.tsx index fc35bfd7..ef5544d3 100644 --- a/src/containers/dialogs/RestoreRequestDialog/index.tsx +++ b/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 mapDispatchToProps & {}; - -const RestoreRequestDialogUnconnected: FC = ({ - restore: { error, is_loading, is_succesfull }, - authSetRestore, - onRequestClose, - authRequestRestoreCode, -}) => { +const RestoreRequestDialog: VFC = ({ onRequestClose }) => { + const dispatch = useDispatch(); + const { error, is_loading, is_succesfull } = useShallowSelect(selectAuthRestore); const [field, setField] = useState(''); + const authSetRestore = useCallback( + (restore: Partial) => 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 = ({ ); }; -const RestoreRequestDialog = connect( - mapStateToProps, - mapDispatchToProps -)(RestoreRequestDialogUnconnected); - export { RestoreRequestDialog }; diff --git a/src/hooks/modal/useModal.ts b/src/hooks/modal/useModal.ts index 128b0181..feff7179 100644 --- a/src/hooks/modal/useModal.ts +++ b/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 extends never + ? {} + : Omit + : {} + : {}; +}; export const useModal = () => { const { setCurrent, hide } = useModalStore(); const showModal = useCallback( - (dialog: Dialog) => { - setCurrent(dialog); + (dialog: T, props: DialogContentProps[T]) => { + setCurrent(dialog, props); }, [setCurrent] ); diff --git a/src/hooks/modal/useShowModal.ts b/src/hooks/modal/useShowModal.ts index e6c0f764..e3fe9770 100644 --- a/src/hooks/modal/useShowModal.ts +++ b/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 = (dialog: T) => { const modal = useModal(); - return useCallback(() => { - modal.showModal(dialog); - }, [dialog, modal]); + return useCallback( + (props: DialogContentProps[T]) => { + modal.showModal(dialog, props); + }, + [dialog, modal] + ); }; diff --git a/src/hooks/navigation/useImageModal.ts b/src/hooks/navigation/useImageModal.ts index 462d8c0c..808a4658 100644 --- a/src/hooks/navigation/useImageModal.ts +++ b/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] ); }; diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index 691fc4f2..3d2f5304 100644 --- a/src/redux/auth/sagas.ts +++ b/src/redux/auth/sagas.ts @@ -152,7 +152,7 @@ function* loadProfile({ username }: ReturnType): SagaIte } function* openProfile({ username, tab = 'profile' }: ReturnType) { - modalStore.setCurrent(Dialog.Profile); + modalStore.setCurrent(Dialog.Profile, {}); yield put(authSetProfile({ tab })); const success: Unwrap = yield call(loadProfile, authLoadProfile(username)); @@ -265,7 +265,7 @@ function* showRestoreModal({ code }: ReturnType) { 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) { 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) { // 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; } diff --git a/src/store/index.ts b/src/store/index.ts index 78924d92..6a425c4c 100644 --- a/src/store/index.ts +++ b/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() { diff --git a/src/store/modal/ModalStore.tsx b/src/store/modal/ModalStore.tsx index 33611ac6..8d52170d 100644 --- a/src/store/modal/ModalStore.tsx +++ b/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 = (current: T, props: DialogContentProps[T]) => { + this.props = props; + this.current = current ?? {}; + }; - hide = () => (this.current = null); + hide = () => { + this.current = null; + this.props = {}; + }; } diff --git a/src/store/photoSwipe/PhotoSwipeStore.tsx b/src/store/photoSwipe/PhotoSwipeStore.tsx deleted file mode 100644 index 5b80f66f..00000000 --- a/src/store/photoSwipe/PhotoSwipeStore.tsx +++ /dev/null @@ -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; - }; -} diff --git a/src/store/photoSwipe/usePhotoSwipeStore.tsx b/src/store/photoSwipe/usePhotoSwipeStore.tsx deleted file mode 100644 index e271dbdc..00000000 --- a/src/store/photoSwipe/usePhotoSwipeStore.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { useStore } from '~/utils/context/StoreContextProvider'; - -export const usePhotoSwipeStore = () => useStore().photoSwipe;