Skip to content

Replace the depracated injectIntl with the useIntl() hook #621

@diana-villalvazo-wgu

Description

@diana-villalvazo-wgu

Description

Replace all usages of the deprecated injectIntl HOC with the useIntl() hook from @edx/frontend-platform/i18n. This will modernize our codebase and ensure compatibility with future updates.

Please update affected components accordingly, and review or update any related tests to ensure they work correctly and ensure coverage for the new implementation.

Example refactor:

Before:

import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Alert } from '@openedx/paragon';

import messages from '../messages';

const ErrorAlert = ({ intl }) => (
  <Alert variant="danger">
    {intl.formatMessage(messages.supportText)}
  </Alert>
);

ErrorAlert.propTypes = {
  intl: intlShape.isRequired,
};

export default injectIntl(ErrorAlert);

After:

import { useIntl } from '@edx/frontend-platform/i18n';
import { Alert } from '@openedx/paragon';

import messages from '../messages';

const ErrorAlert = () => {
  const intl = useIntl();
  return (
    <Alert variant="danger">
      {intl.formatMessage(messages.supportText)}
    </Alert>
  );
};

export default ErrorAlert;

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions