diff --git a/src/components/node/NodeRelatedBlock/index.tsx b/src/components/node/NodeRelatedBlock/index.tsx index b9653b5c..39ee5572 100644 --- a/src/components/node/NodeRelatedBlock/index.tsx +++ b/src/components/node/NodeRelatedBlock/index.tsx @@ -1,12 +1,14 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback } from 'react'; import { Pressable } from '~/components/common/Pressable'; import { NodeRelated } from '~/components/node/NodeRelated'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; import { Dialog } from '~/constants/modal'; import { useShowModal } from '~/hooks/modal/useShowModal'; -import { INode } from '~/types'; +import { useTagSidebar } from '~/hooks/sidebar/useTagSidebar'; +import { INode, ITag } from '~/types'; import { INodeRelated } from '~/types/node'; +import { useSidebar } from '~/utils/providers/SidebarProvider'; interface IProps { isLoading: boolean; @@ -15,7 +17,7 @@ interface IProps { } const NodeRelatedBlock: FC = ({ isLoading, node, related }) => { - const goToTag = useShowModal(Dialog.TagSidebar); + const goToTag = useTagSidebar(); if (isLoading) { return ; @@ -27,10 +29,12 @@ const NodeRelatedBlock: FC = ({ isLoading, node, related }) => { related.albums && !!node?.id && Object.keys(related.albums) - .filter(album => related.albums[album].length > 0) - .map(album => ( + .filter((album) => related.albums[album].length > 0) + .map((album) => ( goToTag({ tag: album })}>{album}} + title={ + goToTag(album)}>{album} + } items={related.albums[album]} key={album} /> diff --git a/src/components/sidebar/SidebarStackCard/index.tsx b/src/components/sidebar/SidebarStackCard/index.tsx index 0eb417e8..8e93257f 100644 --- a/src/components/sidebar/SidebarStackCard/index.tsx +++ b/src/components/sidebar/SidebarStackCard/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useMemo } from 'react'; +import React, { FC, ReactNode, useMemo } from 'react'; import { Filler } from '~/components/containers/Filler'; import { Button } from '~/components/input/Button'; @@ -8,7 +8,7 @@ import styles from './styles.module.scss'; interface SidebarStackCardProps { width?: number; headerFeature?: 'back' | 'close'; - title?: string; + title?: ReactNode; onBackPress?: () => void; } @@ -26,7 +26,9 @@ const SidebarStackCard: FC = ({
{!!(headerFeature || title) && (
- {!!title &&
{title}
}
+ + {typeof title === 'string' ?
{title}
: title} +
{!!(headerFeature && onBackPress) && ( -
- - {!nodes.length && !isLoading ? ( -
- -
- У этого тэга нет постов -
-
- Такие дела -
-
- ) : ( - - - - )} - + ); diff --git a/src/hooks/node/useNodeTags.ts b/src/hooks/node/useNodeTags.ts index f2e69d8d..abbb2744 100644 --- a/src/hooks/node/useNodeTags.ts +++ b/src/hooks/node/useNodeTags.ts @@ -1,14 +1,14 @@ import { useCallback } from 'react'; import { apiDeleteNodeTag, apiPostNodeTags } from '~/api/node'; -import { Dialog } from '~/constants/modal'; -import { useShowModal } from '~/hooks/modal/useShowModal'; import { useGetNodeRelated } from '~/hooks/node/useGetNodeRelated'; import { useLoadNode } from '~/hooks/node/useLoadNode'; import { ITag } from '~/types'; +import { useTagSidebar } from '../sidebar/useTagSidebar'; + export const useNodeTags = (id: number) => { - const showModal = useShowModal(Dialog.TagSidebar); + const openTagSidebar = useTagSidebar(); const { refresh: refreshRelated } = useGetNodeRelated(id); const { update } = useLoadNode(id); @@ -22,7 +22,7 @@ export const useNodeTags = (id: number) => { console.warn(error); } }, - [id, update, refreshRelated] + [id, update, refreshRelated], ); const onClick = useCallback( @@ -31,9 +31,9 @@ export const useNodeTags = (id: number) => { return; } - showModal({ tag: tag.title }); + openTagSidebar(tag.title); }, - [showModal, id] + [openTagSidebar, id], ); const onDelete = useCallback( @@ -46,7 +46,7 @@ export const useNodeTags = (id: number) => { console.warn(e); } }, - [id, update, refreshRelated] + [id, update, refreshRelated], ); return { onDelete, onChange, onClick }; diff --git a/src/hooks/sidebar/useTagSidebar.ts b/src/hooks/sidebar/useTagSidebar.ts new file mode 100644 index 00000000..b9cfdec1 --- /dev/null +++ b/src/hooks/sidebar/useTagSidebar.ts @@ -0,0 +1,20 @@ +import { useCallback } from 'react'; + +import { SidebarName } from '~/constants/sidebar'; +import { ITag } from '~/types'; +import { useSidebar } from '~/utils/providers/SidebarProvider'; + +export const useTagSidebar = () => { + const { open } = useSidebar(); + + return useCallback( + (tag: string) => { + if (!tag) { + return; + } + + open(SidebarName.Tag, { tag }); + }, + [open], + ); +}; diff --git a/src/utils/providers/SidebarProvider.tsx b/src/utils/providers/SidebarProvider.tsx index 3f2ec736..8f5e6c1c 100644 --- a/src/utils/providers/SidebarProvider.tsx +++ b/src/utils/providers/SidebarProvider.tsx @@ -84,11 +84,14 @@ export const SidebarProvider = ({ {children} {current && ( - {createElement(sidebarComponents[current], { - onRequestClose: close, - openSidebar: open, - ...omit(['sidebar'], router.query), - } as any)} + {createElement( + sidebarComponents[current] as any, + { + onRequestClose: close, + openSidebar: open, + ...omit(['sidebar'], router.query), + } as any, + )} )}