diff --git a/package.json b/package.json index d7098c29a..cca82ae30 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,6 @@ "react-redux": "^9.0.4", "react-router-dom": "^5.3.0", "react-router-dom-v5-compat": "^6.6.2", - "react-router-scroll-4": "^1.0.0-beta.2", "react-simple-pull-to-refresh": "^1.3.3", "react-sparklines": "^1.7.0", "react-sticky-box": "^2.0.0", diff --git a/src/components/scroll-context.tsx b/src/components/scroll-context.tsx new file mode 100644 index 000000000..ad427659f --- /dev/null +++ b/src/components/scroll-context.tsx @@ -0,0 +1,24 @@ +import React, { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +import { usePrevious } from 'soapbox/hooks'; + +export type Location = ReturnType>; + +interface IScrollContext { + shouldUpdateScroll(prevLocation: Location | undefined, location: Location): boolean; + children: React.ReactNode; +} + +export const ScrollContext: React.FC = ({ shouldUpdateScroll, children }) => { + const location = useLocation(); + const prevLocation = usePrevious(location); + + useEffect(() => { + if (prevLocation && shouldUpdateScroll(prevLocation, location)) { + window.scrollTo(0, 0); + } + }, [location, shouldUpdateScroll]); + + return children; +}; \ No newline at end of file diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx index 71942395c..ea365031f 100644 --- a/src/init/soapbox-mount.tsx +++ b/src/init/soapbox-mount.tsx @@ -2,12 +2,11 @@ import React, { Suspense, useEffect } from 'react'; import { Toaster } from 'react-hot-toast'; import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'; import { CompatRouter } from 'react-router-dom-v5-compat'; -// @ts-ignore: it doesn't have types -import { ScrollContext } from 'react-router-scroll-4'; import { openModal } from 'soapbox/actions/modals'; import * as BuildConfig from 'soapbox/build-config'; import LoadingScreen from 'soapbox/components/loading-screen'; +import { Location, ScrollContext } from 'soapbox/components/scroll-context'; import SiteErrorBoundary from 'soapbox/components/site-error-boundary'; import { ModalContainer, @@ -25,6 +24,10 @@ const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner')); const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status')); const UI = React.lazy(() => import('soapbox/features/ui')); +interface LocationState { + soapboxModalKey?: string; +} + /** Highest level node with the Redux store. */ const SoapboxMount = () => { useCachedLocationHandler(); @@ -51,10 +54,9 @@ const SoapboxMount = () => { const { redirectRootNoLogin, gdpr } = soapboxConfig; - // @ts-ignore: I don't actually know what these should be, lol - const shouldUpdateScroll = (prevRouterProps, { location }) => { - return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); - }; + function shouldUpdateScroll(prev: Location | undefined, location: Location): boolean { + return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prev?.state?.soapboxModalKey); + } return ( diff --git a/yarn.lock b/yarn.lock index f44a44aae..52938252f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5516,13 +5516,6 @@ intl-pluralrules@^2.0.0: resolved "https://registry.yarnpkg.com/intl-pluralrules/-/intl-pluralrules-2.0.1.tgz#de16c3df1e09437635829725e88ea70c9ad79569" integrity sha512-astxTLzIdXPeN0K9Rumi6LfMpm3rvNO0iJE+h/k8Kr/is+wPbRe4ikyDjlLr6VTh/mEfNv8RjN+gu3KwDiuhqg== -invariant@^2.2.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" - integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== - dependencies: - loose-envify "^1.0.0" - is-array-buffer@^3.0.1, is-array-buffer@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe" @@ -7363,14 +7356,6 @@ react-router-dom@^5.3.0: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router-scroll-4@^1.0.0-beta.2: - version "1.0.0-beta.2" - resolved "https://registry.yarnpkg.com/react-router-scroll-4/-/react-router-scroll-4-1.0.0-beta.2.tgz#d887063ec0f66124aaf450158dd158ff7d3dc279" - integrity sha512-K67Dnm75naSBs/WYc2CDNxqU+eE8iA3I0wSCArgGSHb0xR/7AUcgUEXtCxrQYVTogXvjVK60gmwYvOyRQ6fuBA== - dependencies: - scroll-behavior "^0.9.1" - warning "^3.0.0" - react-router@5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d" @@ -7817,14 +7802,6 @@ schema-utils@^4.0.0: ajv-formats "^2.1.1" ajv-keywords "^5.0.0" -scroll-behavior@^0.9.1: - version "0.9.12" - resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.12.tgz#1c22d273ec4ce6cd4714a443fead50227da9424c" - integrity sha512-18sirtyq1P/VsBX6O/vgw20Np+ngduFXEMO4/NDFXabdOKBL2kjPVUpz1y0+jm99EWwFJafxf5/tCyMeXt9Xyg== - dependencies: - dom-helpers "^3.4.0" - invariant "^2.2.4" - semver-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"