muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

refactored node bottom block as pure component

Browse source
This commit is contained in:
Fedor Katurov 2021-11-06 21:26:42 +07:00
parent ab15a10d01
commit d4bf94059e
7 changed files with 96 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/node/NodeBottomBlock/index.tsx
View file

@ -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} />

64
src/components/node/NodeTagsBlock/index.tsx
View file

@ -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<ITag>) => void;
onTagDelete: (id: ITag['ID']) => void;
}
const NodeTagsBlock: FC<IProps> = ({ 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<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]
);
const NodeTagsBlock: FC<IProps> = ({
tags,
canAppend,
canDelete,
isLoading,
onChange,
onTagClick,
onTagDelete,
}) => {
if (isLoading) {
return null;
}
return (
<NodeTags
is_editable={is_user}
is_deletable={canEdit}
tags={node.tags}
onChange={onTagsChange}
is_editable={canAppend}
is_deletable={canDelete}
tags={tags}
onChange={onChange}
onTagClick={onTagClick}
onTagDelete={onTagDelete}
/>