Merge branch 'scrollcontext' into 'main'

Fix and simplify ScrollContext

Closes #1774

See merge request soapbox-pub/soapbox!3202

src/components/scroll-context.tsx

@@ -1,24 +1,18 @@
 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);
+export const ScrollContext: React.FC<IScrollContext> = ({ children }) => {
+  const location = useLocation<{ soapboxModalKey?: number } | undefined>();
 
   useEffect(() => {
-    if (prevLocation && (prevLocation.pathname !== location.pathname) && shouldUpdateScroll(prevLocation, location)) {
+    if (!location.state?.soapboxModalKey) {
       window.scrollTo(0, 0);
     }
-  }, [location, shouldUpdateScroll]);
+  }, [location]);
 
   return children;
 };

src/init/soapbox-mount.tsx

@@ -6,7 +6,7 @@ import { CompatRouter } from 'react-router-dom-v5-compat';
 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 { ScrollContext } from 'soapbox/components/scroll-context';
 import SiteErrorBoundary from 'soapbox/components/site-error-boundary';
 import {
   ModalContainer,
@@ -24,10 +24,6 @@ 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();
@@ -54,15 +50,11 @@ const SoapboxMount = () => {
 
   const { redirectRootNoLogin, gdpr } = soapboxConfig;
 
-  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>
       <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
         <CompatRouter>
-          <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
+          <ScrollContext>
             <Switch>
               {(!isLoggedIn && redirectRootNoLogin) && (
                 <Redirect exact from='/' to={redirectRootNoLogin} />