From 0e77779f1ecd0c60bccea7e923e45aaef60b9dc3 Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Wed, 10 May 2023 22:20:59 +0200
Subject: [PATCH] fix retained scroll position while navigating

---
 src/components/views/Board.jsx                | 11 ++++++-----
 src/components/views/Catalog.jsx              |  7 ++++---
 src/components/views/Home.jsx                 |  7 +++++--
 src/components/views/Pending.jsx              |  8 ++++----
 src/components/views/SubscriptionsCatalog.jsx |  3 ++-
 src/components/views/Thread.jsx               |  7 +++----
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index c2562d50..cbe85158 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -422,8 +422,7 @@ const Board = () => {
               <div className="page-jump">
                 <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 &nbsp;
-                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                  )}>Home</Link>
+                <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
               </div>
             </div>
             <div id="separator-mobile">&nbsp;</div>
@@ -508,7 +507,7 @@ const Board = () => {
           </span>
           <div id="catalog-button-desktop">
             [
-            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+            <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
             ]
           </div>
           {feed.length > 0 ? (
@@ -531,7 +530,7 @@ const Board = () => {
           )}
           <div id="catalog-button-mobile">
             <span className="btn-wrap">
-              <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+              <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
             </span>
           </div>
         </TopBar>
@@ -1012,7 +1011,9 @@ const Board = () => {
                         ((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
                         : null
                         }</span>
-                        <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link>
+                        <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                        onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}
+                         className="button-mobile" >View Thread</Link>
                       </div>
                     </div>
                     {displayedReplies?.map((reply, index) => {
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index bd9f8ba5..fdb7a5a6 100644
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -422,7 +422,7 @@ const Catalog = () => {
           </span>
           <div className="return-button" id="return-button-desktop">
             [
-            <Link to={`/p/${selectedAddress}`}>Return</Link>
+            <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
             ]
           </div>
           {feed.length > 0 ? (
@@ -445,7 +445,7 @@ const Catalog = () => {
           )}
           <div id="return-button-mobile">
             <span className="btn-wrap-catalog btn-wrap">
-              <Link to={`/p/${selectedAddress}`}>Return</Link>
+              <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
             </span>
           </div>
           <hr />
@@ -465,7 +465,8 @@ const Catalog = () => {
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "assets/filedeleted-res.gif";
                 return (
-                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
+                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                  onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
                     <div key={`thread-${index}`} className="thread">
                         {commentMediaInfo?.url ? (
                           <Fragment key="f-catalog">
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 84afdb05..df154d16 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -98,11 +98,13 @@ const Home = () => {
                   <h3 style={{textDecoration: 'underline', display: 'inline'}}>
                     You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null}
                   </h3>&nbsp;
-                  <Link to="/p/subscriptions" id="view-all">[view all]</Link>
+                  <Link to="/p/subscriptions" id="view-all" onClick={()=> {window.scrollTo(0, 0)}}>[view all]</Link>
                   <br />
                   {account?.subscriptions?.map((subscription, index) => (
                     <>
-                      <Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription}`}>
+                      <Link key={`sub-${index}`} className="boardlink" 
+                      onClick={()=> {window.scrollTo(0, 0)}}
+                      to={`/p/${subscription}`}>
                         <br id="mobile-br" />
                         {subscription}&nbsp;
                         <OfflineIndicator 
@@ -130,6 +132,7 @@ const Home = () => {
                     <Link to={`/p/${subplebbit.address}`} onClick={() => {
                       setSelectedTitle(subplebbit.title);
                       setSelectedAddress(subplebbit.address);
+                      window.scrollTo(0, 0);
                     }} >
                       <BoardAvatar address={subplebbit.address} />
                     </Link>
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index 944f6c86..4fd1a96a 100644
--- a/src/components/views/Pending.jsx
+++ b/src/components/views/Pending.jsx
@@ -160,12 +160,12 @@ const Pending = () => {
           <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
             <div id="return-button-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${selectedAddress}`}>Return</Link>
+                <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
               </span>
             </div>
             <div id="catalog-button-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+                <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
               </span>
             </div>
             <div>&nbsp;</div>
@@ -187,12 +187,12 @@ const Pending = () => {
           </span>
           <span className="return-button" id="return-button-desktop">
             [
-            <Link to={`/p/${selectedAddress}`}>Return</Link>
+            <Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link>
             ]
           </span>
           <span className="return-button catalog-button" id="catalog-button-desktop">
             [
-            <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+            <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
             ]
           </span>
             <span className="reply-stat">{stateString}</span>
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index bbfd7694..80e1d2b2 100644
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -214,7 +214,8 @@ const SubscriptionsCatalog = () => {
                 const commentMediaInfo = getCommentMediaInfo(thread);
                 const fallbackImgUrl = "assets/filedeleted-res.gif";
                 return (
-                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
+                  <Link style={{all: "unset", cursor: "pointer"}} key={`link-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
+                  onClick={() => {setSelectedThread(thread.cid); window.scrollTo(0, 0);}}>
                     <div key={`thread-${index}`} className="thread">
                         {commentMediaInfo?.url ? (
                           <Fragment key="f-catalog">
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 47029d09..c7cf58b7 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -360,8 +360,7 @@ const Thread = () => {
               <div className="page-jump">
                 <Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 &nbsp;
-                <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-                  )}>Home</Link>
+                <Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link>
               </div>
             </div>
             <div id="separator-mobile">&nbsp;</div>
@@ -388,13 +387,13 @@ const Thread = () => {
         <PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
           <ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} >
             <div id="return-button-mobile">
-              <span className="btn-wrap">
+              <span className="btn-wrap" onClick={()=> {window.scrollTo(0, 0)}}>
                 <Link to={`/p/${selectedAddress}`}>Return</Link>
               </span>
             </div>
             <div id="catalog-button-mobile">
               <span className="btn-wrap">
-                <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+                <Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link>
               </span>
             </div>
             <div id="bottom-button-mobile">