fixed lab node click handlers with hooks

src/components/lab/LabDescription/index.tsx

@@ -3,8 +3,11 @@ import { INodeComponentProps } from '~/redux/node/constants';
 import styles from './styles.module.scss';
 import { Markdown } from '~/components/containers/Markdown';
 import { formatText } from '~/utils/dom';
+import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 
 const LabDescription: FC<INodeComponentProps> = ({ node }) => {
+  const onClick = useGotoNode(node.id);
+
   if (!node.description) {
     return null;
   }
@@ -13,6 +16,7 @@ const LabDescription: FC<INodeComponentProps> = ({ node }) => {
     <Markdown
       className={styles.wrap}
       dangerouslySetInnerHTML={{ __html: formatText(node.description) }}
+      onClick={onClick}
     />
   );
 };

src/components/lab/LabImage/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { INodeComponentProps } from '~/redux/node/constants';
-import SwiperCore, { A11y, Pagination, Navigation, SwiperOptions, Keyboard } from 'swiper';
+import SwiperCore, { A11y, Navigation, Pagination, SwiperOptions } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/swiper.scss';
@@ -14,9 +14,8 @@ import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
 import { PRESETS, URLS } from '~/constants/urls';
 import SwiperClass from 'swiper/types/swiper-class';
-import { modalShowPhotoswipe } from '~/redux/modal/actions';
-import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
+import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 
 SwiperCore.use([Navigation, Pagination, A11y]);
 
@@ -30,8 +29,6 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 };
 
 const LabImage: FC<IProps> = ({ node }) => {
-  const history = useHistory();
-
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
 
   const images = useNodeImages(node);
@@ -54,7 +51,7 @@ const LabImage: FC<IProps> = ({ node }) => {
     resetSwiper();
   }, [images, updateSwiper, resetSwiper]);
 
-  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [history, node.id]);
+  const onClick = useGotoNode(node.id);
 
   if (!images?.length) {
     return null;

src/components/lab/LabNodeTitle/index.tsx

@@ -1,24 +1,23 @@
 import React, { FC } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
-import { URLS } from '~/constants/urls';
-import { Link } from 'react-router-dom';
 import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import Tippy from '@tippy.js/react';
+import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 
 interface IProps {
   node: INode;
 }
 
 const LabNodeTitle: FC<IProps> = ({ node }) => {
+  const onClick = useGotoNode(node.id);
+
   if (!node.title) return null;
 
   return (
-    <Group horizontal className={styles.wrap}>
+    <Group horizontal className={styles.wrap} onClick={onClick}>
-      <div className={styles.title}>
+      <div className={styles.title}>{node.title || '...'}</div>
-        <Link to={URLS.NODE_URL(node.id)}>{node.title || '...'}</Link>
-      </div>
 
       {node.is_heroic && (
         <Tippy content="Важный пост">

src/components/lab/LabPad/index.tsx

@@ -3,11 +3,10 @@ import styles from './styles.module.scss';
 import { useHistory } from 'react-router';
 import { URLS } from '~/constants/urls';
 import { INodeComponentProps } from '~/redux/node/constants';
+import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 
 const LabPad: FC<INodeComponentProps> = ({ node }) => {
-  const history = useHistory();
+  const onClick = useGotoNode(node.id);
-  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
-
   return <div className={styles.pad} onClick={onClick} />;
 };
 

src/components/lab/LabText/index.tsx

@@ -6,15 +6,14 @@ import { path } from 'ramda';
 import styles from './styles.module.scss';
 import { useHistory } from 'react-router';
 import { URLS } from '~/constants/urls';
+import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 
 const LabText: FC<INodeComponentProps> = ({ node }) => {
   const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
     node.blocks,
   ]);
 
-  const history = useHistory();
+  const onClick = useGotoNode(node.id);
-
-  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
 
   return (
     <Markdown

src/utils/hooks/node/useGotoNode.ts

@@ -0,0 +1,10 @@
+import { INode } from '~/redux/types';
+import { useHistory } from 'react-router';
+import { useCallback } from 'react';
+import { URLS } from '~/constants/urls';
+
+// useGotoNode returns fn, that navigates to node
+export const useGotoNode = (id: INode['id']) => {
+  const history = useHistory();
+  return useCallback(() => history.push(URLS.NODE_URL(id)), [id]);
+};