Merge branch 'scroll-context' into 'main'

Implement a custom ScrollContext component

See merge request soapbox-pub/soapbox!3193

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",

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<T> = ReturnType<typeof useLocation<T>>;
+
+interface IScrollContext {
+  shouldUpdateScroll(prevLocation: Location<any> | undefined, location: Location<any>): boolean;
+  children: React.ReactNode;
+}
+
+export const ScrollContext: React.FC<IScrollContext> = ({ shouldUpdateScroll, children }) => {
+  const location = useLocation();
+  const prevLocation = usePrevious(location);
+
+  useEffect(() => {
+    if (prevLocation && shouldUpdateScroll(prevLocation, location)) {
+      window.scrollTo(0, 0);
+    }
+  }, [location, shouldUpdateScroll]);
+
+  return children;
+};

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<T extends LocationState>(prev: Location<T> | undefined, location: Location<T>): boolean {
+    return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prev?.state?.soapboxModalKey);
+  }
 
   return (
     <SiteErrorBoundary>

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"