External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add post actions menu

Browse Source
This commit is contained in:
Tom
2023-05-18 16:59:51 +02:00
parent 61571e5a07
commit 79cc4cf34d
6 changed files with 814 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Thread.jsx
+128 -9
View File
@@ -6,7 +6,7 @@ import { useAccount, useAccountComments, useComment, usePublishComment, useSubpl
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/Board.styled';
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
@@ -48,23 +48,27 @@ const Thread = () => {
showPostFormLink,
} = useGeneralStore(state => state);
const account = useAccount();
const navigate = useNavigate();
const handleClickForm = useClickForm();
const nameRef = useRef();
const commentRef = useRef();
const linkRef = useRef();
const threadMenuRefs = useRef({});
const replyMenuRefs = useRef({});
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
const [errorMessage, setErrorMessage] = useState(null);
useError(errorMessage, [errorMessage]);
const [isReplyOpen, setIsReplyOpen] = useState(false);
const navigate = useNavigate();
const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true);
const account = useAccount();
const [rotatedStates, setRotatedStates] = useState({});
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
useError(errorMessage, [errorMessage]);
const comment = useComment({commentCid: selectedThread});
const { subplebbitAddress, threadCid } = useParams();
const handleClickForm = useClickForm();
const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress});
const selectedAddress = subplebbit.address;
@@ -631,7 +635,65 @@ const Thread = () => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Reply to this post">{comment.shortCid}</button>
</span>&nbsp;&nbsp;
<button className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
<PostMenu
key={`pmb-${index}`}
title="Post menu"
ref={el => threadMenuRefs.current[comment.cid] = el}
className='post-menu-button'
rotated={rotatedStates[comment.cid]}
onClick={() => {
const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
menu.style.top = `calc(${rect.top}px + 17px)`;
menu.style.left = `${rect.left}px`;
setRotatedStates(prevState => ({
...prevState,
[comment.cid]: !prevState[comment.cid]
}));
}}
>
▶
</PostMenu>
<div id="post-menu" className={`post-menu-thread post-menu-thread-${comment.cid}`}
style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>
<ul>
<li>Edit post</li>
<li>Hide thread</li>
{(commentMediaInfo && (
commentMediaInfo.type === 'image' ||
(commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li>
<a
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li>
<a
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li>
<a
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null
}
</ul>
</div>
<div id="backlink-id" className="backlink">
{comment?.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)
@@ -716,7 +778,64 @@ const Thread = () => {
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
)}
</span>&nbsp;
<button key={`pmb-${index}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
<PostMenu
key={`pmb-${index}`}
title="Post menu"
ref={el => replyMenuRefs.current[reply.cid] = el}
className='post-menu-button'
rotated={rotatedStates[reply.cid]}
onClick={() => {
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
menu.style.top = `calc(${rect.top}px + 17px)`;
menu.style.left = `${rect.left}px`;
setRotatedStates(prevState => ({
...prevState,
[reply.cid]: !prevState[reply.cid]
}));
}}
>
▶
</PostMenu>
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
<ul>
<li>Edit post</li>
<li>Hide post</li>
{(replyMediaInfo && (
replyMediaInfo.type === 'image' ||
(replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li>
<a
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li>
<a
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li>
<a
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null}
</ul>
</div>
<div id="backlink-id" className="backlink">
{reply.replies?.pages?.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp)