Merge branch 'scroll-context' into 'main'

Implement a custom ScrollContext component

See merge request soapbox-pub/soapbox!3193
merge-requests/3194/head
Alex Gleason 2024-10-26 22:47:01 +00:00
commit a78aa37d56
4 zmienionych plików z 32 dodań i 30 usunięć

Wyświetl plik

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

Wyświetl plik

@ -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;
};

Wyświetl plik

@ -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>

Wyświetl plik

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