refactor: Replace of injectIntl with useIntl() part 5 #2285

Author: Ahtesham Quraish

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
-  injectIntl,
 } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -163,4 +162,4 @@ export const mapDispatchToProps = (dispatch) => ({
 });
 
 export const LicenseDetailsInternal = LicenseDetails; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseDetails));
+export default connect(mapStateToProps, mapDispatchToProps)(LicenseDetails);

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx

@@ -3,8 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import {
   Button,
@@ -25,8 +24,6 @@ import LicenseDisplay from './LicenseDisplay';
  * Collapsible Form widget controlling video license type and details
  */
 const LicenseWidget = ({
-  // injected
-  intl,
   // redux
   isLibrary,
   licenseType,
@@ -35,6 +32,7 @@ const LicenseWidget = ({
   courseLicenseDetails,
   updateField,
 }) => {
+  const intl = useIntl();
   const { license, details, level } = hooks.determineLicense({
     isLibrary,
     licenseType,
@@ -85,8 +83,6 @@ const LicenseWidget = ({
 };
 
 LicenseWidget.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
   // redux
   isLibrary: PropTypes.bool.isRequired,
   licenseType: PropTypes.string.isRequired,
@@ -109,4 +105,4 @@ export const mapDispatchToProps = (dispatch) => ({
 });
 
 export const LicenseWidgetInternal = LicenseWidget; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseWidget));
+export default connect(mapStateToProps, mapDispatchToProps)(LicenseWidget);

src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Stack } from '@openedx/paragon';
-import { injectIntl, FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getFileSizeToClosestByte } from '../../../utils';
 import { getFormattedDuration } from '../data/utils';
 import messages from './messages';
@@ -47,4 +47,4 @@ InfoTab.defaultProps = {
   video: {},
 };
 
-export default injectIntl(InfoTab);
+export default InfoTab;

src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Stack, TransitionReplace } from '@openedx/paragon';
 import FormDropdown from './FormDropdown';
 import { getFidelityOptions } from '../data/utils';
@@ -12,9 +12,8 @@ const Cielo24Form = ({
   data,
   setData,
   transcriptionPlan,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   if (hasTranscriptCredentials) {
     const { fidelity } = transcriptionPlan;
     const selectedLanguage = data.preferredLanguages ? data.preferredLanguages : '';
@@ -118,8 +117,6 @@ Cielo24Form.propTypes = {
     turnaround: PropTypes.shape({}),
     fidelity: PropTypes.shape({}),
   }).isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(Cielo24Form);
+export default Cielo24Form;

src/generic/configure-modal/UnitTab.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Form } from '@openedx/paragon';
 import {
-  FormattedMessage, injectIntl, useIntl,
+  FormattedMessage, useIntl,
 } from '@edx/frontend-platform/i18n';
 import { Field } from 'formik';
 import classNames from 'classnames';
@@ -198,4 +198,4 @@ UnitTab.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(UnitTab);
+export default UnitTab;

src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, TransitionReplace, Hyperlink, Alert,
 } from '@openedx/paragon';
@@ -12,7 +12,8 @@ import messages from '../../messages';
 import AppConfigFormDivider from './AppConfigFormDivider';
 import { OpenedXConfigFormContext } from '../openedx/OpenedXConfigFormProvider';
 
-const DivisionByGroupFields = ({ intl }) => {
+const DivisionByGroupFields = () => {
+  const intl = useIntl();
   const { validDiscussionTopics } = useContext(OpenedXConfigFormContext);
   const {
     handleChange,
@@ -142,8 +143,4 @@ const DivisionByGroupFields = ({ intl }) => {
   );
 };
 
-DivisionByGroupFields.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(DivisionByGroupFields);
+export default DivisionByGroupFields;

src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useCallback } from 'react';
 import { Add } from '@openedx/paragon/icons';
 import { Button } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FieldArray, useFormikContext } from 'formik';
 import { v4 as uuid } from 'uuid';
 import { remove as removeElements, uniq, uniqBy } from 'lodash';
@@ -10,7 +10,8 @@ import TopicItem from './TopicItem';
 import { OpenedXConfigFormContext } from '../../openedx/OpenedXConfigFormProvider';
 import { filterItemFromObject } from '../../../utils';
 
-const DiscussionTopics = ({ intl }) => {
+const DiscussionTopics = () => {
+  const intl = useIntl();
   const {
     values: appConfig,
     validateForm,
@@ -92,8 +93,4 @@ const DiscussionTopics = ({ intl }) => {
   );
 };
 
-DiscussionTopics.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(DiscussionTopics);
+export default DiscussionTopics;

src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { useFormikContext } from 'formik';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Card, Form,
 } from '@openedx/paragon';
@@ -13,14 +13,14 @@ import messages from '../../../messages';
 import FieldFeedback from '../../../../../../generic/FieldFeedback';
 
 const TopicItem = ({
-  intl,
   index,
   id,
   name,
   onDelete,
   hasError,
   onFocus,
 }) => {
+  const intl = useIntl();
   const {
     handleChange, handleBlur, errors,
   } = useFormikContext();
@@ -139,9 +139,8 @@ TopicItem.propTypes = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   onDelete: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
   hasError: PropTypes.bool.isRequired,
   onFocus: PropTypes.func.isRequired,
 };
 
-export default injectIntl(TopicItem);
+export default TopicItem;

src/pages-and-resources/discussions/app-list/AppListNextButton.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -8,7 +8,8 @@ import { DiscussionsContext } from '../DiscussionsProvider';
 
 import messages from './messages';
 
-const AppListNextButton = ({ intl }) => {
+const AppListNextButton = () => {
+  const intl = useIntl();
   const { selectedAppId } = useSelector(state => state.discussions);
   const { path: discussionsPath } = useContext(DiscussionsContext);
   const navigate = useNavigate();
@@ -27,8 +28,4 @@ const AppListNextButton = ({ intl }) => {
   );
 };
 
-AppListNextButton.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AppListNextButton);
+export default AppListNextButton;

src/schedule-and-details/introducing-section/introduction-video/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Button, Card } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
-const IntroductionVideo = ({ intl, introVideo, onChange }) => {
+const IntroductionVideo = ({ introVideo, onChange }) => {
+  const intl = useIntl();
   const embedVideoUrl = introVideo
     ? `//www.youtube.com/embed/${introVideo}`
     : '';
@@ -56,9 +57,8 @@ IntroductionVideo.defaultProps = {
 };
 
 IntroductionVideo.propTypes = {
-  intl: intlShape.isRequired,
   introVideo: PropTypes.string,
   onChange: PropTypes.func.isRequired,
 };
 
-export default injectIntl(IntroductionVideo);
+export default IntroductionVideo;