Merge pull request #65 from muerwre/task/#62

fixed scroll bugs on photoswipe open

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, useEffect, useMemo, useCallback } from 'react';
+import React, { FC, useCallback, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 
 import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
@@ -12,6 +12,7 @@ import { PRESETS } from '~/constants/urls';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { useBlockBackButton } from '~/utils/hooks/useBlockBackButton';
 
 const mapStateToProps = (state: IState) => ({
   photoswipe: selectModal(state).photoswipe,
@@ -67,21 +68,7 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
     });
   }, [photoswipe.images, photoswipe.index]);
 
-  const closeOnHashChange = useCallback(() => {
+  useBlockBackButton(closeModal);
-    if (window.location.hash !== '#preview') return closeModal();
-  }, [closeModal]);
-
-  useEffect(() => {
-    window.addEventListener('hashchange', closeOnHashChange);
-    return () => window.removeEventListener('hashchange', closeOnHashChange);
-  }, [closeOnHashChange]);
-
-  useEffect(() => {
-    window.location.hash = 'preview';
-    return () => {
-      window.location.hash = '';
-    };
-  }, []);
 
   return (
     <div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>

src/utils/hooks/useBlockBackButton.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { history } from '~/redux/store';
+
+/**
+ * useBlockBackButton - blocks back navigation and calls {callback}
+ * @param callback
+ */
+export const useBlockBackButton = (callback?: () => void) => {
+  useEffect(
+    () =>
+      history.listen((newLocation, action) => {
+        if (action !== 'POP') {
+          return;
+        }
+
+        history.goForward();
+
+        if (callback) {
+          callback();
+        }
+      }),
+    [callback, history]
+  );
+};