From 02f0c15a8c34c9fadfe1496e7025b787d4326cdc Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 4 Jul 2022 13:54:57 -0500 Subject: [PATCH 1/3] Modal: remove overflow-hidden --- app/soapbox/components/ui/modal/modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx index 3987d6afe..10f0976ec 100644 --- a/app/soapbox/components/ui/modal/modal.tsx +++ b/app/soapbox/components/ui/modal/modal.tsx @@ -83,7 +83,7 @@ const Modal: React.FC = ({ }, [skipFocus, buttonRef]); return ( -
+
{title && ( From db56044f24f0fb9785b071185e3c1f9f756e9c88 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 4 Jul 2022 16:21:35 -0500 Subject: [PATCH 2/3] Revert "Remove react-router-scroll-4" This reverts commit 01d9f918ce2f09e3836c3028c5a267afef4cb878. --- app/soapbox/containers/soapbox.tsx | 27 ++++++++++++++++++--------- package.json | 1 + yarn.lock | 18 +++++++++++++++++- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index e87d858d1..29cfd74fb 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/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} - <> - {renderBody()} + + <> + {renderBody()} - - {(Component) => } - + + {(Component) => } + - - {Component => } - - + + {Component => } + + + diff --git a/package.json b/package.json index 47098b26b..f42719a69 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 5db73d9ab..d620b35e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6667,7 +6667,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== @@ -9811,6 +9811,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" @@ -10427,6 +10435,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" From bae21c9e00ea72a5750a6b8251ed9e04c76d2d21 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 5 Jul 2022 11:53:05 -0500 Subject: [PATCH 3/3] Datepicker: fix test failing due to date matching today --- .../datepicker/__tests__/datepicker.test.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx b/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx index 5fe6ca9d6..c4f94c89f 100644 --- a/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx +++ b/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx @@ -56,26 +56,41 @@ describe('', () => { it('calls the onChange function when the inputs change', async() => { const handler = jest.fn(); render(); + 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);