Upgrade to React Router v7 #4929

sergei-maertens · 2024-12-16T15:06:02Z

We're on v6 with some leftovers from v5, so let's do this before it becomes too painful.

In particular, we need to re-organize a bunch of code to not use the JSX nested routes, and convert everything to (static) routes with elements. This will likely mean moving some submission checks to context & hooks instead of explicit props. Possibly we can tap into the loaders/actions too for better DX.

Steps

Upgrade to v6 with all future flags enabled
Upgrade to v7

Moved component into its own file so in the future we can more easily remove it, and to declutter index.jsx from a package entrypoint. Next, we can export the nested routes from the CoSign package without adding even more weight/content to the file itself in terms of implementation.

…s to routes object State/props are moved into a context provider that wraps around the outlet, taking care of the data loading. Once we're no longer the <Routes> approach, we can investigate what we can do with loaders to pass information/state around.

…omponent (start) The top-level component is responsible for some state management while the child route ./start actually ensures the right component gets rendered. Setting up the tests like this gets the boilerplate out of the way and allows us to test from the user perspective for the more complicated stuff in the cosign component.

…ssion from API

Added test to ensure that the check route with a submission ID in the query params results in the submission summary being disabled for verification.

… require any props Split the state up in the components used to render each route/path, which allows localizing the state. For the synchronization between routes, React context is used.

Moved component into its own file so in the future we can more easily remove it, and to declutter index.jsx from a package entrypoint. Next, we can export the nested routes from the CoSign package without adding even more weight/content to the file itself in terms of implementation.

…s to routes object State/props are moved into a context provider that wraps around the outlet, taking care of the data loading. Once we're no longer the <Routes> approach, we can investigate what we can do with loaders to pass information/state around.

…omponent (start) The top-level component is responsible for some state management while the child route ./start actually ensures the right component gets rendered. Setting up the tests like this gets the boilerplate out of the way and allows us to test from the user perspective for the more complicated stuff in the cosign component.

…ssion from API

Added test to ensure that the check route with a submission ID in the query params results in the submission summary being disabled for verification.

… require any props Split the state up in the components used to render each route/path, which allows localizing the state. For the synchronization between routes, React context is used.

The props are moved to the parent context instead so that the component itself can be statically declared in the routes array.

Moved component into its own file so in the future we can more easily remove it, and to declutter index.jsx from a package entrypoint. Next, we can export the nested routes from the CoSign package without adding even more weight/content to the file itself in terms of implementation.

…s to routes object State/props are moved into a context provider that wraps around the outlet, taking care of the data loading. Once we're no longer the <Routes> approach, we can investigate what we can do with loaders to pass information/state around.

…omponent (start) The top-level component is responsible for some state management while the child route ./start actually ensures the right component gets rendered. Setting up the tests like this gets the boilerplate out of the way and allows us to test from the user perspective for the more complicated stuff in the cosign component.

…ssion from API

… static route declarations

…isn't broken because of previous refactor The Form component sometimes needs to grab the submission from the router state too, in particular to render the payment start page.

Dispatcher actions were obsoleted by earlier refactor work.

…etion state We can infer the submission _complete call/result state from the presence of the status URL in the router state, so we no longer need to pass an onConfirmed callback down to set this in the parent state.

…irmation status view page

…etion state We can infer the submission _complete call/result state from the presence of the status URL in the router state, so we no longer need to pass an onConfirmed callback down to set this in the parent state.

…irmation status view page

…t processing error We can grab the error from the state now and make it disappear when a new submit attempt is made with local component state rather than needing to use or update the context.

It's no longer necessary.

The error handling of the post method is obsoleted because the apiCall helper itself already calls throwForStatus which results in an exception if/when response.ok is false, so this block of code will never execute. This also further simplifies the helper to directly return the status URL, which is the only bit of relevant information returned by the API endpoint.

…into StatusUrlPoller The StatusUrlPoller component is tightly coupled with the particular submission status API endpoint anyway - it already checks specific props to determine whether it's failing or succeeding. Since the failure handlers are the same in both places, we can localize this behaviour/the details in the component itself and only pass the particular route it should redirect/navigate the user to which is responsible for display the error message. This simplifies quite a bit of code. Maybe at some point we can also get rid of the success callback used by the appointments flow.

Replace the reducer with a simple useState - the complex state management was obsoleted by the previous refactors.

…ing into own component Instead of hooking this up to the Form component, we can instead wrap the context provider and let it fetch the config by itself. This way, we slim down the Form component, and get a small performance boost since loading the analytics tool config is not immediately relevant. Since context is used, only when the config loading is resolved will the consumers be re-rendered, which at this point is mostly the AbortButton component. We deliberately don't show a loader when the config is being retrieved as this would block the entire page without good reason and we have a faster time-to-interact this way.

… own component The component was moved from Form.jsx into its own file and imports are updated.

RequireSubmission now always takes the submission from the context and requires children to be specified instead of a render prop/component.

…ing into own component Instead of hooking this up to the Form component, we can instead wrap the context provider and let it fetch the config by itself. This way, we slim down the Form component, and get a small performance boost since loading the analytics tool config is not immediately relevant. Since context is used, only when the config loading is resolved will the consumers be re-rendered, which at this point is mostly the AbortButton component. We deliberately don't show a loader when the config is being retrieved as this would block the entire page without good reason and we have a faster time-to-interact this way.

… own component The component was moved from Form.jsx into its own file and imports are updated.

RequireSubmission now always takes the submission from the context and requires children to be specified instead of a render prop/component.

…ulations from Form component Now that we have all the necessary information available via context, we can encapsulate all the progress indicator render logic in a single component instead of polluting the 'container' Form component with it.

…a central location This should make it easier to map out the URL/route structure and figure out what gets rendered where and when.

We now have a single entry point for the SDK routes that can easily be re-used in tests, storybook and by the actual application. If needed, specific submodule routes can be loaded with their appropriate import paths. One advantage of this is that component files can follow the best practice of only exporting the component as default without also exporting the routes, and the route definitions are no longer in the 'components' folder, which is more semantically correct.

sergei-maertens added topic: frontend triage Issue needs to be validated. Remove this label if the issue considered valid. enhancement topic: tech debt labels Dec 16, 2024

sergei-maertens added this to the Release 3.1.0 milestone Dec 16, 2024

sergei-maertens added owner: dimpact and removed triage Issue needs to be validated. Remove this label if the issue considered valid. labels Jan 6, 2025

sergei-maertens added this to Development Jan 6, 2025

github-project-automation bot moved this to Todo in Development Jan 6, 2025

sergei-maertens self-assigned this Jan 6, 2025

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 7, 2025

🤡 [open-formulieren/open-forms#4929] Mock retrieving summary of submi…

ff93b9d

…ssion from API

sergei-maertens mentioned this issue Jan 7, 2025

Convert cosign v5 react-router routes to data router format open-formulieren/open-forms-sdk#769

Merged

sergei-maertens moved this from Todo to In Progress in Development Jan 8, 2025

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 8, 2025

🤡 [open-formulieren/open-forms#4929] Mock retrieving summary of submi…

bdf214e

…ssion from API

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 8, 2025

✅ [open-formulieren/open-forms#4929] Fix story args

50a59b8

The props are moved to the parent context instead so that the component itself can be statically declared in the routes array.

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 8, 2025

🤡 [open-formulieren/open-forms#4929] Mock retrieving summary of submi…

2b7ce5e

…ssion from API

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

♻️ [open-formulieren/open-forms#4929] Move SubmissionSummary route to…

7b96f50

… static route declarations

sergei-maertens mentioned this issue Jan 17, 2025

React router upgrade part 3 open-formulieren/open-forms-sdk#776

Merged

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

⚰️ [open-formulieren/open-forms#4929] Delete dead code

51d8674

Dispatcher actions were obsoleted by earlier refactor work.

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

✅ [open-formulieren/open-forms#4929] Add tests for flow to success view

3d27813

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

🤡 [open-formulieren/open-forms#4929] Fix payment plugin start mocks

5f43008

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

♻️ [open-formulieren/open-forms#4929] Simplify props for payment/conf…

bd275da

…irmation status view page

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

♻️ [open-formulieren/open-forms#4929] Simplify props for payment/conf…

8bb788d

…irmation status view page

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 17, 2025

⚰️ [open-formulieren/open-forms#4929] Remove onFailure prop

f5da831

It's no longer necessary.

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 18, 2025

🚚 [open-formulieren/open-forms#4929] Move SubmissionProvider into its…

437aca2

… own component The component was moved from Form.jsx into its own file and imports are updated.

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 18, 2025

🚚 [open-formulieren/open-forms#4929] Move SubmissionProvider into its…

f4df338

… own component The component was moved from Form.jsx into its own file and imports are updated.

sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Jan 21, 2025

👌 [open-formulieren/open-forms#4929] PR feedback

49c9615

robinmolen closed this as completed in open-formulieren/open-forms-sdk#776 Jan 21, 2025

github-project-automation bot moved this from In Progress to Done in Development Jan 21, 2025

sergei-maertens reopened this Jan 21, 2025

github-project-automation bot moved this from Done to In Progress in Development Jan 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to React Router v7 #4929

Upgrade to React Router v7 #4929

sergei-maertens commented Dec 16, 2024

Upgrade to React Router v7 #4929

Upgrade to React Router v7 #4929

Comments

sergei-maertens commented Dec 16, 2024