From b03a542cecd4af8082824dcf788cb4925fd9b31a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 11 Jun 2023 12:17:22 +0200
Subject: [PATCH] add PostOnHover to OP links

---
 src/components/PostOnHover.jsx  | 24 ++++++----
 src/components/views/Board.jsx  | 82 +++++++++++++--------------------
 src/components/views/Thread.jsx | 70 +++++++++++++---------------
 3 files changed, 78 insertions(+), 98 deletions(-)

diff --git a/src/components/PostOnHover.jsx b/src/components/PostOnHover.jsx
index fb3ee59a..4bb35302 100644
--- a/src/components/PostOnHover.jsx
+++ b/src/components/PostOnHover.jsx
@@ -78,12 +78,8 @@ const PostOnHover = ({ cid, feed }) => {
                       &nbsp;
                       <span className="post-number post-number-desktop">
                         <span >c/</span>
-                        {reply.shortCid ? (
                           <Link to={() => {}} id="reply-button" 
                           title="Reply to this post">{reply.shortCid}</Link>
-                        ) : (
-                          <span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
-                        )}
                       </span>&nbsp;
                       <div id="backlink-id" className="backlink">
                         {reply.replies?.pages?.topAll.comments
@@ -155,9 +151,11 @@ const PostOnHover = ({ cid, feed }) => {
                       reply.content?.length > 500 ?
                       <Fragment >
                         <blockquote comment={reply} className="post-message">
-                          <Link to={() => {}} className="quotelink">
-                              {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
-                          </Link>
+                          {shortParentCid ? (
+                            <Link to={() => {}} className="quotelink">
+                                {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                            </Link>
+                          ) : null}
                           <Post content={reply.content?.slice(0, 500)} />
                           <span className="ttl"> (...)
                           <br /> <EditLabel 
@@ -167,9 +165,11 @@ const PostOnHover = ({ cid, feed }) => {
                         </blockquote>
                       </Fragment>
                     : <blockquote className="post-message">
-                        <Link to={() => {}} className="quotelink">
-                            {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
-                        </Link>
+                        {shortParentCid ? (
+                          <Link to={() => {}} className="quotelink">
+                              {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                          </Link>
+                        ) : null}
                         <Post content={reply.content} comment={reply} />
                         <EditLabel 
                           commentCid={reply.cid}
@@ -277,9 +277,11 @@ const PostOnHover = ({ cid, feed }) => {
                   reply.content?.length > 500 ?
                   <Fragment>
                     <blockquote className="post-message">
+                    {shortParentCid ? (
                       <Link to={() => {}} className="quotelink">
                         {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                       </Link>
+                    ) : null}
                       <Post content={reply.content?.slice(0, 500)} comment={reply} />
                       <span className="ttl"> (...)
                       <br />
@@ -291,9 +293,11 @@ const PostOnHover = ({ cid, feed }) => {
                     </blockquote>
                   </Fragment>
                 : <blockquote className="post-message">
+                  {shortParentCid ? (
                     <Link to={() => {}} className="quotelink" >
                       {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                     </Link>
+                  ) : null}
                     <Post content={reply.content} comment={reply} />
                     <EditLabel 
                     commentCid={reply.cid}
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 69175490..b33388c1 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1339,9 +1339,6 @@ const Board = () => {
                                     onMouseOver={(event) => {
                                       event.stopPropagation();
                                       handleQuoteHover(reply, shortParentCid, () => {
-                                        if (shortParentCid === thread.shortCid) {
-                                          return;
-                                        } else {
                                           setOutOfViewCid(reply.parentCid);
                                           const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
                                           const distanceToRight = window.innerWidth - rect.right;
@@ -1360,8 +1357,7 @@ const Board = () => {
                                               maxWidth: window.innerWidth - rect.left - rect.width + 5
                                             });
                                           }
-                                        }
-                                      });
+                                        });
                                     }}                                
                                     onMouseLeave={() => {
                                       removeHighlight();
@@ -1393,9 +1389,6 @@ const Board = () => {
                                   onMouseOver={(event) => {
                                     event.stopPropagation();
                                     handleQuoteHover(reply, shortParentCid, () => {
-                                      if (shortParentCid === thread.shortCid) {
-                                        return;
-                                      } else {
                                         setOutOfViewCid(reply.parentCid);
                                         const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
                                         const distanceToRight = window.innerWidth - rect.right;
@@ -1414,7 +1407,6 @@ const Board = () => {
                                             maxWidth: window.innerWidth - rect.left - rect.width + 5
                                           });
                                         }
-                                      }
                                     });
                                   }}                                
                                   onMouseLeave={() => {
@@ -1725,27 +1717,23 @@ const Board = () => {
                                 onMouseOver={(event) => {
                                   event.stopPropagation();
                                   handleQuoteHover(reply, shortParentCid, () => {
-                                    if (shortParentCid === thread.shortCid) {
-                                      return;
-                                    } else {
-                                      setOutOfViewCid(reply.parentCid);
-                                      const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
-                                      const distanceToRight = window.innerWidth - rect.right;
-                                
-                                      if (distanceToRight < 200) {
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          right: window.innerWidth - rect.left - 10,
-                                          maxWidth: rect.left - 5
-                                        });
+                                    setOutOfViewCid(reply.parentCid);
+                                    const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
+                                    const distanceToRight = window.innerWidth - rect.right;
+                              
+                                    if (distanceToRight < 200) {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        right: window.innerWidth - rect.left - 10,
+                                        maxWidth: rect.left - 5
+                                      });
 
-                                      } else {
-                                        setOutOfViewPosition({
-                                          top: rect.top + window.scrollY - rect.height / 2,
-                                          left: rect.left + rect.width + 5,
-                                          maxWidth: window.innerWidth - rect.left - rect.width + 5
-                                        });
-                                      }
+                                    } else {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                        maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                      });
                                     }
                                   });
                                 }}
@@ -1779,27 +1767,23 @@ const Board = () => {
                               onMouseOver={(event) => {
                                 event.stopPropagation();
                                 handleQuoteHover(reply, shortParentCid, () => {
-                                  if (shortParentCid === thread.shortCid) {
-                                    return;
-                                  } else {
-                                    setOutOfViewCid(reply.parentCid);
-                                    const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
-                                    const distanceToRight = window.innerWidth - rect.right;
-                              
-                                    if (distanceToRight < 200) {
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        right: window.innerWidth - rect.left - 10,
-                                        maxWidth: rect.left - 5
-                                      });
+                                  setOutOfViewCid(reply.parentCid);
+                                  const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
+                                  const distanceToRight = window.innerWidth - rect.right;
+                            
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      right: window.innerWidth - rect.left - 10,
+                                      maxWidth: rect.left - 5
+                                    });
 
-                                    } else {
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        left: rect.left + rect.width + 5,
-                                        maxWidth: window.innerWidth - rect.left - rect.width + 5
-                                      });
-                                    }
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                    });
                                   }
                                 });
                               }}
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index de8af6d3..44672b98 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1252,26 +1252,22 @@ const Thread = () => {
                               onMouseOver={(event) => {
                                 event.stopPropagation();
                                 handleQuoteHover(reply, shortParentCid, () => {
-                                  if (shortParentCid === comment.shortCid) {
-                                    return;
-                                  } else {
-                                    setOutOfViewCid(reply.parentCid);
-                                    const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
-                                    const distanceToRight = window.innerWidth - rect.right;                                    
-                                    if (distanceToRight < 200) {
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        right: window.innerWidth - rect.left - 10,
-                                        maxWidth: rect.left - 5
-                                      });
+                                  setOutOfViewCid(reply.parentCid);
+                                  const rect = quoteRefs.current[shortParentCid].getBoundingClientRect();
+                                  const distanceToRight = window.innerWidth - rect.right;                                    
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      right: window.innerWidth - rect.left - 10,
+                                      maxWidth: rect.left - 5
+                                    });
 
-                                    } else {
-                                      setOutOfViewPosition({
-                                        top: rect.top + window.scrollY - rect.height / 2,
-                                        left: rect.left + rect.width + 5,
-                                        maxWidth: window.innerWidth - rect.left - rect.width + 5
-                                      });
-                                    }
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                    });
                                   }
                                 });
                               }}                                
@@ -1528,27 +1524,23 @@ const Thread = () => {
                             onMouseOver={(event) => {
                               event.stopPropagation();
                               handleQuoteHover(reply, shortParentCid, () => {
-                                if (shortParentCid === comment.shortCid) {
-                                  return;
-                                } else {
-                                  setOutOfViewCid(reply.parentCid);
-                                  const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
-                                  const distanceToRight = window.innerWidth - rect.right;
-                            
-                                  if (distanceToRight < 200) {
-                                    setOutOfViewPosition({
-                                      top: rect.top + window.scrollY - rect.height / 2,
-                                      right: window.innerWidth - rect.left - 10,
-                                      maxWidth: rect.left - 5
-                                    });
+                                setOutOfViewCid(reply.parentCid);
+                                const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
+                                const distanceToRight = window.innerWidth - rect.right;
+                          
+                                if (distanceToRight < 200) {
+                                  setOutOfViewPosition({
+                                    top: rect.top + window.scrollY - rect.height / 2,
+                                    right: window.innerWidth - rect.left - 10,
+                                    maxWidth: rect.left - 5
+                                  });
 
-                                  } else {
-                                    setOutOfViewPosition({
-                                      top: rect.top + window.scrollY - rect.height / 2,
-                                      left: rect.left + rect.width + 5,
-                                      maxWidth: window.innerWidth - rect.left - rect.width + 5
-                                    });
-                                  }
+                                } else {
+                                  setOutOfViewPosition({
+                                    top: rect.top + window.scrollY - rect.height / 2,
+                                    left: rect.left + rect.width + 5,
+                                    maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                  });
                                 }
                               });
                             }}