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 && (
+
+ )}
+
+ );
+};
+
+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 && (
+
+ )}
+
+ );
+};
+
+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 && (
-
- )}
-
- )}
-
setIsClientRedirectMenuOpen(true)}
- onMouseLeave={() => setIsClientRedirectMenuOpen(false)}
- >
- View on »
- {isClientRedirectMenuOpen && (
-
- )}
-
+ {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);