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

Merge branch 'scrollcontext' into 'main' 

Fix and simplify ScrollContext

Closes #1774

See merge request soapbox-pub/soapbox!3202
This commit is contained in:
Alex Gleason 2024-10-31 04:38:47 +00:00
parent 2806f5afbc 1ba0757110
commit 32f92b7559
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 { 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;
};

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 * 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} />