From 224c27b6f4cff49c47ccac334963dbe5e10fdc19 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 7 Jan 2022 19:16:42 +0700 Subject: [PATCH] fixed window callers --- src/components/editors/AudioGrid/index.tsx | 19 +++++++++++-------- src/components/editors/ImageGrid/index.tsx | 19 +++++++++++-------- src/components/flow/FlowSwiperHero/index.tsx | 7 ++++++- src/constants/dom/index.ts | 8 +++++++- src/hooks/dom/useWindowSize.ts | 10 ++++++++++ src/redux/store.ts | 18 ++++++++++-------- 6 files changed, 55 insertions(+), 26 deletions(-) create mode 100644 src/hooks/dom/useWindowSize.ts diff --git a/src/components/editors/AudioGrid/index.tsx b/src/components/editors/AudioGrid/index.tsx index 06386dbe..6403e89a 100644 --- a/src/components/editors/AudioGrid/index.tsx +++ b/src/components/editors/AudioGrid/index.tsx @@ -1,11 +1,12 @@ -import React, { FC, useCallback } from "react"; -import { SortEnd } from "react-sortable-hoc"; -import { IFile } from "~/redux/types"; -import { moveArrItem } from "~/utils/fn"; -import { SortableAudioGrid } from "~/components/editors/SortableAudioGrid"; +import React, { FC, useCallback } from 'react'; +import { SortEnd } from 'react-sortable-hoc'; +import { IFile } from '~/redux/types'; +import { moveArrItem } from '~/utils/fn'; +import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid'; -import styles from "./styles.module.scss"; -import { UploadStatus } from "~/store/uploader/UploaderStore"; +import styles from './styles.module.scss'; +import { UploadStatus } from '~/store/uploader/UploaderStore'; +import { useWindowSize } from '~/hooks/dom/useWindowSize'; interface IProps { files: IFile[]; @@ -14,6 +15,8 @@ interface IProps { } const AudioGrid: FC = ({ files, setFiles, locked }) => { + const { innerWidth } = useWindowSize(); + const onMove = useCallback( ({ oldIndex, newIndex }: SortEnd) => { setFiles( @@ -53,7 +56,7 @@ const AudioGrid: FC = ({ files, setFiles, locked }) => { axis="xy" items={files} locked={locked} - pressDelay={window.innerWidth < 768 ? 200 : 0} + pressDelay={innerWidth < 768 ? 200 : 0} helperClass={styles.helper} /> ); diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx index c32ebf56..b1237574 100644 --- a/src/components/editors/ImageGrid/index.tsx +++ b/src/components/editors/ImageGrid/index.tsx @@ -1,10 +1,11 @@ -import React, { FC, useCallback } from "react"; -import { SortEnd } from "react-sortable-hoc"; -import styles from "./styles.module.scss"; -import { IFile } from "~/redux/types"; -import { moveArrItem } from "~/utils/fn"; -import { SortableImageGrid } from "~/components/editors/SortableImageGrid"; -import { UploadStatus } from "~/store/uploader/UploaderStore"; +import React, { FC, useCallback } from 'react'; +import { SortEnd } from 'react-sortable-hoc'; +import styles from './styles.module.scss'; +import { IFile } from '~/redux/types'; +import { moveArrItem } from '~/utils/fn'; +import { SortableImageGrid } from '~/components/editors/SortableImageGrid'; +import { UploadStatus } from '~/store/uploader/UploaderStore'; +import { useWindowSize } from '~/hooks/dom/useWindowSize'; interface IProps { files: IFile[]; @@ -13,6 +14,8 @@ interface IProps { } const ImageGrid: FC = ({ files, setFiles, locked }) => { + const { innerWidth } = useWindowSize(); + const onMove = useCallback( ({ oldIndex, newIndex }: SortEnd) => { setFiles( @@ -40,7 +43,7 @@ const ImageGrid: FC = ({ files, setFiles, locked }) => { axis="xy" items={files} locked={locked} - pressDelay={window.innerWidth < 768 ? 200 : 0} + pressDelay={innerWidth < 768 ? 200 : 0} helperClass={styles.helper} /> ); diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 97d62e6a..c6cde0b5 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -11,6 +11,7 @@ import { LoaderCircle } from '~/components/input/LoaderCircle'; import { useHistory } from 'react-router'; import classNames from 'classnames'; import { IFlowNode } from '~/redux/types'; +import { useWindowSize } from '~/hooks/dom/useWindowSize'; SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]); @@ -19,9 +20,13 @@ interface Props { } export const FlowSwiperHero: FC = ({ heroes }) => { + const { innerWidth } = useWindowSize(); + const [controlledSwiper, setControlledSwiper] = useState(undefined); const [currentIndex, setCurrentIndex] = useState(heroes.length); - const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []); + const preset = useMemo(() => (innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), [ + innerWidth, + ]); const history = useHistory(); const onNext = useCallback(() => { diff --git a/src/constants/dom/index.ts b/src/constants/dom/index.ts index 7e58eff9..be18c3a4 100644 --- a/src/constants/dom/index.ts +++ b/src/constants/dom/index.ts @@ -1 +1,7 @@ -export const isTablet = () => window.innerWidth < 599; +export const isTablet = () => { + if (typeof window === 'undefined') { + return false; + } + + return window.innerWidth < 599; +}; diff --git a/src/hooks/dom/useWindowSize.ts b/src/hooks/dom/useWindowSize.ts new file mode 100644 index 00000000..315c2a47 --- /dev/null +++ b/src/hooks/dom/useWindowSize.ts @@ -0,0 +1,10 @@ +import { useMemo } from 'react'; + +export const useWindowSize = () => + useMemo(() => { + if (typeof window === 'undefined') { + return { innerWidth: 0, innerHeight: 0 }; + } + + return { innerWidth: window.innerWidth, innerHeight: window.innerHeight }; + }, []); diff --git a/src/redux/store.ts b/src/redux/store.ts index a3871948..cf2d51fc 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -64,14 +64,6 @@ export function configureStore(): { sagaMiddleware.run(authSaga); sagaMiddleware.run(messagesSaga); - window.addEventListener('message', message => { - if (message && message.data && message.data.type === 'oauth_login' && message.data.token) - return store.dispatch(gotAuthPostMessage({ token: message.data.token })); - - if (message && message.data && message.data.type === 'username' && message.data.username) - return store.dispatch(authOpenProfile(message.data.username)); - }); - const persistor = persistStore(store); // Pass token to axios @@ -96,5 +88,15 @@ export function configureStore(): { throw error; }); + if (typeof window !== 'undefined') { + window.addEventListener('message', message => { + if (message && message.data && message.data.type === 'oauth_login' && message.data.token) + return store.dispatch(gotAuthPostMessage({ token: message.data.token })); + + if (message && message.data && message.data.type === 'username' && message.data.username) + return store.dispatch(authOpenProfile(message.data.username)); + }); + } + return { store, persistor }; }