moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix and simplify ScrollContext 

Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1774
This commit is contained in:
Alex Gleason 2024-10-30 23:33:33 -05:00
parent 2806f5afbc
commit 1ba0757110
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 6 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/scroll-context.tsx
View File

@ -1,24 +1,18 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { usePrevious } from 'soapbox/hooks';
export type Location<T> = ReturnType<typeof useLocation<T>>;
interface IScrollContext { interface IScrollContext {
shouldUpdateScroll(prevLocation: Location<any> | undefined, location: Location<any>): boolean;
children: React.ReactNode; children: React.ReactNode;
} }
export const ScrollContext: React.FC<IScrollContext> = ({ shouldUpdateScroll, children }) => { export const ScrollContext: React.FC<IScrollContext> = ({ children }) => {
const location = useLocation(); const location = useLocation<{ soapboxModalKey?: number } | undefined>();
const prevLocation = usePrevious(location);
useEffect(() => { useEffect(() => {
if (prevLocation && (prevLocation.pathname !== location.pathname) && shouldUpdateScroll(prevLocation, location)) { if (!location.state?.soapboxModalKey) {
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
}, [location, shouldUpdateScroll]); }, [location]);
return children; return children;
}; };

12
src/init/soapbox-mount.tsx
View File

@ -6,7 +6,7 @@ import { CompatRouter } from 'react-router-dom-v5-compat';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import * as BuildConfig from 'soapbox/build-config'; import * as BuildConfig from 'soapbox/build-config';
import LoadingScreen from 'soapbox/components/loading-screen'; 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 SiteErrorBoundary from 'soapbox/components/site-error-boundary';
import { import {
ModalContainer, ModalContainer,
@ -24,10 +24,6 @@ const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner'));
const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status')); const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status'));
const UI = React.lazy(() => import('soapbox/features/ui')); const UI = React.lazy(() => import('soapbox/features/ui'));
interface LocationState {
soapboxModalKey?: string;
}
/** Highest level node with the Redux store. */ /** Highest level node with the Redux store. */
const SoapboxMount = () => { const SoapboxMount = () => {
useCachedLocationHandler(); useCachedLocationHandler();
@ -54,15 +50,11 @@ const SoapboxMount = () => {
const { redirectRootNoLogin, gdpr } = soapboxConfig; 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 ( return (
<SiteErrorBoundary> <SiteErrorBoundary>
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}> <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<CompatRouter> <CompatRouter>
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}> <ScrollContext>
<Switch> <Switch>
{(!isLoggedIn && redirectRootNoLogin) && ( {(!isLoggedIn && redirectRootNoLogin) && (
<Redirect exact from='/' to={redirectRootNoLogin} /> <Redirect exact from='/' to={redirectRootNoLogin} />