refactored node bottom block as pure component

src/components/node/NodeBottomBlock/index.tsx

@@ -6,7 +6,7 @@ import { NodeCommentsBlock } from '~/components/node/NodeCommentsBlock';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
-import { IComment, IFile, INode } from '~/redux/types';
+import { IComment, IFile, INode, ITag } from '~/redux/types';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import { INodeRelated } from '~/redux/node/types';
 import StickyBox from 'react-sticky-box/dist/esnext';
@@ -29,6 +29,9 @@ interface IProps {
   onShowImageModal: (images: IFile[], index: number) => void;
   onLoadMoreComments: () => void;
   onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
+  onTagsChange: (tags: string[]) => void;
+  onTagClick: (tag: Partial<ITag>) => void;
+  onTagDelete: (id: ITag['ID']) => void;
 }
 
 const NodeBottomBlock: FC<IProps> = ({
@@ -46,6 +49,9 @@ const NodeBottomBlock: FC<IProps> = ({
   onLoadMoreComments,
   onDeleteComment,
   onShowImageModal,
+  onTagsChange,
+  onTagClick,
+  onTagDelete,
 }) => {
   const { inline } = useNodeBlocks(node, isLoading);
 
@@ -84,7 +90,15 @@ const NodeBottomBlock: FC<IProps> = ({
                   <NodeAuthorBlock user={node?.user} />
                 </div>
                 <div className={styles.left_item}>
-                  <NodeTagsBlock node={node} canEdit={canEdit} isLoading={isLoading} />
+                  <NodeTagsBlock
+                    tags={node.tags}
+                    canDelete={canEdit}
+                    canAppend={isUser}
+                    isLoading={isLoading}
+                    onChange={onTagsChange}
+                    onTagClick={onTagClick}
+                    onTagDelete={onTagDelete}
+                  />
                 </div>
                 <div className={styles.left_item}>
                   <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />

src/components/node/NodeTagsBlock/index.tsx

@@ -1,58 +1,36 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC } from 'react';
-import { INode, ITag } from '~/redux/types';
+import { ITag } from '~/redux/types';
-import { URLS } from '~/constants/urls';
-import { nodeDeleteTag, nodeUpdateTags } from '~/redux/node/actions';
-import { useDispatch } from 'react-redux';
-import { useHistory } from 'react-router';
 import { NodeTags } from '~/components/node/NodeTags';
-import { useUser } from '~/utils/hooks/user/userUser';
 
 interface IProps {
-  node: INode;
+  tags: ITag[];
-  canEdit: boolean;
+  canAppend: boolean;
+  canDelete: boolean;
   isLoading: boolean;
+  onChange: (tags: string[]) => void;
+  onTagClick: (tag: Partial<ITag>) => void;
+  onTagDelete: (id: ITag['ID']) => void;
 }
 
-const NodeTagsBlock: FC<IProps> = ({ node, canEdit, isLoading }) => {
+const NodeTagsBlock: FC<IProps> = ({
-  const dispatch = useDispatch();
+  tags,
-  const history = useHistory();
+  canAppend,
-  const { is_user } = useUser();
+  canDelete,
-
+  isLoading,
-  const onTagsChange = useCallback(
+  onChange,
-    (tags: string[]) => {
+  onTagClick,
-      dispatch(nodeUpdateTags(node.id, tags));
+  onTagDelete,
-    },
+}) => {
-    [dispatch, node]
-  );
-
-  const onTagClick = useCallback(
-    (tag: Partial<ITag>) => {
-      if (!node?.id || !tag?.title) {
-        return;
-      }
-
-      history.push(URLS.NODE_TAG_URL(node.id, encodeURIComponent(tag.title)));
-    },
-    [history, node]
-  );
-
-  const onTagDelete = useCallback(
-    (tagId: ITag['ID']) => {
-      dispatch(nodeDeleteTag(node.id, tagId));
-    },
-    [dispatch, node.id]
-  );
-
   if (isLoading) {
     return null;
   }
 
   return (
     <NodeTags
-      is_editable={is_user}
+      is_editable={canAppend}
-      is_deletable={canEdit}
+      is_deletable={canDelete}
-      tags={node.tags}
+      tags={tags}
-      onChange={onTagsChange}
+      onChange={onChange}
       onTagClick={onTagClick}
       onTagDelete={onTagDelete}
     />

src/layouts/BorisLayout/index.tsx

@@ -65,7 +65,7 @@ const BorisLayout: FC<IProps> = () => {
   );
 
   const onShowImageModal = useImageModal();
-  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments('696');
+  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(696);
 
   return (
     <Container>

src/layouts/NodeLayout/index.tsx

@@ -13,7 +13,7 @@ import { useNodeCoverImage } from '~/utils/hooks/node/useNodeCoverImage';
 import { URLS } from '~/constants/urls';
 import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
-import { IComment, IFile, INode } from '~/redux/types';
+import { IComment, IFile, INode, ITag } from '~/redux/types';
 import { INodeRelated } from '~/redux/node/types';
 
 import styles from './styles.module.scss';
@@ -32,6 +32,9 @@ type IProps = {
   onShowImageModal: (images: IFile[], index: number) => void;
   onLoadMoreComments: () => void;
   onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
+  onTagsChange: (tags: string[]) => void;
+  onTagClick: (tag: Partial<ITag>) => void;
+  onTagDelete: (id: ITag['ID']) => void;
 };
 
 const NodeLayout: FC<IProps> = ({
@@ -47,6 +50,9 @@ const NodeLayout: FC<IProps> = ({
   onLoadMoreComments,
   onDeleteComment,
   onShowImageModal,
+  onTagsChange,
+  onTagClick,
+  onTagDelete,
 }) => {
   useNodeCoverImage(node);
 
@@ -80,6 +86,9 @@ const NodeLayout: FC<IProps> = ({
             onShowImageModal={onShowImageModal}
             onLoadMoreComments={onLoadMoreComments}
             onDeleteComment={onDeleteComment}
+            onTagsChange={onTagsChange}
+            onTagClick={onTagClick}
+            onTagDelete={onTagDelete}
           />
 
           <Footer />

src/pages/node/[id].tsx

@@ -6,6 +6,7 @@ import { useFullNode } from '~/utils/hooks/node/useFullNode';
 import { useImageModal } from '~/utils/hooks/useImageModal';
 import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
 import { useUser } from '~/utils/hooks/user/userUser';
+import { useNodeTags } from '~/utils/hooks/node/useNodeTags';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
@@ -25,7 +26,10 @@ const NodePage: FC<Props> = ({
   } = useFullNode(id);
 
   const onShowImageModal = useImageModal();
-  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(id);
+  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(parseInt(id, 10));
+  const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
+    parseInt(id, 10)
+  );
   const user = useUser();
   useScrollToTop([id, isLoadingComments]);
 
@@ -43,6 +47,9 @@ const NodePage: FC<Props> = ({
       onShowImageModal={onShowImageModal}
       onLoadMoreComments={onLoadMoreComments}
       onDeleteComment={onDeleteComment}
+      onTagDelete={onTagDelete}
+      onTagClick={onTagClick}
+      onTagsChange={onTagsChange}
     />
   );
 };

src/utils/hooks/node/useNodeComments.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import { nodeLoadMoreComments, nodeLockComment } from '~/redux/node/actions';
-import { IComment } from '~/redux/types';
+import { IComment, INode } from '~/redux/types';
 import { useDispatch } from 'react-redux';
 
-export const useNodeComments = (id: string) => {
+export const useNodeComments = (id: INode['id']) => {
   const dispatch = useDispatch();
 
   const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);

src/utils/hooks/node/useNodeTags.ts

@@ -0,0 +1,38 @@
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router';
+import { useCallback } from 'react';
+import { nodeDeleteTag, nodeUpdateTags } from '~/redux/node/actions';
+import { INode, ITag } from '~/redux/types';
+import { URLS } from '~/constants/urls';
+
+export const useNodeTags = (id: INode['id']) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const onChange = useCallback(
+    (tags: string[]) => {
+      dispatch(nodeUpdateTags(id, tags));
+    },
+    [dispatch, id]
+  );
+
+  const onClick = useCallback(
+    (tag: Partial<ITag>) => {
+      if (!id || !tag?.title) {
+        return;
+      }
+
+      history.push(URLS.NODE_TAG_URL(id, encodeURIComponent(tag.title)));
+    },
+    [history, id]
+  );
+
+  const onDelete = useCallback(
+    (tagId: ITag['ID']) => {
+      dispatch(nodeDeleteTag(id, tagId));
+    },
+    [dispatch, id]
+  );
+
+  return { onDelete, onChange, onClick };
+};