From 9e0d8e373a05c9f05a0ed7d4bc016987072c8acb Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Tue, 18 Apr 2023 12:11:29 +0200
Subject: [PATCH] finished quote behavior for desktop

---
 src/components/views/Board.jsx  |  8 ++++----
 src/components/views/Thread.jsx | 12 +++++++++---
 src/utils/handleQuoteClick.js   | 13 ++++++++++++-
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index b8386f42..f10093d3 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -624,7 +624,7 @@ const Board = () => {
                             reply.content.length > 500 ?
                             <Fragment key={`fragment8-${reply.cid}`}>
                               <blockquote key={`pm-${reply.cid}`} comment={reply} className="post-message">
-                                <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
+                                <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
                                     {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
                                 <Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} />
@@ -636,7 +636,7 @@ const Board = () => {
                               </blockquote>
                             </Fragment>
                           : <blockquote key={`pm-${reply.cid}`} className="post-message">
-                              <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
+                              <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
                                   {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                               </Link>
                               <Post content={reply.content} key={`post-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
@@ -843,7 +843,7 @@ const Board = () => {
                           reply.content.length > 500 ?
                           <Fragment key={`fragment15-${reply.cid}`}>
                             <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                              <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
+                              <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
                                 {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                               </Link>
                               <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
@@ -855,7 +855,7 @@ const Board = () => {
                             </blockquote>
                           </Fragment>
                         : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                            <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
+                            <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
                               {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                             </Link>
                             <Post content={reply.content} key={`post-mobile-${reply.cid}`} handlequoteclick={handleQuoteClick} comment={reply} />
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 27e827a7..87613092 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -614,7 +614,13 @@ const Thread = () => {
                           ) : null}
                         <blockquote key={`pm-${reply.cid}`} className="post-message">
                           <Link to={() => {}} className="quote-link"
-                            onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}>
+                            onClick={(event) => {
+                              handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
+                              if (shortParentCid === comment.shortCid) {
+                                window.scrollTo(0, 0);
+                              }
+                            }}
+                          >
                             {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                           </Link>
                           <Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-${reply.cid}`} />
@@ -762,7 +768,7 @@ const Thread = () => {
                       </div>
                       <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
                         <Link to={() => {}} key={`mob-ql-${reply.cid}`} className="quotelink-mobile" 
-                        onClick={(event) => handleQuoteClick(reply, event)}>
+                        onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
                           {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                         </Link>
                         <Post content={reply.content} comment={reply} handlequoteclick={handleQuoteClick} key={`post-mobile-${reply.cid}`} />
@@ -775,7 +781,7 @@ const Thread = () => {
                           <div key={`div-back${reply.cid}`} style={{display: 'inline-block'}}>
                           <Link key={`ql-${reply.cid}`}
                           to={() => {}} className="quote-link" 
-                          onClick={(event) => handleQuoteClick(reply, event)}>
+                          onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
                             c/{reply.shortCid}</Link>
                             &nbsp;
                           </div>
diff --git a/src/utils/handleQuoteClick.js b/src/utils/handleQuoteClick.js
index 044bbaee..e8faf40e 100644
--- a/src/utils/handleQuoteClick.js
+++ b/src/utils/handleQuoteClick.js
@@ -1,5 +1,16 @@
-function handleQuoteClick(reply, parentCid) {
+function handleQuoteClick(reply, parentCid, threadCid) {
   const cid = parentCid ? parentCid : reply.shortCid;
+
+  if (threadCid && cid === threadCid) {
+    const highlightedElements = document.querySelectorAll('.highlighted');
+
+    highlightedElements.forEach(el => {
+      el.classList.remove('highlighted');
+    });
+    
+    return;
+  }
+
   const targetElement = [...document.querySelectorAll('.post-reply')]
     .find(el => {
       const postNumberElement = el.querySelector('.post-number');