diff --git a/src/components/Certificate/Certificate.jsx b/src/components/Certificate/Certificate.jsx index add0c679..7e0e8836 100644 --- a/src/components/Certificate/Certificate.jsx +++ b/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; diff --git a/src/components/CertificateModal/CertificateModal.jsx b/src/components/CertificateModal/CertificateModal.jsx index 9766763e..7ee0deb4 100644 --- a/src/components/CertificateModal/CertificateModal.jsx +++ b/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 ( @@ -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; diff --git a/src/components/CertificatesList/CertificatesList.jsx b/src/components/CertificatesList/CertificatesList.jsx index 97654f0e..d8f69daa 100644 --- a/src/components/CertificatesList/CertificatesList.jsx +++ b/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; diff --git a/src/components/Head/Head.jsx b/src/components/Head/Head.jsx index a1419363..f196e578 100644 --- a/src/components/Head/Head.jsx +++ b/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 ( @@ -16,8 +17,4 @@ function Head({ intl }) { ); } -Head.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(Head); +export default Head; diff --git a/src/components/NavigationBar/NavigationBar.jsx b/src/components/NavigationBar/NavigationBar.jsx index 308a97cb..6a57d124 100644 --- a/src/components/NavigationBar/NavigationBar.jsx +++ b/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; diff --git a/src/components/ProgramRecord/ProgramRecordHeader.jsx b/src/components/ProgramRecord/ProgramRecordHeader.jsx index 4b52c717..3de980a8 100644 --- a/src/components/ProgramRecord/ProgramRecordHeader.jsx +++ b/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; diff --git a/src/components/ProgramRecord/ProgramRecordTable.jsx b/src/components/ProgramRecord/ProgramRecordTable.jsx index ae2c5047..540d95f1 100644 --- a/src/components/ProgramRecord/ProgramRecordTable.jsx +++ b/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;