Replace injectIntl with the useIntl() hook

src/components/Certificate/Certificate.jsx

@@ -1,16 +1,10 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  FormattedDate,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, DropdownButton, Dropdown } from '@openedx/paragon';
 import messages from './messages';
 
 function Certificate({
-  intl,
   type,
   credential_title: certificateTitle,
   credential_org: certificateOrg,
@@ -19,6 +13,7 @@ function Certificate({
   handleCreate,
   storages = [],
 }) {
+  const intl = useIntl();
   const showSingleAction = storages.length === 1;
 
   const renderCreationButtons = () => (
@@ -75,7 +70,6 @@ function Certificate({
 }
 
 Certificate.propTypes = {
-  intl: intlShape.isRequired,
   type: PropTypes.oneOf(['program', 'course']),
   credential_title: PropTypes.string.isRequired,
   credential_org: PropTypes.string.isRequired,
@@ -90,4 +84,4 @@ Certificate.propTypes = {
   ).isRequired,
 };
 
-export default injectIntl(Certificate);
+export default Certificate;

src/components/CertificateModal/CertificateModal.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { BrowserView, MobileView, isBrowser } from 'react-device-detect';
 import {
   ActionRow, Button, Row, StandardModal,
@@ -12,7 +11,7 @@ import appStoreImg from '../../assets/images/appStore.png';
 import googlePlayImg from '../../assets/images/googleplay.png';
 
 function CertificateModal({
-  intl, isOpen, close, data,
+  isOpen, close, data,
 }) {
   const {
     deeplink,
@@ -22,6 +21,8 @@ function CertificateModal({
     error,
   } = data;
 
+  const intl = useIntl();
+
   if (error) {
     return (
       <StandardModal title="Failure" isOpen={isOpen} onClose={close} size="lg">
@@ -172,10 +173,9 @@ function CertificateModal({
 }
 
 CertificateModal.propTypes = {
-  intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
   close: PropTypes.func.isRequired,
   data: PropTypes.shape.isRequired,
 };
 
-export default injectIntl(CertificateModal);
+export default CertificateModal;

src/components/CertificatesList/CertificatesList.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ChevronLeft, Info } from '@openedx/paragon/icons';
 import {
   Alert, Hyperlink, Row, useToggle,
 } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform/config';
 import { logError } from '@edx/frontend-platform/logging';
@@ -19,7 +19,8 @@ import messages from './messages';
 import CertificateModal from '../CertificateModal';
 import Certificate from '../Certificate';
 
-function CertificatesList({ intl }) {
+function CertificatesList() {
+  const intl = useIntl();
   const [certificatesAreLoaded, setCertificatesAreLoaded] = useState(false);
   const [dataLoadingIssue, setDataLoadingIssue] = useState('');
   const [certificates, setCertificates] = useState({
@@ -206,8 +207,4 @@ function CertificatesList({ intl }) {
   );
 }
 
-CertificatesList.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CertificatesList);
+export default CertificatesList;

src/components/Head/Head.jsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import { Helmet } from 'react-helmet-async';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 import messages from './messages';
 
-function Head({ intl }) {
+function Head() {
+  const intl = useIntl();
+
   return (
     <Helmet>
       <title>
@@ -16,8 +17,4 @@ function Head({ intl }) {
   );
 }
 
-Head.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(Head);
+export default Head;

src/components/NavigationBar/NavigationBar.jsx

@@ -1,14 +1,14 @@
-import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tabs, Tab } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { ROUTES } from '../../constants';
 
 import messages from './messages';
 
-function NavigationBar({ intl }) {
+function NavigationBar() {
+  const intl = useIntl();
   const NavigationTabs = [
     {
       id: 'learnerRecords',
@@ -43,8 +43,4 @@ function NavigationBar({ intl }) {
   ) : null;
 }
 
-NavigationBar.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(NavigationBar);
+export default NavigationBar;

src/components/ProgramRecord/ProgramRecordHeader.jsx

@@ -1,13 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Badge } from '@openedx/paragon';
 
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
 function ProgramRecordHeader({
-  learner, program, platform, intl,
+  learner, program, platform,
 }) {
+  const intl = useIntl();
   return (
     <header className="program-record-header">
       <div className="program-headings">
@@ -117,7 +117,6 @@ ProgramRecordHeader.propTypes = {
     last_updated: PropTypes.string,
   }).isRequired,
   platform: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(ProgramRecordHeader);
+export default ProgramRecordHeader;

src/components/ProgramRecord/ProgramRecordTable.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { DataTable, Badge } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
-function ProgramRecordTable({ grades, intl }) {
+function ProgramRecordTable({ grades }) {
+  const intl = useIntl();
   const formatGradeData = (data) => (
     data.map(grade => ({
       ...grade,
@@ -82,7 +82,6 @@ function ProgramRecordTable({ grades, intl }) {
 ProgramRecordTable.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   grades: PropTypes.arrayOf(PropTypes.object).isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(ProgramRecordTable);
+export default ProgramRecordTable;