Skip to content

Commit 011c92a

Browse files
author
Ahtesham Quraish
committed
refactor: Replace of injectIntl with useIntl() part 8 #2288 
1 parent 0e1550a commit 011c92a

File tree

13 files changed

+140
-165
lines changed

13 files changed

+140
-165
lines changed

‎src/course-checklist/CourseChecklist.jsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
22
import PropTypes from 'prop-types';
33
import { getConfig } from '@edx/frontend-platform';
4-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
4+
import { useIntl } from '@edx/frontend-platform/i18n';
55
import { Helmet } from 'react-helmet';
66
import { useDispatch, useSelector } from 'react-redux';
77
import { Container, Stack } from '@openedx/paragon';
@@ -17,9 +17,8 @@ import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
1717

1818
const CourseChecklist = ({
1919
courseId,
20-
// injected,
21-
intl,
2220
}) => {
21+
const intl = useIntl();
2322
const dispatch = useDispatch();
2423
const courseDetails = useModel('courseDetails', courseId);
2524
const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true';
@@ -97,8 +96,6 @@ const CourseChecklist = ({
9796

9897
CourseChecklist.propTypes = {
9998
courseId: PropTypes.string.isRequired,
100-
// injected
101-
intl: intlShape.isRequired,
10299
};
103100

104-
export default injectIntl(CourseChecklist);
101+
export default CourseChecklist;

‎src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
2+
import { useIntl } from '@edx/frontend-platform/i18n';
33
import { Form } from '@openedx/paragon';
44
import PropTypes from 'prop-types';
55
import SettingsOption from '../../SettingsOption';
@@ -11,9 +11,8 @@ export const RandomizationCard = ({
1111
randomization,
1212
defaultValue,
1313
updateSettings,
14-
// inject
15-
intl,
1614
}) => {
15+
const intl = useIntl();
1716
const curretRandomization = randomization || defaultValue;
1817
const { summary, handleChange } = useRandomizationSettingStatus({
1918
randomization: curretRandomization,
@@ -56,7 +55,6 @@ RandomizationCard.propTypes = {
5655
defaultValue: PropTypes.string.isRequired,
5756
randomization: PropTypes.string.isRequired,
5857
updateSettings: PropTypes.func.isRequired,
59-
intl: intlShape.isRequired,
6058
};
6159

62-
export default injectIntl(RandomizationCard);
60+
export default RandomizationCard;

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
33
import PropTypes from 'prop-types';
44

55
import { Col, Form } from '@openedx/paragon';
6-
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
6+
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
77

88
import { actions, selectors } from '../../../../../../data/redux';
99
import { keyStore } from '../../../../../../utils';
@@ -21,9 +21,8 @@ const DurationWidget = ({
2121
// redux
2222
duration,
2323
updateField,
24-
// injected
25-
intl,
2624
}) => {
25+
const intl = useIntl();
2726
const {
2827
unsavedDuration,
2928
onBlur,
@@ -88,8 +87,6 @@ DurationWidget.propTypes = {
8887
// redux
8988
duration: PropTypes.objectOf(PropTypes.number).isRequired,
9089
updateField: PropTypes.func.isRequired,
91-
// injected
92-
intl: intlShape.isRequired,
9390
};
9491

9592
export const mapStateToProps = (state) => ({
@@ -101,4 +98,4 @@ export const mapDispatchToProps = {
10198
};
10299

103100
export const DurationWidgetInternal = DurationWidget; // For testing only
104-
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DurationWidget));
101+
export default connect(mapStateToProps, mapDispatchToProps)(DurationWidget);

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { connect } from 'react-redux';
33
import PropTypes from 'prop-types';
44
import {
55
FormattedMessage,
6-
injectIntl,
7-
intlShape,
6+
useIntl,
87
} from '@edx/frontend-platform/i18n';
98
import {
109
Hyperlink,
@@ -20,8 +19,6 @@ import * as hooks from './hooks';
2019
* Collapsible Form widget controlling video thumbnail
2120
*/
2221
const SocialShareWidget = ({
23-
// injected
24-
intl,
2522
// redux
2623
allowVideoSharing,
2724
isLibrary,
@@ -30,6 +27,7 @@ const SocialShareWidget = ({
3027
videoSharingLearnMoreLink,
3128
updateField,
3229
}) => {
30+
const intl = useIntl();
3331
const isSetByCourse = allowVideoSharing.level === 'course';
3432
const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse;
3533
const learnMoreLink = videoSharingLearnMoreLink || 'https://docs.openedx.org/en/latest/educators/how-tos/course_development/social_sharing.html';
@@ -90,8 +88,6 @@ SocialShareWidget.defaultProps = {
9088
};
9189

9290
SocialShareWidget.propTypes = {
93-
// injected
94-
intl: intlShape.isRequired,
9591
// redux
9692
allowVideoSharing: PropTypes.shape({
9793
level: PropTypes.string.isRequired,
@@ -117,4 +113,4 @@ export const mapDispatchToProps = (dispatch) => ({
117113
});
118114

119115
export const SocialShareWidgetInternal = SocialShareWidget; // For testing only
120-
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget));
116+
export default connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget);

‎src/editors/sharedComponents/CodeEditor/index.jsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Button,
66
} from '@openedx/paragon';
77

8-
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
8+
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
99
import messages from './messages';
1010
import './index.scss';
1111

@@ -15,9 +15,8 @@ const CodeEditor = ({
1515
innerRef,
1616
value,
1717
lang,
18-
// injected
19-
intl,
2018
}) => {
19+
const intl = useIntl();
2120
const DOMref = useRef();
2221
const btnRef = useRef();
2322
hooks.createCodeMirrorDomNode({
@@ -49,9 +48,8 @@ CodeEditor.propTypes = {
4948
PropTypes.shape({ current: PropTypes.any }),
5049
]).isRequired,
5150
value: PropTypes.string.isRequired,
52-
intl: intlShape.isRequired,
5351
lang: PropTypes.string.isRequired,
5452
};
5553

5654
export const CodeEditorInternal = CodeEditor; // For testing only
57-
export default injectIntl(CodeEditor);
55+
export default CodeEditor;

‎src/export-page/export-footer/ExportFooter.jsx

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,45 @@
11
import React from 'react';
2-
import {
3-
injectIntl,
4-
intlShape,
5-
} from '@edx/frontend-platform/i18n';
2+
import { useIntl } from '@edx/frontend-platform/i18n';
63
import { Layout } from '@openedx/paragon';
74

85
import messages from './messages';
96

10-
const ExportFooter = ({ intl }) => (
11-
<footer className="mt-4 small">
12-
<Layout
13-
lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
14-
md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
15-
sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
16-
xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
17-
xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
18-
>
19-
<Layout.Element>
20-
<h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
21-
<ul className="export-footer-list">
22-
<li>{intl.formatMessage(messages.exportedDataItem1)}</li>
23-
<li>{intl.formatMessage(messages.exportedDataItem2)}</li>
24-
<li>{intl.formatMessage(messages.exportedDataItem3)}</li>
25-
<li>{intl.formatMessage(messages.exportedDataItem4)}</li>
26-
<li>{intl.formatMessage(messages.exportedDataItem5)}</li>
27-
<li>{intl.formatMessage(messages.exportedDataItem6)}</li>
28-
<li>{intl.formatMessage(messages.exportedDataItem7)}</li>
29-
</ul>
30-
</Layout.Element>
31-
<Layout.Element />
32-
<Layout.Element>
33-
<h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
34-
<ul className="export-footer-list">
35-
<li>{intl.formatMessage(messages.notExportedDataItem1)}</li>
36-
<li>{intl.formatMessage(messages.notExportedDataItem2)}</li>
37-
<li>{intl.formatMessage(messages.notExportedDataItem3)}</li>
38-
<li>{intl.formatMessage(messages.notExportedDataItem4)}</li>
39-
</ul>
40-
</Layout.Element>
41-
</Layout>
42-
</footer>
43-
);
44-
45-
ExportFooter.propTypes = {
46-
intl: intlShape.isRequired,
7+
const ExportFooter = () => {
8+
const intl = useIntl();
9+
return (
10+
<footer className="mt-4 small">
11+
<Layout
12+
lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
13+
md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
14+
sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
15+
xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
16+
xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
17+
>
18+
<Layout.Element>
19+
<h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
20+
<ul className="export-footer-list">
21+
<li>{intl.formatMessage(messages.exportedDataItem1)}</li>
22+
<li>{intl.formatMessage(messages.exportedDataItem2)}</li>
23+
<li>{intl.formatMessage(messages.exportedDataItem3)}</li>
24+
<li>{intl.formatMessage(messages.exportedDataItem4)}</li>
25+
<li>{intl.formatMessage(messages.exportedDataItem5)}</li>
26+
<li>{intl.formatMessage(messages.exportedDataItem6)}</li>
27+
<li>{intl.formatMessage(messages.exportedDataItem7)}</li>
28+
</ul>
29+
</Layout.Element>
30+
<Layout.Element />
31+
<Layout.Element>
32+
<h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
33+
<ul className="export-footer-list">
34+
<li>{intl.formatMessage(messages.notExportedDataItem1)}</li>
35+
<li>{intl.formatMessage(messages.notExportedDataItem2)}</li>
36+
<li>{intl.formatMessage(messages.notExportedDataItem3)}</li>
37+
<li>{intl.formatMessage(messages.notExportedDataItem4)}</li>
38+
</ul>
39+
</Layout.Element>
40+
</Layout>
41+
</footer>
42+
);
4743
};
4844

49-
export default injectIntl(ExportFooter);
45+
export default ExportFooter;

‎src/files-and-videos/generic/FileMenu.jsx

Lines changed: 52 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
3+
import { useIntl } from '@edx/frontend-platform/i18n';
44
import {
55
Dropdown,
66
IconButton,
@@ -19,58 +19,59 @@ const FileMenu = ({
1919
portableUrl,
2020
id,
2121
fileType,
22-
// injected
23-
intl,
24-
}) => (
25-
<Dropdown data-testid={`file-menu-dropdown-${id}`}>
26-
<Dropdown.Toggle
27-
id={`file-menu-dropdown-${id}`}
28-
as={IconButton}
29-
src={MoreHoriz}
30-
iconAs={Icon}
31-
variant="primary"
32-
alt="file-menu-toggle"
33-
/>
34-
<Dropdown.Menu>
35-
{fileType === 'video' ? (
36-
<Dropdown.Item
37-
onClick={() => navigator.clipboard.writeText(id)}
38-
>
39-
{intl.formatMessage(messages.copyVideoIdTitle)}
40-
</Dropdown.Item>
41-
) : (
42-
<>
22+
}) => {
23+
const intl = useIntl();
24+
return (
25+
<Dropdown data-testid={`file-menu-dropdown-${id}`}>
26+
<Dropdown.Toggle
27+
id={`file-menu-dropdown-${id}`}
28+
as={IconButton}
29+
src={MoreHoriz}
30+
iconAs={Icon}
31+
variant="primary"
32+
alt="file-menu-toggle"
33+
/>
34+
<Dropdown.Menu>
35+
{fileType === 'video' ? (
4336
<Dropdown.Item
44-
onClick={() => navigator.clipboard.writeText(portableUrl)}
37+
onClick={() => navigator.clipboard.writeText(id)}
4538
>
46-
{intl.formatMessage(messages.copyStudioUrlTitle)}
47-
</Dropdown.Item>
48-
<Dropdown.Item
49-
onClick={() => navigator.clipboard.writeText(externalUrl)}
50-
>
51-
{intl.formatMessage(messages.copyWebUrlTitle)}
52-
</Dropdown.Item>
53-
<Dropdown.Item onClick={handleLock}>
54-
{locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)}
39+
{intl.formatMessage(messages.copyVideoIdTitle)}
5540
</Dropdown.Item>
56-
</>
57-
)}
58-
<Dropdown.Item onClick={onDownload}>
59-
{intl.formatMessage(messages.downloadTitle)}
60-
</Dropdown.Item>
61-
<Dropdown.Item onClick={openAssetInfo}>
62-
{intl.formatMessage(messages.infoTitle)}
63-
</Dropdown.Item>
64-
<Dropdown.Divider />
65-
<Dropdown.Item
66-
data-testid="open-delete-confirmation-button"
67-
onClick={openDeleteConfirmation}
68-
>
69-
{intl.formatMessage(messages.deleteTitle)}
70-
</Dropdown.Item>
71-
</Dropdown.Menu>
72-
</Dropdown>
73-
);
41+
) : (
42+
<>
43+
<Dropdown.Item
44+
onClick={() => navigator.clipboard.writeText(portableUrl)}
45+
>
46+
{intl.formatMessage(messages.copyStudioUrlTitle)}
47+
</Dropdown.Item>
48+
<Dropdown.Item
49+
onClick={() => navigator.clipboard.writeText(externalUrl)}
50+
>
51+
{intl.formatMessage(messages.copyWebUrlTitle)}
52+
</Dropdown.Item>
53+
<Dropdown.Item onClick={handleLock}>
54+
{locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)}
55+
</Dropdown.Item>
56+
</>
57+
)}
58+
<Dropdown.Item onClick={onDownload}>
59+
{intl.formatMessage(messages.downloadTitle)}
60+
</Dropdown.Item>
61+
<Dropdown.Item onClick={openAssetInfo}>
62+
{intl.formatMessage(messages.infoTitle)}
63+
</Dropdown.Item>
64+
<Dropdown.Divider />
65+
<Dropdown.Item
66+
data-testid="open-delete-confirmation-button"
67+
onClick={openDeleteConfirmation}
68+
>
69+
{intl.formatMessage(messages.deleteTitle)}
70+
</Dropdown.Item>
71+
</Dropdown.Menu>
72+
</Dropdown>
73+
);
74+
};
7475

7576
FileMenu.propTypes = {
7677
externalUrl: PropTypes.string,
@@ -82,8 +83,6 @@ FileMenu.propTypes = {
8283
portableUrl: PropTypes.string,
8384
id: PropTypes.string.isRequired,
8485
fileType: PropTypes.string.isRequired,
85-
// injected
86-
intl: intlShape.isRequired,
8786
};
8887

8988
FileMenu.defaultProps = {
@@ -93,4 +92,4 @@ FileMenu.defaultProps = {
9392
portableUrl: null,
9493
};
9594

96-
export default injectIntl(FileMenu);
95+
export default FileMenu;

0 commit comments

Comments
 (0)