diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index ca9f92ea..539e0769 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; @@ -29,7 +29,13 @@ const CatalogPostMedia = ({ commentMediaInfo, link }: { commentMediaInfo: any; l return thumbnailComponent; }; -const CatalogPost = ({ post }: { post: Comment }) => { +interface CatalogPostProps { + post: Comment; + openMenu: boolean; + toggleMenu: () => void; +} + +const CatalogPost = ({ openMenu, post, toggleMenu }: CatalogPostProps) => { const { t } = useTranslation(); const { cid, content, isDescription, isRules, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, title } = post || {}; const commentMediaInfo = getCommentMediaInfo(post); @@ -65,7 +71,18 @@ const CatalogPost = ({ post }: { post: Comment }) => { ); - const [menuBtnRotated, setMenuBtnRotated] = useState(false); + useEffect(() => { + const handlePageClick = () => { + if (openMenu) { + toggleMenu(); + } + }; + document.addEventListener('click', handlePageClick); + + return () => { + document.removeEventListener('click', handlePageClick); + }; + }, [openMenu, toggleMenu]); return (