From d865067eaf9c369c15cba3143f750804f3cad771 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 31 Mar 2021 14:43:01 +0700
Subject: [PATCH] fixed lab node click handlers with hooks

---
 src/components/lab/LabDescription/index.tsx |  4 ++++
 src/components/lab/LabImage/index.tsx       |  9 +++------
 src/components/lab/LabNodeTitle/index.tsx   | 11 +++++------
 src/components/lab/LabPad/index.tsx         |  5 ++---
 src/components/lab/LabText/index.tsx        |  5 ++---
 src/utils/hooks/node/useGotoNode.ts         | 10 ++++++++++
 6 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/hooks/node/useGotoNode.ts

diff --git a/src/components/lab/LabDescription/index.tsx b/src/components/lab/LabDescription/index.tsx
index 13f0f1cb..3883eeba 100644
--- a/src/components/lab/LabDescription/index.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx
index 18d4e5d5..29e11c0e 100644
--- a/src/components/lab/LabImage/index.tsx
+++ b/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;
diff --git a/src/components/lab/LabNodeTitle/index.tsx b/src/components/lab/LabNodeTitle/index.tsx
index 2283b11b..7ac09c5e 100644
--- a/src/components/lab/LabNodeTitle/index.tsx
+++ b/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}>
-      <div className={styles.title}>
-        <Link to={URLS.NODE_URL(node.id)}>{node.title || '...'}</Link>
-      </div>
+    <Group horizontal className={styles.wrap} onClick={onClick}>
+      <div className={styles.title}>{node.title || '...'}</div>
 
       {node.is_heroic && (
         <Tippy content="Важный пост">
diff --git a/src/components/lab/LabPad/index.tsx b/src/components/lab/LabPad/index.tsx
index 5d853a39..45edccc4 100644
--- a/src/components/lab/LabPad/index.tsx
+++ b/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 = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
-
+  const onClick = useGotoNode(node.id);
   return <div className={styles.pad} onClick={onClick} />;
 };
 
diff --git a/src/components/lab/LabText/index.tsx b/src/components/lab/LabText/index.tsx
index ec388b13..e9239f82 100644
--- a/src/components/lab/LabText/index.tsx
+++ b/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 = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
+  const onClick = useGotoNode(node.id);
 
   return (
     <Markdown
diff --git a/src/utils/hooks/node/useGotoNode.ts b/src/utils/hooks/node/useGotoNode.ts
new file mode 100644
index 00000000..bee8e7c2
--- /dev/null
+++ b/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]);
+};