#35 added photoswipe handler

package.json

@@ -7,7 +7,6 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@types/swiper": "^5.4.2",
     "autosize": "^4.0.2",
     "axios": "^0.21.1",
     "body-scroll-lock": "^2.6.4",
@@ -73,6 +72,7 @@
     "@types/ramda": "^0.26.33",
     "@types/react-redux": "^7.1.11",
     "@types/yup": "^0.29.11",
+    "@types/swiper": "^5.4.2",
     "craco-alias": "^2.1.1",
     "craco-fast-refresh": "^1.0.2",
     "prettier": "^1.18.2"

src/components/containers/Sticky/index.tsx

@@ -11,22 +11,22 @@ interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {}
 
 const Sticky: FC<IProps> = ({ children }) => {
   const ref = useRef(null);
-  let sb;
+  const sb = useRef<StickySidebar>(null);
 
   useEffect(() => {
     if (!ref.current) return;
 
-    sb = new StickySidebar(ref.current, {
+    sb.current = new StickySidebar(ref.current, {
       resizeSensor: true,
       topSpacing: 72,
       bottomSpacing: 10,
     });
 
-    return () => sb.destroy();
+    return () => sb.current?.destroy();
-  }, [ref.current, children]);
+  }, [ref.current, sb.current, children]);
 
   if (sb) {
-    sb.updateSticky();
+    sb.current?.updateSticky();
   }
 
   return (

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -2,8 +2,8 @@ import React, { FC, useCallback, useEffect, useState } from 'react';
 import { INodeComponentProps } from '~/redux/node/constants';
 import SwiperCore, { A11y, Pagination, SwiperOptions } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
+
 import 'swiper/swiper.scss';
-import 'swiper/components/navigation/navigation.scss';
 import 'swiper/components/pagination/pagination.scss';
 import 'swiper/components/scrollbar/scrollbar.scss';
 
@@ -12,6 +12,8 @@ import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import SwiperClass from 'swiper/types/swiper-class';
+import { modalShowPhotoswipe } from '~/redux/modal/actions';
+import { useDispatch } from 'react-redux';
 
 SwiperCore.use([Pagination, A11y]);
 
@@ -24,6 +26,7 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 };
 
 const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
+  const dispatch = useDispatch();
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
 
   const images = useNodeImages(node);
@@ -38,7 +41,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
 
   const resetSwiper = useCallback(() => {
     if (!controlledSwiper) return;
-    controlledSwiper.slideTo(0);
+    controlledSwiper.slideTo(0, 0);
   }, [controlledSwiper]);
 
   useEffect(() => {
@@ -46,6 +49,11 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
     resetSwiper();
   }, [images, updateSwiper, resetSwiper]);
 
+  const onOpenPhotoSwipe = useCallback(
+    () => dispatch(modalShowPhotoswipe(images, controlledSwiper?.activeIndex || 0)),
+    [dispatch, images, controlledSwiper]
+  );
+
   if (!images?.length) {
     return null;
   }
@@ -53,6 +61,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
   return (
     <div className={styles.wrapper}>
       <Swiper
+        initialSlide={0}
         slidesPerView="auto"
         centeredSlides
         onSwiper={setControlledSwiper}
@@ -64,6 +73,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
         observeParents
         resizeObserver
         watchOverflow
+        onInit={resetSwiper}
       >
         {images.map(file => (
           <SwiperSlide className={styles.slide} key={file.id}>
@@ -72,6 +82,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
               src={getURL(file, PRESETS['1600'])}
               alt={node.title}
               onLoad={updateSwiper}
+              onClick={onOpenPhotoSwipe}
             />
           </SwiperSlide>
         ))}

src/utils/hooks/node/useNodeBlocks.ts

@@ -1,7 +1,12 @@
 import { INode } from '~/redux/types';
 import { createElement, FC, useCallback, useMemo } from 'react';
 import { isNil, prop } from 'ramda';
-import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/redux/node/constants';
+import {
+  INodeComponentProps,
+  NODE_COMPONENTS,
+  NODE_HEADS,
+  NODE_INLINES,
+} from '~/redux/node/constants';
 
 // useNodeBlocks returns head, block and inline blocks of node
 export const useNodeBlocks = (node: INode, isLoading: boolean) => {