diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx index cfadba48..241ff171 100644 --- a/src/components/post/post-menu/post-menu.tsx +++ b/src/components/post/post-menu/post-menu.tsx @@ -3,13 +3,86 @@ import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDis import { Comment } from '@plebbit/plebbit-react-hooks'; import styles from './post-menu.module.css'; import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; -import { isValidURL } from '../../../lib/utils/url-utils'; +import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils'; -const PostMenu = ({ post }: Comment) => { - const { cid, isDescription, isRules, link, subplebbitAddress } = post; - const [menuBtnRotated, setMenuBtnRotated] = useState(false); - const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); +interface PostMenuProps { + cid: string; + isDescription?: boolean; + isRules?: boolean; + subplebbitAddress: string; + onClose: () => void; +} + +const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => { + return ( +
{ + copyShareLinkToClipboard(subplebbitAddress, cid); + onClose(); + }} + > +
Copy link
+
+ ); +}; + +const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => { const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false); + return ( +
setIsImageSearchMenuOpen(true)} + onMouseLeave={() => setIsImageSearchMenuOpen(false)} + onClick={onClose} + > + Image search » + {isImageSearchMenuOpen && ( +
+ +
Google
+
+ +
Yandex
+
+ +
SauceNAO
+
+
+ )} +
+ ); +}; + +const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => { + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); + const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; + return ( +
setIsClientRedirectMenuOpen(true)} + onMouseLeave={() => setIsClientRedirectMenuOpen(false)} + onClick={onClose} + > + View on » + {isClientRedirectMenuOpen && ( +
+ +
Seedit
+
+ +
Plebones
+
+
+ )} +
+ ); +}; + +const PostMenu = ({ post }: { post: Comment }) => { + const { cid, isDescription, isRules, link, subplebbitAddress } = post; + const commentMediaInfo = getCommentMediaInfo(post); + const { thumbnail, type, url } = commentMediaInfo || {}; + const [menuBtnRotated, setMenuBtnRotated] = useState(false); const { refs, floatingStyles, context } = useFloating({ placement: 'bottom-start', @@ -18,19 +91,13 @@ const PostMenu = ({ post }: Comment) => { middleware: [offset({ mainAxis: 10, crossAxis: 5 }), flip({ fallbackAxisSideDirection: 'end' }), shift({ padding: 10 })], whileElementsMounted: autoUpdate, }); - const click = useClick(context); const dismiss = useDismiss(context); const role = useRole(context); - const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]); - const headingId = useId(); - const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; - - const commentMediaInfo = getCommentMediaInfo(post); - const { thumbnail, type, url } = commentMediaInfo || {}; + const handleClose = () => setMenuBtnRotated(false); return ( <> @@ -47,55 +114,9 @@ const PostMenu = ({ post }: Comment) => { {menuBtnRotated && (
- {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && ( -
setIsImageSearchMenuOpen(true)} - onMouseLeave={() => setIsImageSearchMenuOpen(false)} - > - Image search » - {isImageSearchMenuOpen && ( -
-
- - Google - -
-
- - Yandex - -
-
- - SauceNAO - -
-
- )} -
- )} -
setIsClientRedirectMenuOpen(true)} - onMouseLeave={() => setIsClientRedirectMenuOpen(false)} - > - View on » - {isClientRedirectMenuOpen && ( -
-
- - Seedit - -
-
- - Plebones - -
-
- )} -
+ {cid && subplebbitAddress && } + {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && } +
)} diff --git a/src/lib/utils/url-utils.ts b/src/lib/utils/url-utils.ts index aacfae92..b6cd62f8 100644 --- a/src/lib/utils/url-utils.ts +++ b/src/lib/utils/url-utils.ts @@ -16,7 +16,7 @@ export const isValidURL = (url: string) => { }; export const copyShareLinkToClipboard = (subplebbitAddress: string, cid: string) => { - const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}`; + const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}?redirect=plebchan.eth.limo`; if (navigator.clipboard) { navigator.clipboard.writeText(shareLink);