diff --git a/src/components/node/NodeBottomBlock/index.tsx b/src/components/node/NodeBottomBlock/index.tsx index 28087c8f..f084a92a 100644 --- a/src/components/node/NodeBottomBlock/index.tsx +++ b/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) => void; + onTagDelete: (id: ITag['ID']) => void; } const NodeBottomBlock: FC = ({ @@ -46,6 +49,9 @@ const NodeBottomBlock: FC = ({ onLoadMoreComments, onDeleteComment, onShowImageModal, + onTagsChange, + onTagClick, + onTagDelete, }) => { const { inline } = useNodeBlocks(node, isLoading); @@ -84,7 +90,15 @@ const NodeBottomBlock: FC = ({
- +
diff --git a/src/components/node/NodeTagsBlock/index.tsx b/src/components/node/NodeTagsBlock/index.tsx index ef74d7cc..9609b430 100644 --- a/src/components/node/NodeTagsBlock/index.tsx +++ b/src/components/node/NodeTagsBlock/index.tsx @@ -1,58 +1,36 @@ -import React, { FC, useCallback } from 'react'; -import { INode, 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 React, { FC } from 'react'; +import { ITag } from '~/redux/types'; import { NodeTags } from '~/components/node/NodeTags'; -import { useUser } from '~/utils/hooks/user/userUser'; interface IProps { - node: INode; - canEdit: boolean; + tags: ITag[]; + canAppend: boolean; + canDelete: boolean; isLoading: boolean; + onChange: (tags: string[]) => void; + onTagClick: (tag: Partial) => void; + onTagDelete: (id: ITag['ID']) => void; } -const NodeTagsBlock: FC = ({ node, canEdit, isLoading }) => { - const dispatch = useDispatch(); - const history = useHistory(); - const { is_user } = useUser(); - - const onTagsChange = useCallback( - (tags: string[]) => { - dispatch(nodeUpdateTags(node.id, tags)); - }, - [dispatch, node] - ); - - const onTagClick = useCallback( - (tag: Partial) => { - 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] - ); - +const NodeTagsBlock: FC = ({ + tags, + canAppend, + canDelete, + isLoading, + onChange, + onTagClick, + onTagDelete, +}) => { if (isLoading) { return null; } return ( diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx index 1461c513..12e8e646 100644 --- a/src/layouts/BorisLayout/index.tsx +++ b/src/layouts/BorisLayout/index.tsx @@ -65,7 +65,7 @@ const BorisLayout: FC = () => { ); const onShowImageModal = useImageModal(); - const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments('696'); + const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(696); return ( diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx index 5c0514ae..576f40ce 100644 --- a/src/layouts/NodeLayout/index.tsx +++ b/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) => void; + onTagDelete: (id: ITag['ID']) => void; }; const NodeLayout: FC = ({ @@ -47,6 +50,9 @@ const NodeLayout: FC = ({ onLoadMoreComments, onDeleteComment, onShowImageModal, + onTagsChange, + onTagClick, + onTagDelete, }) => { useNodeCoverImage(node); @@ -80,6 +86,9 @@ const NodeLayout: FC = ({ onShowImageModal={onShowImageModal} onLoadMoreComments={onLoadMoreComments} onDeleteComment={onDeleteComment} + onTagsChange={onTagsChange} + onTagClick={onTagClick} + onTagDelete={onTagDelete} />