implement createPortal in board view for post menu

src/components/views/Board.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { confirmAlert } from 'react-confirm-alert';
@@ -10,6 +11,7 @@ import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 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 { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
@@ -81,10 +83,11 @@ const Board = () => {
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const [deletePost, setDeletePost] = useState(false);
-  const [rotatedStates, setRotatedStates] = useState({});
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
+  const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
+  const [openMenuCid, setOpenMenuCid] = useState(null);
 
   const [errorMessage, setErrorMessage] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
@@ -105,11 +108,8 @@ const Board = () => {
   }, [account?.author.address, subplebbit.roles]);
 
 
-  const handleOptionClick = (threadCid) => {
+  const handleOptionClick = () => {
-    setRotatedStates(prevState => ({
+    setOpenMenuCid(null);
-      ...prevState,
-      [threadCid]: false
-    }));
   };
   
 
@@ -831,24 +831,24 @@ const Board = () => {
                               title="Post menu"
                               ref={el => threadMenuRefs.current[thread.cid] = el}
                               className='post-menu-button' 
-                              rotated={rotatedStates[thread.cid]}
+                              rotated={openMenuCid === thread.cid}
                               onClick={() => {
                                 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>
-                            <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", 
+                              top: menuPosition.top + 7, 
+                              left: menuPosition.left}}>
+                              <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
+                              style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
+                              >
+                                <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
                                   {thread.author.shortAddress === account?.author.shortAddress ? (
                                     <>
@@ -914,6 +914,8 @@ const Board = () => {
                                   }
                                 </ul>
                               </div>
+                              </PostMenuCatalog>, document.body
+                            )}
                             <div key={`bi-${index}`} id="backlink-id" className="backlink">
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
@@ -1029,24 +1031,24 @@ const Board = () => {
                               title="Post menu"
                               ref={el => replyMenuRefs.current[reply.cid] = el}
                               className='post-menu-button' 
-                              rotated={rotatedStates[reply.cid]}
+                              rotated={openMenuCid === reply.cid}
                               onClick={() => {
                                 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>
-                            <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", 
+                              top: menuPosition.top + 7, 
+                              left: menuPosition.left}}>
+                              <div className={`post-menu-reply post-menu-reply-${reply.cid}`}
+                              style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
+                              >
+                                <ul className="post-menu-catalog">
                                   <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
                                   {reply.author.shortAddress === account?.author.shortAddress ? (
                                     <>
@@ -1090,19 +1092,19 @@ const Board = () => {
                                           style={{display: isImageSearchOpen ? 'block': 'none'}}>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a 
-                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                            href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
                                             target="_blank" rel="noreferrer"
                                             >Google</a>
                                           </li>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a
-                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                            href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
                                             target="_blank" rel="noreferrer"
                                             >Yandex</a>
                                           </li>
                                           <li onClick={() => handleOptionClick(reply.cid)}>
                                             <a
-                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                            href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
                                             target="_blank" rel="noreferrer"
                                             >SauceNAO</a>
                                           </li>
@@ -1112,6 +1114,8 @@ const Board = () => {
                                   }
                                 </ul>
                               </div>
+                              </PostMenuCatalog>, document.body
+                            )}
                               <div id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)