Merge remote-tracking branch 'origin/develop' into edit-profile-fixes

app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx

@@ -56,26 +56,41 @@ describe('<Datepicker />', () => {
   it('calls the onChange function when the inputs change', async() => {
     const handler = jest.fn();
     render(<Datepicker onChange={handler} />);
+    const today = new Date();
+
+    /**
+     * A date with a different day, month, and year than today
+     * so this test will always pass!
+     */
+    const notToday = new Date(
+      today.getFullYear() - 1, // last year
+      (today.getMonth() + 2) % 11, // two months from now (mod 11 because it's 0-indexed)
+      (today.getDate() + 2) % 28, // 2 days from now (for timezone stuff)
+    );
+
+    const month = notToday.toLocaleString('en-us', { month: 'long' });
+    const year = String(notToday.getFullYear());
+    const day = String(notToday.getDate());
 
     expect(handler.mock.calls.length).toEqual(1);
 
     await userEvent.selectOptions(
       screen.getByTestId('datepicker-month'),
-      screen.getByRole('option', { name: 'February' }),
+      screen.getByRole('option', { name: month }),
     );
 
     expect(handler.mock.calls.length).toEqual(2);
 
     await userEvent.selectOptions(
       screen.getByTestId('datepicker-year'),
-      screen.getByRole('option', { name: '2020' }),
+      screen.getByRole('option', { name: year }),
     );
 
     expect(handler.mock.calls.length).toEqual(3);
 
     await userEvent.selectOptions(
       screen.getByTestId('datepicker-day'),
-      screen.getByRole('option', { name: '5' }),
+      screen.getByRole('option', { name: day }),
     );
 
     expect(handler.mock.calls.length).toEqual(4);

app/soapbox/components/ui/modal/modal.tsx

@@ -83,7 +83,7 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
+    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           {title && (

app/soapbox/containers/soapbox.tsx

@@ -5,6 +5,8 @@ import React, { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
+// @ts-ignore: it doesn't have types
+import { ScrollContext } from 'react-router-scroll-4';
 
 import { loadInstance } from 'soapbox/actions/instance';
 import { fetchMe } from 'soapbox/actions/me';
@@ -115,6 +117,11 @@ const SoapboxMount = () => {
     });
   }, []);
 
+  // @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);
+  };
+
   /** Whether to display a loading indicator. */
   const showLoading = [
     me === null,
@@ -223,17 +230,19 @@ const SoapboxMount = () => {
       {helmet}
       <ErrorBoundary>
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
-          <>
-            {renderBody()}
+          <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
+            <>
+              {renderBody()}
 
-            <BundleContainer fetchComponent={NotificationsContainer}>
-              {(Component) => <Component />}
-            </BundleContainer>
+              <BundleContainer fetchComponent={NotificationsContainer}>
+                {(Component) => <Component />}
+              </BundleContainer>
 
-            <BundleContainer fetchComponent={ModalContainer}>
-              {Component => <Component />}
-            </BundleContainer>
-          </>
+              <BundleContainer fetchComponent={ModalContainer}>
+                {Component => <Component />}
+              </BundleContainer>
+            </>
+          </ScrollContext>
         </BrowserRouter>
       </ErrorBoundary>
     </IntlProvider>

package.json

@@ -167,6 +167,7 @@
     "react-popper": "^2.3.0",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0",
+    "react-router-scroll-4": "^1.0.0-beta.2",
     "react-simple-pull-to-refresh": "^1.3.0",
     "react-sparklines": "^1.7.0",
     "react-sticky-box": "^1.0.2",

yarn.lock

@@ -6668,7 +6668,7 @@ intl@^1.2.5:
   resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
   integrity sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=
 
-invariant@^2.2.2:
+invariant@^2.2.2, 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==
@@ -9817,6 +9817,14 @@ 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"
@@ -10433,6 +10441,14 @@ 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"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"