mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
implement createPortal in board view for post menu
This commit is contained in:
Tom
+154
-150
@@ -1,4 +1,5 @@
|
|||||||
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
import { Helmet } from 'react-helmet-async';
|
import { Helmet } from 'react-helmet-async';
|
||||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||||
import { confirmAlert } from 'react-confirm-alert';
|
import { confirmAlert } from 'react-confirm-alert';
|
||||||
@@ -10,6 +11,7 @@ import { debounce } from 'lodash';
|
|||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
|
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
|
||||||
import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
|
import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
|
||||||
|
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
|
||||||
import EditModal from '../modals/EditModal';
|
import EditModal from '../modals/EditModal';
|
||||||
import ImageBanner from '../ImageBanner';
|
import ImageBanner from '../ImageBanner';
|
||||||
import ModerationModal from '../modals/ModerationModal';
|
import ModerationModal from '../modals/ModerationModal';
|
||||||
@@ -81,10 +83,11 @@ const Board = () => {
|
|||||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||||
const [selectedFeed, setSelectedFeed] = useState(feed);
|
const [selectedFeed, setSelectedFeed] = useState(feed);
|
||||||
const [deletePost, setDeletePost] = useState(false);
|
const [deletePost, setDeletePost] = useState(false);
|
||||||
const [rotatedStates, setRotatedStates] = useState({});
|
|
||||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||||
const [isModerator, setIsModerator] = useState(false);
|
const [isModerator, setIsModerator] = useState(false);
|
||||||
const [commentCid, setCommentCid] = useState(null);
|
const [commentCid, setCommentCid] = useState(null);
|
||||||
|
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
|
||||||
|
const [openMenuCid, setOpenMenuCid] = useState(null);
|
||||||
|
|
||||||
const [errorMessage, setErrorMessage] = useState(null);
|
const [errorMessage, setErrorMessage] = useState(null);
|
||||||
const [successMessage, setSuccessMessage] = useState(null);
|
const [successMessage, setSuccessMessage] = useState(null);
|
||||||
@@ -105,11 +108,8 @@ const Board = () => {
|
|||||||
}, [account?.author.address, subplebbit.roles]);
|
}, [account?.author.address, subplebbit.roles]);
|
||||||
|
|
||||||
|
|
||||||
const handleOptionClick = (threadCid) => {
|
const handleOptionClick = () => {
|
||||||
setRotatedStates(prevState => ({
|
setOpenMenuCid(null);
|
||||||
...prevState,
|
|
||||||
[threadCid]: false
|
|
||||||
}));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -831,89 +831,91 @@ const Board = () => {
|
|||||||
title="Post menu"
|
title="Post menu"
|
||||||
ref={el => threadMenuRefs.current[thread.cid] = el}
|
ref={el => threadMenuRefs.current[thread.cid] = el}
|
||||||
className='post-menu-button'
|
className='post-menu-button'
|
||||||
rotated={rotatedStates[thread.cid]}
|
rotated={openMenuCid === thread.cid}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
|
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
|
||||||
const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
|
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
|
||||||
menu.style.top = `calc(${rect.top + window.scrollY}px - 258px)`;
|
setOpenMenuCid(prevCid => (prevCid === thread.cid ? null : thread.cid));
|
||||||
menu.style.left = `${rect.left}px`;
|
|
||||||
|
|
||||||
setRotatedStates(prevState => ({
|
|
||||||
...prevState,
|
|
||||||
[thread.cid]: !prevState[thread.cid]
|
|
||||||
}));
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
▶
|
▶
|
||||||
</PostMenu>
|
</PostMenu>
|
||||||
<div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
|
{createPortal(
|
||||||
style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
|
<PostMenuCatalog selectedStyle={selectedStyle}
|
||||||
<ul>
|
style={{position: "absolute",
|
||||||
<li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
|
top: menuPosition.top + 7,
|
||||||
{thread.author.shortAddress === account?.author.shortAddress ? (
|
left: menuPosition.left}}>
|
||||||
<>
|
<div className={`post-menu-thread post-menu-thread-${thread.cid}`}
|
||||||
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
|
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
|
||||||
<li onClick={() => handleAuthorDeleteClick(thread.cid)}>Delete post</li>
|
>
|
||||||
</>
|
<ul className="post-menu-catalog">
|
||||||
) : null}
|
<li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
|
||||||
{isModerator ? (
|
{thread.author.shortAddress === account?.author.shortAddress ? (
|
||||||
<>
|
<>
|
||||||
{thread.author.shortAddress === account?.author.shortAddress ? (
|
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
|
||||||
null
|
<li onClick={() => handleAuthorDeleteClick(thread.cid)}>Delete post</li>
|
||||||
) : (
|
</>
|
||||||
<li onClick={() => {
|
) : null}
|
||||||
|
{isModerator ? (
|
||||||
|
<>
|
||||||
|
{thread.author.shortAddress === account?.author.shortAddress ? (
|
||||||
|
null
|
||||||
|
) : (
|
||||||
|
<li onClick={() => {
|
||||||
|
setModeratingCommentCid(thread.cid)
|
||||||
|
setIsModerationOpen(true);
|
||||||
|
handleOptionClick(thread.cid);
|
||||||
|
setDeletePost(true);
|
||||||
|
}}>
|
||||||
|
Delete post
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
<li
|
||||||
|
onClick={() => {
|
||||||
setModeratingCommentCid(thread.cid)
|
setModeratingCommentCid(thread.cid)
|
||||||
setIsModerationOpen(true);
|
setIsModerationOpen(true);
|
||||||
handleOptionClick(thread.cid);
|
handleOptionClick(thread.cid);
|
||||||
setDeletePost(true);
|
|
||||||
}}>
|
}}>
|
||||||
Delete post
|
Mod tools
|
||||||
</li>
|
</li>
|
||||||
)}
|
</>
|
||||||
<li
|
) : null}
|
||||||
onClick={() => {
|
{(commentMediaInfo && (
|
||||||
setModeratingCommentCid(thread.cid)
|
commentMediaInfo.type === 'image' ||
|
||||||
setIsModerationOpen(true);
|
(commentMediaInfo.type === 'webpage' &&
|
||||||
handleOptionClick(thread.cid);
|
commentMediaInfo.thumbnail))) ? (
|
||||||
}}>
|
<li
|
||||||
Mod tools
|
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||||
</li>
|
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||||
</>
|
Image search »
|
||||||
) : null}
|
<ul className="dropdown-menu"
|
||||||
{(commentMediaInfo && (
|
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||||
commentMediaInfo.type === 'image' ||
|
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||||
(commentMediaInfo.type === 'webpage' &&
|
<a
|
||||||
commentMediaInfo.thumbnail))) ? (
|
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||||
<li
|
target="_blank" rel="noreferrer"
|
||||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
>Google</a>
|
||||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
</li>
|
||||||
Image search »
|
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||||
<ul className="dropdown-menu"
|
<a
|
||||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
target="_blank" rel="noreferrer"
|
||||||
<a
|
>Yandex</a>
|
||||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
</li>
|
||||||
target="_blank" rel="noreferrer"
|
<li onClick={() => handleOptionClick(thread.cid)}>
|
||||||
>Google</a>
|
<a
|
||||||
</li>
|
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
target="_blank" rel="noreferrer"
|
||||||
<a
|
>SauceNAO</a>
|
||||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
</li>
|
||||||
target="_blank" rel="noreferrer"
|
</ul>
|
||||||
>Yandex</a>
|
</li>
|
||||||
</li>
|
) : null
|
||||||
<li onClick={() => handleOptionClick(thread.cid)}>
|
}
|
||||||
<a
|
</ul>
|
||||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
</div>
|
||||||
target="_blank" rel="noreferrer"
|
</PostMenuCatalog>, document.body
|
||||||
>SauceNAO</a>
|
)}
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div key={`bi-${index}`} id="backlink-id" className="backlink">
|
<div key={`bi-${index}`} id="backlink-id" className="backlink">
|
||||||
{thread.replies?.pages?.topAll.comments
|
{thread.replies?.pages?.topAll.comments
|
||||||
.sort((a, b) => a.timestamp - b.timestamp)
|
.sort((a, b) => a.timestamp - b.timestamp)
|
||||||
@@ -1029,89 +1031,91 @@ const Board = () => {
|
|||||||
title="Post menu"
|
title="Post menu"
|
||||||
ref={el => replyMenuRefs.current[reply.cid] = el}
|
ref={el => replyMenuRefs.current[reply.cid] = el}
|
||||||
className='post-menu-button'
|
className='post-menu-button'
|
||||||
rotated={rotatedStates[reply.cid]}
|
rotated={openMenuCid === reply.cid}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
||||||
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
|
setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
|
||||||
menu.style.top = `calc(${rect.top + window.scrollY}px - 258px)`;
|
setOpenMenuCid(prevCid => (prevCid === reply.cid ? null : reply.cid));
|
||||||
menu.style.left = `${rect.left}px`;
|
|
||||||
|
|
||||||
setRotatedStates(prevState => ({
|
|
||||||
...prevState,
|
|
||||||
[reply.cid]: !prevState[reply.cid]
|
|
||||||
}));
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
▶
|
▶
|
||||||
</PostMenu>
|
</PostMenu>
|
||||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
{createPortal(
|
||||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
<PostMenuCatalog selectedStyle={selectedStyle}
|
||||||
<ul>
|
style={{position: "absolute",
|
||||||
<li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
|
top: menuPosition.top + 7,
|
||||||
{reply.author.shortAddress === account?.author.shortAddress ? (
|
left: menuPosition.left}}>
|
||||||
<>
|
<div className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||||
<li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
|
style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
|
||||||
<li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
|
>
|
||||||
</>
|
<ul className="post-menu-catalog">
|
||||||
) : null}
|
<li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
|
||||||
{isModerator ? (
|
{reply.author.shortAddress === account?.author.shortAddress ? (
|
||||||
<>
|
<>
|
||||||
{reply.author.shortAddress === account?.author.shortAddress ? (
|
<li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
|
||||||
null
|
<li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
|
||||||
) : (
|
</>
|
||||||
<li onClick={() => {
|
) : null}
|
||||||
|
{isModerator ? (
|
||||||
|
<>
|
||||||
|
{reply.author.shortAddress === account?.author.shortAddress ? (
|
||||||
|
null
|
||||||
|
) : (
|
||||||
|
<li onClick={() => {
|
||||||
|
setModeratingCommentCid(reply.cid)
|
||||||
|
setIsModerationOpen(true);
|
||||||
|
handleOptionClick(reply.cid);
|
||||||
|
setDeletePost(true);
|
||||||
|
}}>
|
||||||
|
Delete post
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
<li
|
||||||
|
onClick={() => {
|
||||||
setModeratingCommentCid(reply.cid)
|
setModeratingCommentCid(reply.cid)
|
||||||
setIsModerationOpen(true);
|
setIsModerationOpen(true);
|
||||||
handleOptionClick(reply.cid);
|
handleOptionClick(reply.cid);
|
||||||
setDeletePost(true);
|
|
||||||
}}>
|
}}>
|
||||||
Delete post
|
Mod tools
|
||||||
</li>
|
</li>
|
||||||
)}
|
</>
|
||||||
<li
|
) : null}
|
||||||
onClick={() => {
|
{(replyMediaInfo && (
|
||||||
setModeratingCommentCid(reply.cid)
|
replyMediaInfo.type === 'image' ||
|
||||||
setIsModerationOpen(true);
|
(replyMediaInfo.type === 'webpage' &&
|
||||||
handleOptionClick(reply.cid);
|
replyMediaInfo.thumbnail))) ? (
|
||||||
}}>
|
<li
|
||||||
Mod tools
|
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||||
</li>
|
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||||
</>
|
Image search »
|
||||||
) : null}
|
<ul className="dropdown-menu"
|
||||||
{(replyMediaInfo && (
|
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||||
replyMediaInfo.type === 'image' ||
|
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||||
(replyMediaInfo.type === 'webpage' &&
|
<a
|
||||||
replyMediaInfo.thumbnail))) ? (
|
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
|
||||||
<li
|
target="_blank" rel="noreferrer"
|
||||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
>Google</a>
|
||||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
</li>
|
||||||
Image search »
|
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||||
<ul className="dropdown-menu"
|
<a
|
||||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
|
||||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
target="_blank" rel="noreferrer"
|
||||||
<a
|
>Yandex</a>
|
||||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
</li>
|
||||||
target="_blank" rel="noreferrer"
|
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||||
>Google</a>
|
<a
|
||||||
</li>
|
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
|
||||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
target="_blank" rel="noreferrer"
|
||||||
<a
|
>SauceNAO</a>
|
||||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
</li>
|
||||||
target="_blank" rel="noreferrer"
|
</ul>
|
||||||
>Yandex</a>
|
</li>
|
||||||
</li>
|
) : null
|
||||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
}
|
||||||
<a
|
</ul>
|
||||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
</div>
|
||||||
target="_blank" rel="noreferrer"
|
</PostMenuCatalog>, document.body
|
||||||
>SauceNAO</a>
|
)}
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
) : null
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="backlink-id" className="backlink">
|
<div id="backlink-id" className="backlink">
|
||||||
{reply.replies?.pages?.topAll.comments
|
{reply.replies?.pages?.topAll.comments
|
||||||
.sort((a, b) => a.timestamp - b.timestamp)
|
.sort((a, b) => a.timestamp - b.timestamp)
|
||||||
|
|||||||
Reference in New Issue
Block a user