Convert router-touching classes to function components#707
Merged
Conversation
Drop the withRouter HOC in favor of the useLocation hook. Prep for the react-router-dom v6 upgrade, where withRouter is removed.
Replace class component and withRouter-injected history with useHistory hook and useEffect. Guest and kiosk users get an early-return null to avoid flashing the movement list before the redirect fires. Prep for the react-router-dom v6 upgrade.
Replace class and match-prop read with useParams, swap componentWillMount init chain for a mount useEffect, and replace withTranslation HOC with the useTranslation hook. The existing loading spinner already masks the first-render flicker between effect scheduling and redux update. Prep for the react-router-dom v6 upgrade.
Replace class state with useState, withRouter-injected history with useHistory, and componentWillMount admin-guard with a mount useEffect. Non-admins see a brief empty header before the redirect fires; acceptable since the class already gated the inner Content on the admin check. Prep for the react-router-dom v6 upgrade.
Replace class with a function component using useLocation and useTranslation hooks, and move the componentWillMount init logic into a mount useEffect. Add an 'initialized' state gate that renders a loading spinner until the effect runs. Without it, the ?success=true return path from the hosted checkout would briefly show the payment method selector before re-rendering into the success screen. Prep for the react-router-dom v6 upgrade.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pre-work for the upcoming
react-router-domv6 upgrade. Converts fivecomponents that use legacy router APIs (
withRouter,matchvia routeinjection,
this.props.history) to function components using v5's ownhooks. Once this lands, the v6 migration becomes a mechanical swap
(
useHistory→useNavigate,<Switch>→<Routes>, etc.) withoutneeding synthetic-prop shims or a local
withRouteradapter.Covered in this PR:
LoginPage— swapwithRouterforuseLocation.MovementsPage— class → function;useHistoryfor the guest/kioskredirect; early-return
nullavoids flashing the movement list.ArrivalPaymentPage— class → function;useParams+ mount effect.AdminPage— class → function;useStatefor tabs,useHistoryfor the non-admin redirect.
PaymentMethod— class → function;useLocation+useTranslation.Adds an
initializedstate gate so the?success=truereturn pathfrom hosted checkout doesn't briefly show the selector before the
success screen.
MovementWizardis the last remaining class that readsmatch.paramsand will land in a follow-up PR.
Test plan
/movementsas a regular user renders; as guest/kiosk redirectsto
/without flashing the list./arrival/:key/paymentshows loading spinner then Finish./adminas admin: all enabled tabs render, switching works./adminas non-admin: redirects to/.invoice-recipients,guest-access,kiosk-access,import,privacy) hide/showcorrectly per
__CONF__and redux tokens.?success=true): lands on successscreen with no flash of the selector.
cancelCardPayment.npm run typecheckclean.npm testpasses.