Skip to content

Commit

Permalink
Fix "in progress" and "error" states of UpdateStatus component
Browse files Browse the repository at this point in the history
This bug was likely introduced when upgrading to React Router 6. The `UpdateStatus` component needed access to the router's state in order to block navigation (and show a confirmation dialog to the user) when there are unsaved changes. With the upgrade to React Router 6, this required wrapping class components in a custom `withRouter` HOC. The `UpdateStatus` component exposes the different states (`SUCCESS`, `ERROR`, `IN_PROGRESS`) as static class fields (e.g. `UpdateStatus.IN_PROGRESS`). When wrapping the component in `withRouter`, those static class fields aren't forwarded, i.e. `UpdateStatus.IN_PROGRESS` is undefined.

However, at the moment, blocking navigation isn't possible anyway (at least temporarily), as React Router v6 has removed support for relevant features required to implement this (although it will hopefully return soon [1]). So for now, I have simply removed `withRouter` altogether. Once blocking navigation is possible again, we should refactor this component to a function component and use the hooks provided by React Router.

[1] remix-run/react-router#8139
  • Loading branch information
tillprochaska authored and Rosencrantz committed Jan 9, 2023
1 parent 8a37ca9 commit c7ad634
Showing 1 changed file with 2 additions and 6 deletions.
8 changes: 2 additions & 6 deletions ui/src/components/common/UpdateStatus.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,10 @@
// future support is planned in future v6 releases
// see https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported for reference

import React, { PureComponent } from 'react';
import { compose } from 'redux';
import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
// import { Prompt } from 'react-router';
import { Intent, Spinner, Tag } from '@blueprintjs/core';

import withRouter from 'app/withRouter';

const messages = defineMessages({
status_success: {
id: 'entity.status.success',
Expand Down Expand Up @@ -100,4 +96,4 @@ class UpdateStatus extends PureComponent {
}
}

export default compose(withRouter, injectIntl)(UpdateStatus);
export default injectIntl(UpdateStatus);

0 comments on commit c7ad634

Please sign in to comment.