diff --git a/src/App.js b/src/App.js index 922be09e..eb2c5ca2 100755 --- a/src/App.js +++ b/src/App.js @@ -45,6 +45,12 @@ export default function App() { const location = useLocation(); const isElectron = window.electron && window.electron.isElectron; + useEffect(() => { + if (location.state?.scrollToTop) { + window.scrollTo(0, 0); + } + }, [location]); + const [, setNewErrorMessage] = useError(); const [, setNewSuccessMessage] = useSuccess(); const [, setNewInfoMessage] = useInfo(); diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 78ba0ff9..b89362f5 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } fr import { confirmAlert } from 'react-confirm-alert'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; @@ -541,7 +541,12 @@ const All = () => { navigate(`/p/${selected}`); }; + const location = useLocation(); + useEffect(() => { + if (location.state?.scrollToTop) { + lastVirtuosoStates[`all`] = null; + } const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot) => { if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) { @@ -552,7 +557,7 @@ const All = () => { window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, []); + }, [location.state?.scrollToTop]); const lastVirtuosoState = lastVirtuosoStates['all']; @@ -578,14 +583,9 @@ const All = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -652,10 +652,9 @@ const All = () => {   { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -3486,14 +3485,9 @@ const All = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx index f5fa5d1b..dd9735d2 100755 --- a/src/components/views/AllCatalog.jsx +++ b/src/components/views/AllCatalog.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import { confirmAlert } from 'react-confirm-alert'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; @@ -777,7 +777,12 @@ const AllCatalog = () => { setSelectedFeed(feed.filter((feed) => feed.title === title)); }; + const location = useLocation(); + useEffect(() => { + if (location.state?.scrollToTop) { + lastVirtuosoStates[`allCatalog`] = null; + } const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot) => { if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) { @@ -788,7 +793,7 @@ const AllCatalog = () => { window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [selectedAddress]); + }, [selectedAddress, location.state?.scrollToTop]); const lastVirtuosoState = lastVirtuosoStates['allCatalog']; @@ -813,14 +818,9 @@ const AllCatalog = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -894,10 +894,9 @@ const AllCatalog = () => {   { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -933,11 +932,11 @@ const AllCatalog = () => {
- [Return] + [Return]
- Return + Return
{subplebbits.state === 'succeeded' ? null : ( @@ -1008,14 +1007,9 @@ const AllCatalog = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 11782d3d..035b2592 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1,7 +1,7 @@ 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 { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { confirmAlert } from 'react-confirm-alert'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; @@ -698,7 +698,12 @@ const Board = () => { } }; + const location = useLocation(); + useEffect(() => { + if (location.state?.scrollToTop) { + lastVirtuosoStates[selectedAddress] = null; + } const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot) => { if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) { @@ -709,7 +714,7 @@ const Board = () => { window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [selectedAddress]); + }, [selectedAddress, location.state?.scrollToTop]); const lastVirtuosoState = lastVirtuosoStates[selectedAddress]; @@ -736,14 +741,9 @@ const Board = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -813,10 +813,9 @@ const Board = () => {   { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -919,16 +918,8 @@ const Board = () => {
- [ - { - window.scrollTo(0, 0); - }} - > - Catalog - - ]{subplebbit.roles && subplebbit?.roles?.[account?.author?.address]?.role === 'admin' ? : null} + [Catalog] + {subplebbit.roles && subplebbit?.roles?.[account?.author?.address]?.role === 'admin' ? : null}
{subplebbit?.state === 'succeeded' ? ( <> @@ -952,14 +943,7 @@ const Board = () => { )}
- { - window.scrollTo(0, 0); - }} - > - Catalog - + Catalog
@@ -3759,7 +3743,6 @@ const Board = () => { to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => { setSelectedThread(thread.cid); - window.scrollTo(0, 0); }} className='button-mobile' > @@ -4568,14 +4551,9 @@ const Board = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ]  {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index c6afb37c..706e0e86 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useLayoutEffect, 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 { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { confirmAlert } from 'react-confirm-alert'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; @@ -1462,7 +1462,12 @@ const Catalog = () => { } }; + const location = useLocation(); + useEffect(() => { + if (location.state?.scrollToTop) { + lastVirtuosoStates[`${selectedAddress}-catalog`] = null; + } const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot) => { if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) { @@ -1473,7 +1478,7 @@ const Catalog = () => { window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [selectedAddress]); + }, [selectedAddress, location.state?.scrollToTop]); const lastVirtuosoState = lastVirtuosoStates[`${selectedAddress}-catalog`]; @@ -1498,14 +1503,9 @@ const Catalog = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -1580,10 +1580,9 @@ const Catalog = () => {   { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -1688,16 +1687,8 @@ const Catalog = () => {
- [ - { - window.scrollTo(0, 0); - }} - > - Return - - ]{subplebbit.roles && subplebbit?.roles[account?.author?.address]?.role === 'admin' ? : null} + [Return] + {subplebbit.roles && subplebbit?.roles[account?.author?.address]?.role === 'admin' ? : null}
{subplebbit.state === 'succeeded' ? ( <> @@ -1721,14 +1712,7 @@ const Catalog = () => { )}
- { - window.scrollTo(0, 0); - }} - > - Return - + Return

@@ -1793,14 +1777,9 @@ const Catalog = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ]  {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx index c1318a08..9305717e 100644 --- a/src/components/views/Description.jsx +++ b/src/components/views/Description.jsx @@ -160,14 +160,9 @@ const Description = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -245,7 +240,6 @@ const Description = () => { to='/' onClick={() => { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -275,25 +269,13 @@ const Description = () => {
- { - window.scrollTo(0, 0); - }} - > - Return + + Return
- { - window.scrollTo(0, 0); - }} - > - Catalog - + Catalog
@@ -323,10 +305,10 @@ const Description = () => { - [Return] + [Return] - [Catalog] + [Catalog] [ @@ -694,14 +676,9 @@ const Description = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ]  {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx index 6be0f15c..d6db7344 100644 --- a/src/components/views/Home.jsx +++ b/src/components/views/Home.jsx @@ -31,7 +31,6 @@ const PopularThreads = ({ commentCid }) => { onClick={() => { setSelectedTitle(subplebbit?.title); setSelectedAddress(comment?.subplebbitAddress); - window.scrollTo(0, 0); }} > {commentMediaInfo?.type === 'webpage' && commentMediaInfo?.thumbnail ? ( @@ -223,13 +222,7 @@ const Home = () => {   - { - window.scrollTo(0, 0); - }} - > + [view all]
    @@ -239,10 +232,10 @@ const Home = () => { { - window.scrollTo(0, 0); + to={{ + pathname: `/p/${address}`, + state: { scrollToTop: true }, }} - to={`/p/${address}`} > {address} @@ -273,14 +266,7 @@ const Home = () => { {defaultNsfwSubplebbits.slice(0, showAllSFWBoards ? undefined : 18).map((subplebbit, index) => (
  • - { - window.scrollTo(0, 0); - }} - to={`/p/${subplebbit.address}`} - > + {subplebbit.address}   @@ -297,13 +283,7 @@ const Home = () => {

    Subscriptions

      - { - window.scrollTo(0, 0); - }} - > + [view all]
    @@ -312,14 +292,7 @@ const Home = () => { {account?.subscriptions?.slice(0, showAllSubscriptions ? undefined : 18).map((subscription, index) => (
  • - { - window.scrollTo(0, 0); - }} - to={`/p/${subscription}`} - > + {subscription}   @@ -340,14 +313,7 @@ const Home = () => { {accountSubplebbitsAddresses?.slice(0, showAllSubscriptions ? undefined : 18).map((subplebbit, index) => (
  • - { - window.scrollTo(0, 0); - }} - to={`/p/${subplebbit}`} - > + {subplebbit}   diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index 8d7022af..f3c98c6b 100755 --- a/src/components/views/Pending.jsx +++ b/src/components/views/Pending.jsx @@ -120,14 +120,9 @@ const Pending = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx index 4f19a7a8..b7e0b8e3 100644 --- a/src/components/views/Rules.jsx +++ b/src/components/views/Rules.jsx @@ -170,14 +170,9 @@ const Rules = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -255,7 +250,6 @@ const Rules = () => { to='/' onClick={() => { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -285,25 +279,13 @@ const Rules = () => {
    - { - window.scrollTo(0, 0); - }} - > - Return + + Return
    - { - window.scrollTo(0, 0); - }} - > - Catalog - + Catalog
    @@ -333,10 +315,10 @@ const Rules = () => { - [Return] + [Return] - [Catalog] + [Catalog] [ @@ -630,14 +612,9 @@ const Rules = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ]  {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 3f68eabc..bdc87928 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } fr import { confirmAlert } from 'react-confirm-alert'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; @@ -540,7 +540,12 @@ const Subscriptions = () => { navigate(`/p/${selected}`); }; + const location = useLocation(); + useEffect(() => { + if (location.state?.scrollToTop) { + lastVirtuosoStates[`subscriptions`] = null; + } const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot) => { if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) { @@ -551,7 +556,7 @@ const Subscriptions = () => { window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, []); + }, [location.state?.scrollToTop]); const lastVirtuosoState = lastVirtuosoStates['subscriptions']; @@ -577,14 +582,9 @@ const Subscriptions = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -651,10 +651,9 @@ const Subscriptions = () => {   { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx index 69ec3f70..73c85486 100755 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/src/components/views/SubscriptionsCatalog.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Helmet } from 'react-helmet-async'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import { confirmAlert } from 'react-confirm-alert'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; @@ -710,7 +710,6 @@ const SubscriptionsCatalog = () => { isSettingsOpen, setIsSettingsOpen, originalCommentContent, - selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle, @@ -777,18 +776,23 @@ const SubscriptionsCatalog = () => { navigate(`/p/${selected}`); }; + const location = useLocation(); + useEffect(() => { + if (location.state?.scrollToTop) { + lastVirtuosoStates[`subscriptionsCatalog`] = null; + } const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot) => { if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) { - lastVirtuosoStates[`${selectedAddress}-catalog`] = snapshot; + lastVirtuosoStates[`subscriptionsCatalog`] = snapshot; } }); }; window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [selectedAddress]); + }, [location.state?.scrollToTop]); const lastVirtuosoState = lastVirtuosoStates['subscriptionsCatalog']; @@ -813,14 +817,9 @@ const SubscriptionsCatalog = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -894,10 +893,9 @@ const SubscriptionsCatalog = () => {   { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -941,11 +939,11 @@ const SubscriptionsCatalog = () => {
    - [Return] + [Return]
    - Return + Return
    {subplebbits.state === 'succeeded' ? null : ( @@ -1015,10 +1013,7 @@ const SubscriptionsCatalog = () => { > <> - [ - window.scrollTo(0, 0)}> - Subscriptions - + [Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 9e365e52..5ce6ab46 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -664,14 +664,9 @@ const Thread = () => { <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ] [ {defaultSubplebbits.map((subplebbit, index) => ( @@ -749,7 +744,6 @@ const Thread = () => { to='/' onClick={() => { handleStyleChange({ target: { value: 'Yotsuba' } }); - window.scrollTo(0, 0); }} > Home @@ -779,25 +773,13 @@ const Thread = () => {
    - { - window.scrollTo(0, 0); - }} - > + Return
    - { - window.scrollTo(0, 0); - }} - > - Catalog - + Catalog
    @@ -898,7 +880,7 @@ const Thread = () => { [Return] - [Catalog] + [Catalog] [ @@ -3043,10 +3025,10 @@ const Thread = () => {

    - [Return] + [Return] - [Catalog] + [Catalog] [ @@ -3151,7 +3133,7 @@ const Thread = () => {
    - Catalog + Catalog
    @@ -3232,14 +3214,9 @@ const Thread = () => { > <> - [ - window.scrollTo(0, 0)}> - All - + [All  /  - window.scrollTo(0, 0)}> - Subscriptions - + Subscriptions ]  {defaultSubplebbits.map((subplebbit, index) => (