From bb785ea45977c1467c6ba4d49f8cb7d1fd8c3502 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 21 Jan 2022 17:46:50 +0700
Subject: [PATCH] fixed tag button on node related

---
 src/components/common/Pressable/index.tsx       | 17 +++++++++++++++++
 .../common/Pressable/styles.module.scss         | 10 ++++++++++
 src/components/node/NodeRelatedBlock/index.tsx  | 14 ++++++++------
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 src/components/common/Pressable/index.tsx
 create mode 100644 src/components/common/Pressable/styles.module.scss

diff --git a/src/components/common/Pressable/index.tsx b/src/components/common/Pressable/index.tsx
new file mode 100644
index 00000000..86778068
--- /dev/null
+++ b/src/components/common/Pressable/index.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { ButtonProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface PressableProps extends ButtonProps {}
+
+const Pressable: FC<PressableProps> = ({ children, ...rest }) => (
+  <button {...rest} className={classNames(styles.pressable, rest.className)}>
+    {children}
+  </button>
+);
+
+export { Pressable };
diff --git a/src/components/common/Pressable/styles.module.scss b/src/components/common/Pressable/styles.module.scss
new file mode 100644
index 00000000..c36849cf
--- /dev/null
+++ b/src/components/common/Pressable/styles.module.scss
@@ -0,0 +1,10 @@
+.pressable {
+  color: inherit;
+  border: none;
+  font: inherit;
+  padding: 0;
+  margin: 0;
+  text-transform: inherit;
+  cursor: pointer;
+  display: inline-flex;
+}
diff --git a/src/components/node/NodeRelatedBlock/index.tsx b/src/components/node/NodeRelatedBlock/index.tsx
index 42a239df..a40e6682 100644
--- a/src/components/node/NodeRelatedBlock/index.tsx
+++ b/src/components/node/NodeRelatedBlock/index.tsx
@@ -1,9 +1,13 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { Anchor } from '~/components/common/Anchor';
+import { Pressable } from '~/components/common/Pressable';
+import { SubTitle } from '~/components/common/SubTitle';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
+import { Dialog } from '~/constants/modal';
 import { URLS } from '~/constants/urls';
+import { useShowModal } from '~/hooks/modal/useShowModal';
 import { INode } from '~/types';
 import { INodeRelated } from '~/types/node';
 
@@ -14,6 +18,8 @@ interface IProps {
 }
 
 const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
+  const goToTag = useShowModal(Dialog.TagSidebar);
+
   if (isLoading) {
     return <NodeRelatedPlaceholder />;
   }
@@ -27,11 +33,7 @@ const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
           .filter(album => related.albums[album].length > 0)
           .map(album => (
             <NodeRelated
-              title={
-                <Anchor href={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
-                  {album}
-                </Anchor>
-              }
+              title={<Pressable onClick={() => goToTag({ tag: album })}>{album}</Pressable>}
               items={related.albums[album]}
               key={album}
             />