fixed window callers

src/components/editors/AudioGrid/index.tsx

@@ -1,11 +1,12 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback } from 'react';
-import { SortEnd } from "react-sortable-hoc";
+import { SortEnd } from 'react-sortable-hoc';
-import { IFile } from "~/redux/types";
+import { IFile } from '~/redux/types';
-import { moveArrItem } from "~/utils/fn";
+import { moveArrItem } from '~/utils/fn';
-import { SortableAudioGrid } from "~/components/editors/SortableAudioGrid";
+import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
-import { UploadStatus } from "~/store/uploader/UploaderStore";
+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<IProps> = ({ files, setFiles, locked }) => {
+  const { innerWidth } = useWindowSize();
+
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
       setFiles(
@@ -53,7 +56,7 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
       axis="xy"
       items={files}
       locked={locked}
-      pressDelay={window.innerWidth < 768 ? 200 : 0}
+      pressDelay={innerWidth < 768 ? 200 : 0}
       helperClass={styles.helper}
     />
   );

src/components/editors/ImageGrid/index.tsx

@@ -1,10 +1,11 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback } from 'react';
-import { SortEnd } from "react-sortable-hoc";
+import { SortEnd } from 'react-sortable-hoc';
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
-import { IFile } from "~/redux/types";
+import { IFile } from '~/redux/types';
-import { moveArrItem } from "~/utils/fn";
+import { moveArrItem } from '~/utils/fn';
-import { SortableImageGrid } from "~/components/editors/SortableImageGrid";
+import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
-import { UploadStatus } from "~/store/uploader/UploaderStore";
+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<IProps> = ({ files, setFiles, locked }) => {
+  const { innerWidth } = useWindowSize();
+
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
       setFiles(
@@ -40,7 +43,7 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
       axis="xy"
       items={files}
       locked={locked}
-      pressDelay={window.innerWidth < 768 ? 200 : 0}
+      pressDelay={innerWidth < 768 ? 200 : 0}
       helperClass={styles.helper}
     />
   );

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<Props> = ({ heroes }) => {
+  const { innerWidth } = useWindowSize();
+
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(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(() => {

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

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 };
+  }, []);

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