Skip to content

Commit 4fa6cae

Browse files
jacobo-dominguez-wgujacobo-dominguez-wgu
committed
refactor: replacing injectIntl with useIntl() part 2
1 parent 715cc60 commit 4fa6cae

File tree

10 files changed

+206
-226
lines changed

10 files changed

+206
-226
lines changed

‎src/containers/CriterionContainer/CriterionFeedback.jsx

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

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

88
import { feedbackRequirement } from 'data/services/lms/constants';
99
import { actions, selectors } from 'data/redux';
@@ -12,60 +12,56 @@ import messages from './messages';
1212
/**
1313
* <CriterionFeedback />
1414
*/
15-
export class CriterionFeedback extends React.Component {
16-
constructor(props) {
17-
super(props);
18-
this.onChange = this.onChange.bind(this);
19-
}
15+
export const CriterionFeedback = ({
16+
orderNum,
17+
isGrading,
18+
config,
19+
setValue,
20+
value,
21+
isInvalid,
22+
}) => {
23+
const intl = useIntl();
2024

21-
onChange(event) {
22-
this.props.setValue({
25+
const onChange = (event) => {
26+
setValue({
2327
value: event.target.value,
24-
orderNum: this.props.orderNum,
28+
orderNum,
2529
});
26-
}
30+
};
2731

28-
get commentMessage() {
29-
const { config, isGrading } = this.props;
30-
let commentMessage = this.translate(isGrading ? messages.addComments : messages.comments);
32+
const translate = (msg) => intl.formatMessage(msg);
33+
34+
const getCommentMessage = () => {
35+
let commentMessage = translate(isGrading ? messages.addComments : messages.comments);
3136
if (config === feedbackRequirement.optional) {
32-
commentMessage += ` ${this.translate(messages.optional)}`;
37+
commentMessage += ` ${translate(messages.optional)}`;
3338
}
3439
return commentMessage;
35-
}
40+
};
3641

37-
translate = (msg) => this.props.intl.formatMessage(msg);
38-
39-
render() {
40-
const {
41-
config,
42-
isGrading,
43-
value,
44-
isInvalid,
45-
} = this.props;
46-
if (config === feedbackRequirement.disabled) {
47-
return null;
48-
}
49-
return (
50-
<Form.Group isInvalid={this.feedbackIsInvalid}>
51-
<Form.Control
52-
as="textarea"
53-
className="criterion-feedback feedback-input"
54-
data-testid="criterion-feedback-input"
55-
floatingLabel={this.commentMessage}
56-
value={value}
57-
onChange={this.onChange}
58-
disabled={!isGrading}
59-
/>
60-
{isInvalid && (
61-
<Form.Control.Feedback type="invalid" className="feedback-error-msg" data-testid="criterion-feedback-error-msg">
62-
{this.translate(messages.criterionFeedbackError)}
63-
</Form.Control.Feedback>
64-
)}
65-
</Form.Group>
66-
);
42+
if (config === feedbackRequirement.disabled) {
43+
return null;
6744
}
68-
}
45+
46+
return (
47+
<Form.Group isInvalid={isInvalid}>
48+
<Form.Control
49+
as="textarea"
50+
className="criterion-feedback feedback-input"
51+
data-testid="criterion-feedback-input"
52+
floatingLabel={getCommentMessage()}
53+
value={value}
54+
onChange={onChange}
55+
disabled={!isGrading}
56+
/>
57+
{isInvalid && (
58+
<Form.Control.Feedback type="invalid" className="feedback-error-msg" data-testid="criterion-feedback-error-msg">
59+
{translate(messages.criterionFeedbackError)}
60+
</Form.Control.Feedback>
61+
)}
62+
</Form.Group>
63+
);
64+
};
6965

7066
CriterionFeedback.defaultProps = {
7167
value: '',
@@ -74,8 +70,6 @@ CriterionFeedback.defaultProps = {
7470
CriterionFeedback.propTypes = {
7571
orderNum: PropTypes.number.isRequired,
7672
isGrading: PropTypes.bool.isRequired,
77-
// injected
78-
intl: intlShape.isRequired,
7973
// redux
8074
config: PropTypes.string.isRequired,
8175
setValue: PropTypes.func.isRequired,
@@ -93,6 +87,4 @@ export const mapDispatchToProps = {
9387
setValue: actions.grading.setCriterionFeedback,
9488
};
9589

96-
export default injectIntl(
97-
connect(mapStateToProps, mapDispatchToProps)(CriterionFeedback),
98-
);
90+
export default connect(mapStateToProps, mapDispatchToProps)(CriterionFeedback);

‎src/containers/CriterionContainer/CriterionFeedback.test.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
feedbackRequirement,
77
gradeStatuses,
88
} from 'data/services/lms/constants';
9-
import { formatMessage } from 'testUtils';
109
import {
1110
CriterionFeedback,
1211
mapStateToProps,
@@ -38,7 +37,6 @@ jest.unmock('react');
3837

3938
describe('Criterion Feedback', () => {
4039
const props = {
41-
intl: { formatMessage },
4240
orderNum: 1,
4341
config: 'config string',
4442
isGrading: true,

‎src/containers/CriterionContainer/RadioCriterion.jsx

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

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

88
import { actions, selectors } from 'data/redux';
99
import messages from './messages';
1010

1111
/**
1212
* <RadioCriterion />
1313
*/
14-
export class RadioCriterion extends React.Component {
15-
constructor(props) {
16-
super(props);
17-
this.onChange = this.onChange.bind(this);
18-
}
14+
export const RadioCriterion = ({
15+
orderNum,
16+
isGrading,
17+
config,
18+
data,
19+
setCriterionOption,
20+
isInvalid,
21+
}) => {
22+
const intl = useIntl();
1923

20-
onChange(event) {
21-
this.props.setCriterionOption({
22-
orderNum: this.props.orderNum,
24+
const onChange = (event) => {
25+
setCriterionOption({
26+
orderNum,
2327
value: event.target.value,
2428
});
25-
}
29+
};
2630

27-
render() {
28-
const {
29-
config,
30-
data,
31-
intl,
32-
isGrading,
33-
isInvalid,
34-
} = this.props;
35-
return (
36-
<Form.RadioSet name={config.name} value={data}>
37-
{config.options.map((option) => (
38-
<Form.Radio
39-
className="criteria-option align-items-center"
40-
key={option.name}
41-
value={option.name}
42-
description={intl.formatMessage(messages.optionPoints, { points: option.points })}
43-
onChange={this.onChange}
44-
disabled={!isGrading}
45-
style={{ flexShrink: 0 }}
46-
>
47-
{option.label}
48-
</Form.Radio>
49-
))}
50-
{isInvalid && (
51-
<Form.Control.Feedback type="invalid" className="feedback-error-msg">
52-
{intl.formatMessage(messages.rubricSelectedError)}
53-
</Form.Control.Feedback>
54-
)}
55-
</Form.RadioSet>
56-
);
57-
}
58-
}
31+
return (
32+
<Form.RadioSet name={config.name} value={data}>
33+
{config.options.map((option) => (
34+
<Form.Radio
35+
className="criteria-option align-items-center"
36+
key={option.name}
37+
value={option.name}
38+
description={intl.formatMessage(messages.optionPoints, { points: option.points })}
39+
onChange={onChange}
40+
disabled={!isGrading}
41+
style={{ flexShrink: 0 }}
42+
>
43+
{option.label}
44+
</Form.Radio>
45+
))}
46+
{isInvalid && (
47+
<Form.Control.Feedback type="invalid" className="feedback-error-msg">
48+
{intl.formatMessage(messages.rubricSelectedError)}
49+
</Form.Control.Feedback>
50+
)}
51+
</Form.RadioSet>
52+
);
53+
};
5954

6055
RadioCriterion.defaultProps = {
6156
data: {
@@ -67,8 +62,6 @@ RadioCriterion.defaultProps = {
6762
RadioCriterion.propTypes = {
6863
orderNum: PropTypes.number.isRequired,
6964
isGrading: PropTypes.bool.isRequired,
70-
// injected
71-
intl: intlShape.isRequired,
7265
// redux
7366
config: PropTypes.shape({
7467
prompt: PropTypes.string,
@@ -99,4 +92,4 @@ export const mapDispatchToProps = {
9992
setCriterionOption: actions.grading.setCriterionOption,
10093
};
10194

102-
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(RadioCriterion));
95+
export default connect(mapStateToProps, mapDispatchToProps)(RadioCriterion);

‎src/containers/CriterionContainer/RadioCriterion.test.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { render } from '@testing-library/react';
22

33
import { actions, selectors } from 'data/redux';
4-
import { formatMessage } from 'testUtils';
54
import {
65
RadioCriterion,
76
mapDispatchToProps,
@@ -33,7 +32,6 @@ jest.unmock('react');
3332

3433
describe('Radio Criterion Container', () => {
3534
const props = {
36-
intl: { formatMessage },
3735
orderNum: 1,
3836
isGrading: true,
3937
config: {

0 commit comments

Comments
 (0)