Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replacing injectIntl with useIntl part 3 (#2300)

Browse Source
This commit is contained in:
Jacobo Dominguez
2025-07-18 15:47:18 -06:00
committed by GitHub
parent 215f7280da
commit 4f3904ea4c
14 changed files with 73 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/accessibility-page/AccessibilityPage.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Helmet } from 'react-helmet';
import { Container } from '@openedx/paragon';
import { StudioFooterSlot } from '@edx/frontend-component-footer';
@@ -11,32 +11,29 @@ import AccessibilityForm from './AccessibilityForm';
import { COMMUNITY_ACCESSIBILITY_LINK, ACCESSIBILITY_EMAIL } from './constants';
const AccessibilityPage = ({
// injected
intl,
}) => (
<>
<Helmet>
<title>
{intl.formatMessage(messages.pageTitle, {
siteName: process.env.SITE_NAME,
})}
</title>
</Helmet>
<Header isHiddenMainMenu />
<Container size="xl" classNamae="px-4">
<AccessibilityBody
{...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
/>
<AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
</Container>
<StudioFooterSlot />
</>
);
AccessibilityPage.propTypes = {
// injected
intl: intlShape.isRequired,
const AccessibilityPage = () => {
const intl = useIntl();
return (
<>
<Helmet>
<title>
{intl.formatMessage(messages.pageTitle, {
siteName: process.env.SITE_NAME,
})}
</title>
</Helmet>
<Header isHiddenMainMenu />
<Container size="xl" classNamae="px-4">
<AccessibilityBody
{...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
/>
<AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
</Container>
<StudioFooterSlot />
</>
);
};
export default injectIntl(AccessibilityPage);
AccessibilityPage.propTypes = {};
export default AccessibilityPage;

8
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
View File

@@ -1,6 +1,6 @@
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 { answerOptionProps } from '../../../../../../../data/services/cms/types';
import FeedbackControl from './FeedbackControl';
@@ -15,9 +15,8 @@ export const FeedbackBox = ({
images,
isLibrary,
learningContextId,
// injected
intl,
}) => {
const intl = useIntl();
const props = {
answer,
intl,
@@ -70,7 +69,6 @@ FeedbackBox.propTypes = {
images: PropTypes.shape({}).isRequired,
learningContextId: PropTypes.string.isRequired,
isLibrary: PropTypes.bool.isRequired,
intl: intlShape.isRequired,
};
export default injectIntl(FeedbackBox);
export default FeedbackBox;

4
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { connect } from 'react-redux';
import {
Button, Collapsible,
@@ -228,4 +228,4 @@ export const mapDispatchToProps = {
};
export const SettingsWidgetInternal = SettingsWidget; // For testing only
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SettingsWidget));
export default connect(mapStateToProps, mapDispatchToProps)(SettingsWidget);

9
src/editors/containers/TextEditor/index.jsx
View File

@@ -6,7 +6,7 @@ import {
Spinner,
Toast,
} from '@openedx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import { actions, selectors } from '../../data/redux';
@@ -32,9 +32,8 @@ const TextEditor = ({
learningContextId,
images,
isLibrary,
// inject
intl,
}) => {
const intl = useIntl();
const { editorRef, refReady, setEditorRef } = prepareEditorRef();
const initialContent = blockValue ? blockValue.data.data : '';
const newContent = replaceStaticWithAsset({
@@ -123,8 +122,6 @@ TextEditor.propTypes = {
learningContextId: PropTypes.string, // This should be required but is NULL when the store is in initial state :/
images: PropTypes.shape({}).isRequired,
isLibrary: PropTypes.bool.isRequired,
// inject
intl: intlShape.isRequired,
};
export const mapStateToProps = (state) => ({
@@ -144,4 +141,4 @@ export const mapDispatchToProps = {
};
export const TextEditorInternal = TextEditor; // For testing only
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextEditor));
export default connect(mapStateToProps, mapDispatchToProps)(TextEditor);

3
src/editors/containers/TextEditor/index.test.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen, initializeMocks } from '@src/testUtils';
import { formatMessage } from '../../testUtils';
import { actions, selectors } from '../../data/redux';
import { RequestKeys } from '../../data/constants/requests';
import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.';
@@ -53,8 +52,6 @@ describe('TextEditor', () => {
learningContextId: 'course+org+run',
images: {},
isLibrary: false,
// inject
intl: { formatMessage },
};
afterAll(() => jest.restoreAllMocks());

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
View File

@@ -1,4 +1,4 @@
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon } from '@openedx/paragon';
import { ClosedCaptionOff, ClosedCaption } from '@openedx/paragon/icons';
import PropTypes from 'prop-types';
@@ -6,7 +6,8 @@ import React from 'react';
import messages from '../messages';
import { hooks as transcriptHooks } from '../TranscriptWidget';
const LanguageNamesWidget = ({ transcripts, intl }) => {
const LanguageNamesWidget = ({ transcripts }) => {
const intl = useIntl();
let icon = ClosedCaptionOff;
const hasTranscripts = transcriptHooks.hasTranscripts(transcripts);
let message = intl.formatMessage(messages.noTranscriptsAdded);
@@ -25,8 +26,7 @@ const LanguageNamesWidget = ({ transcripts, intl }) => {
};
LanguageNamesWidget.propTypes = {
intl: intlShape.isRequired,
transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export default injectIntl(LanguageNamesWidget);
export default LanguageNamesWidget;

7
src/export-page/export-modal-error/ExportModalError.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { useDispatch, useSelector } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import PropTypes from 'prop-types';
@@ -11,9 +11,9 @@ import { updateIsErrorModalOpen } from '../data/slice';
import messages from './messages';
const ExportModalError = ({
intl,
courseId,
}) => {
const intl = useIntl();
const dispatch = useDispatch();
const isErrorModalOpen = useSelector(getIsErrorModalOpen);
const { msg: errorMessage, unitUrl: unitErrorUrl } = useSelector(getError);
@@ -47,10 +47,9 @@ const ExportModalError = ({
};
ExportModalError.propTypes = {
intl: intlShape.isRequired,
courseId: PropTypes.string.isRequired,
};
ExportModalError.defaultProps = {};
export default injectIntl(ExportModalError);
export default ExportModalError;

9
src/files-and-videos/files-page/FileValidationModal.jsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import {
ActionRow,
Button,
@@ -14,9 +14,8 @@ import messages from './messages';
const FileValidationModal = ({
handleFileOverwrite,
// injected
intl,
}) => {
const intl = useIntl();
const [isOpen, open, close] = useToggle();
const { duplicateFiles } = useSelector(state => state.assets);
@@ -61,8 +60,6 @@ const FileValidationModal = ({
FileValidationModal.propTypes = {
handleFileOverwrite: PropTypes.func.isRequired,
// injected
intl: intlShape.isRequired,
};
export default injectIntl(FileValidationModal);
export default FileValidationModal;

9
src/files-and-videos/files-page/FilesPage.jsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { CheckboxFilter, Container } from '@openedx/paragon';
import Placeholder from '../../editors/Placeholder';
@@ -36,9 +36,8 @@ import './FilesPage.scss';
const FilesPage = ({
courseId,
// injected
intl,
}) => {
const intl = useIntl();
const dispatch = useDispatch();
const courseDetails = useModel('courseDetails', courseId);
document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
@@ -222,8 +221,6 @@ const FilesPage = ({
FilesPage.propTypes = {
courseId: PropTypes.string.isRequired,
// injected
intl: intlShape.isRequired,
};
export default injectIntl(FilesPage);
export default FilesPage;

14
src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
View File

@@ -1,11 +1,6 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
FormattedMessage,
FormattedDate,
injectIntl,
intlShape,
} from '@edx/frontend-platform/i18n';
import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
import { Button, Stack } from '@openedx/paragon';
import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
import SelectableBox from '../../../editors/sharedComponents/SelectableBox';
@@ -25,9 +20,8 @@ const OrderTranscriptForm = ({
transcriptionPlans,
errorMessages,
transcriptStatus,
// injected
intl,
}) => {
const intl = useIntl();
const [data, setData] = useState(activeTranscriptPreferences || { videoSourceLanguage: '' });
const [validCieloTranscriptionPlan, validThreePlayTranscriptionPlan] = checkTranscriptionPlans(transcriptionPlans);
@@ -200,12 +194,10 @@ OrderTranscriptForm.propTypes = {
languages: PropTypes.shape({}),
}).isRequired,
}).isRequired,
// injected
intl: intlShape.isRequired,
};
OrderTranscriptForm.defaultProps = {
activeTranscriptPreferences: null,
};
export default injectIntl(OrderTranscriptForm);
export default OrderTranscriptForm;

3
src/generic/course-stepper/index.jsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { injectIntl } from '@edx/frontend-platform/i18n';
import {
Settings as SettingsIcon,
ManageHistory as SuccessIcon,
@@ -115,4 +114,4 @@ CourseStepper.propTypes = {
hasError: PropTypes.bool,
};
export default injectIntl(CourseStepper);
export default CourseStepper;

1
src/optimizer-page/CourseOptimizerPage.tsx
View File

@@ -180,6 +180,7 @@ const CourseOptimizerPage: FC<{ courseId: string }> = ({ courseId }) => {
<CourseStepper
// @ts-ignore
steps={courseStepperSteps}
// @ts-ignore
activeKey={currentStage}
hasError={currentStage === 1 && !!errorMessage}
errorMessage={errorMessage}

37
src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
View File

@@ -1,6 +1,6 @@
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 FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
import messages from '../../messages';
import AppConfigFormDivider from './AppConfigFormDivider';
@@ -8,30 +8,31 @@ import AppConfigFormDivider from './AppConfigFormDivider';
const AnonymousPostingFields = ({
onBlur,
onChange,
intl,
values,
}) => (
<>
<h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
<AppConfigFormDivider />
<FormSwitchGroup
onChange={onChange}
onBlur={onBlur}
id="allowAnonymousPostsPeers"
checked={values.allowAnonymousPostsPeers}
label={intl.formatMessage(messages.allowAnonymousPostsPeersLabel)}
helpText={intl.formatMessage(messages.allowAnonymousPostsPeersHelp)}
/>
</>
);
}) => {
const intl = useIntl();
return (
<>
<h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
<AppConfigFormDivider />
<FormSwitchGroup
onChange={onChange}
onBlur={onBlur}
id="allowAnonymousPostsPeers"
checked={values.allowAnonymousPostsPeers}
label={intl.formatMessage(messages.allowAnonymousPostsPeersLabel)}
helpText={intl.formatMessage(messages.allowAnonymousPostsPeersHelp)}
/>
</>
);
};
AnonymousPostingFields.propTypes = {
onBlur: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
intl: intlShape.isRequired,
values: PropTypes.shape({
allowAnonymousPostsPeers: PropTypes.bool,
}).isRequired,
};
export default injectIntl(AnonymousPostingFields);
export default AnonymousPostingFields;

7
src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import { useFormikContext } from 'formik';
import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
import messages from '../../messages';
@@ -10,9 +10,9 @@ import ConfirmationPopup from '../../../../../generic/ConfirmationPopup';
const InContextDiscussionFields = ({
onBlur,
onChange,
intl,
values,
}) => {
const intl = useIntl();
const {
setFieldValue,
} = useFormikContext();
@@ -67,11 +67,10 @@ const InContextDiscussionFields = ({
InContextDiscussionFields.propTypes = {
onBlur: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
intl: intlShape.isRequired,
values: PropTypes.shape({
enableGradedUnits: PropTypes.bool,
groupAtSubsection: PropTypes.bool,
}).isRequired,
};
export default injectIntl(InContextDiscussionFields);
export default InContextDiscussionFields;