Skip to content

Commit 269ca22

Browse files
raclimraclim
authored
Merge pull request #2045 from lindapaiste/refactor/prefer-use-translation
prefer react-i18next `useTranslation` hook
2 parents 87f8170 + 01657ad commit 269ca22

File tree

17 files changed

+248
-282
lines changed

17 files changed

+248
-282
lines changed

‎client/components/AddRemoveButton.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { withTranslation } from 'react-i18next';
3+
import { useTranslation } from 'react-i18next';
44

55
import AddIcon from '../images/plus.svg';
66
import RemoveIcon from '../images/minus.svg';
77

8-
const AddRemoveButton = ({ type, onClick, t }) => {
8+
const AddRemoveButton = ({ type, onClick }) => {
9+
const { t } = useTranslation();
910
const alt =
1011
type === 'add'
1112
? t('AddRemoveButton.AltAddARIA')
@@ -25,8 +26,7 @@ const AddRemoveButton = ({ type, onClick, t }) => {
2526

2627
AddRemoveButton.propTypes = {
2728
type: PropTypes.oneOf(['add', 'remove']).isRequired,
28-
onClick: PropTypes.func.isRequired,
29-
t: PropTypes.func.isRequired
29+
onClick: PropTypes.func.isRequired
3030
};
3131

32-
export default withTranslation()(AddRemoveButton);
32+
export default AddRemoveButton;

‎client/components/PreviewNav.jsx‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,50 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4-
import { withTranslation } from 'react-i18next';
4+
import { useTranslation } from 'react-i18next';
55

66
import LogoIcon from '../images/p5js-logo-small.svg';
77
import CodeIcon from '../images/code.svg';
88

9-
const PreviewNav = ({ owner, project, t }) => (
10-
<nav className="nav preview-nav">
11-
<div className="nav__items-left">
12-
<div className="nav__item-logo">
13-
<LogoIcon
14-
role="img"
15-
aria-label={t('Common.p5logoARIA')}
16-
focusable="false"
17-
className="svg__logo"
18-
/>
9+
const PreviewNav = ({ owner, project }) => {
10+
const { t } = useTranslation();
11+
return (
12+
<nav className="nav preview-nav">
13+
<div className="nav__items-left">
14+
<div className="nav__item-logo">
15+
<LogoIcon
16+
role="img"
17+
aria-label={t('Common.p5logoARIA')}
18+
focusable="false"
19+
className="svg__logo"
20+
/>
21+
</div>
22+
<Link
23+
className="nav__item"
24+
to={`/${owner.username}/sketches/${project.id}`}
25+
>
26+
{project.name}
27+
</Link>
28+
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
29+
<Link className="nav__item" to={`/${owner.username}/sketches/`}>
30+
{owner.username}
31+
</Link>
1932
</div>
20-
<Link
21-
className="nav__item"
22-
to={`/${owner.username}/sketches/${project.id}`}
23-
>
24-
{project.name}
25-
</Link>
26-
<p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
27-
<Link className="nav__item" to={`/${owner.username}/sketches/`}>
28-
{owner.username}
29-
</Link>
30-
</div>
31-
<div className="nav__items-right">
32-
<Link
33-
to={`/${owner.username}/sketches/${project.id}`}
34-
aria-label={t('PreviewNav.EditSketchARIA')}
35-
>
36-
<CodeIcon
37-
className="preview-nav__editor-svg"
38-
focusable="false"
39-
aria-hidden="true"
40-
/>
41-
</Link>
42-
</div>
43-
</nav>
44-
);
33+
<div className="nav__items-right">
34+
<Link
35+
to={`/${owner.username}/sketches/${project.id}`}
36+
aria-label={t('PreviewNav.EditSketchARIA')}
37+
>
38+
<CodeIcon
39+
className="preview-nav__editor-svg"
40+
focusable="false"
41+
aria-hidden="true"
42+
/>
43+
</Link>
44+
</div>
45+
</nav>
46+
);
47+
};
4548

4649
PreviewNav.propTypes = {
4750
owner: PropTypes.shape({
@@ -50,8 +53,7 @@ PreviewNav.propTypes = {
5053
project: PropTypes.shape({
5154
name: PropTypes.string.isRequired,
5255
id: PropTypes.string.isRequired
53-
}).isRequired,
54-
t: PropTypes.func.isRequired
56+
}).isRequired
5557
};
5658

57-
export default withTranslation()(PreviewNav);
59+
export default PreviewNav;

‎client/modules/IDE/components/Console.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useRef, useEffect } from 'react';
2-
import PropTypes from 'prop-types';
3-
import { withTranslation } from 'react-i18next';
2+
import { useTranslation } from 'react-i18next';
43

54
import { bindActionCreators } from 'redux';
65

@@ -201,7 +200,8 @@ const getConsoleFeedStyle = (theme, fontSize) => {
201200
}
202201
};
203202

204-
const Console = ({ t }) => {
203+
const Console = () => {
204+
const { t } = useTranslation();
205205
const consoleEvents = useSelector((state) => state.console);
206206
const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
207207
const isPlaying = useSelector((state) => state.ide.isPlaying);
@@ -284,8 +284,4 @@ const Console = ({ t }) => {
284284
);
285285
};
286286

287-
Console.propTypes = {
288-
t: PropTypes.func.isRequired
289-
};
290-
291-
export default withTranslation()(Console);
287+
export default Console;

‎client/modules/IDE/components/EditorAccessibility.jsx‎

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,38 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { withTranslation } from 'react-i18next';
3+
import { useTranslation } from 'react-i18next';
44

5-
class EditorAccessibility extends React.Component {
6-
componentDidMount() {}
7-
render() {
8-
const messages = [];
9-
if (this.props.lintMessages.length > 0) {
10-
this.props.lintMessages.forEach((lintMessage, i) => {
11-
messages.push(
12-
<li key={lintMessage.id}>
13-
{lintMessage.severity} in line
14-
{lintMessage.line} :{lintMessage.message}
15-
</li>
16-
);
17-
});
18-
} else {
19-
messages.push(
20-
<li key={0}>{this.props.t('EditorAccessibility.NoLintMessages')}</li>
21-
);
22-
}
23-
return (
24-
<div className="editor-accessibility">
25-
<ul className="editor-lintmessages" title="lint messages">
26-
{messages}
27-
</ul>
28-
<p>
5+
const EditorAccessibility = ({ lintMessages = [] }) => {
6+
const { t } = useTranslation();
7+
return (
8+
<div className="editor-accessibility">
9+
<ul className="editor-lintmessages" title="lint messages">
10+
{lintMessages.length > 0 ? (
11+
lintMessages.map((lintMessage) => (
12+
<li key={lintMessage.id}>
13+
{lintMessage.severity} in line
14+
{lintMessage.line} :{lintMessage.message}
15+
</li>
16+
))
17+
) : (
18+
<li key={0}>{t('EditorAccessibility.NoLintMessages')}</li>
19+
)}
20+
</ul>
21+
<p>
22+
{' '}
23+
{t('EditorAccessibility.CurrentLine')}
24+
<span
25+
className="editor-linenumber"
26+
aria-live="polite"
27+
aria-atomic="true"
28+
id="current-line"
29+
>
2930
{' '}
30-
{this.props.t('EditorAccessibility.CurrentLine')}
31-
<span
32-
className="editor-linenumber"
33-
aria-live="polite"
34-
aria-atomic="true"
35-
id="current-line"
36-
>
37-
{' '}
38-
</span>
39-
</p>
40-
</div>
41-
);
42-
}
43-
}
31+
</span>
32+
</p>
33+
</div>
34+
);
35+
};
4436

4537
EditorAccessibility.propTypes = {
4638
lintMessages: PropTypes.arrayOf(
@@ -50,8 +42,7 @@ EditorAccessibility.propTypes = {
5042
message: PropTypes.string.isRequired,
5143
id: PropTypes.number.isRequired
5244
})
53-
).isRequired,
54-
t: PropTypes.func.isRequired
45+
).isRequired
5546
};
5647

57-
export default withTranslation()(EditorAccessibility);
48+
export default EditorAccessibility;

‎client/modules/IDE/components/ErrorModal.jsx‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4-
import { withTranslation } from 'react-i18next';
4+
import { useTranslation } from 'react-i18next';
55

6-
class ErrorModal extends React.Component {
7-
forceAuthentication() {
6+
const ErrorModal = ({ type, service, closeModal }) => {
7+
const { t } = useTranslation();
8+
9+
function forceAuthentication() {
810
return (
911
<p>
10-
{this.props.t('ErrorModal.MessageLogin')}
11-
<Link to="/login" onClick={this.props.closeModal}>
12+
{t('ErrorModal.MessageLogin')}
13+
<Link to="/login" onClick={closeModal}>
1214
{' '}
13-
{this.props.t('ErrorModal.Login')}
15+
{t('ErrorModal.Login')}
1416
</Link>
15-
{this.props.t('ErrorModal.LoginOr')}
16-
<Link to="/signup" onClick={this.props.closeModal}>
17-
{this.props.t('ErrorModal.SignUp')}
17+
{t('ErrorModal.LoginOr')}
18+
<Link to="/signup" onClick={closeModal}>
19+
{t('ErrorModal.SignUp')}
1820
</Link>
1921
.
2022
</p>
2123
);
2224
}
2325

24-
oauthError() {
25-
const { t, service } = this.props;
26+
function oauthError() {
2627
const serviceLabels = {
2728
github: 'GitHub',
2829
google: 'Google'
@@ -34,50 +35,47 @@ class ErrorModal extends React.Component {
3435
);
3536
}
3637

37-
staleSession() {
38+
function staleSession() {
3839
return (
3940
<p>
40-
{this.props.t('ErrorModal.MessageLoggedOut')}
41-
<Link to="/login" onClick={this.props.closeModal}>
42-
{this.props.t('ErrorModal.LogIn')}
41+
{t('ErrorModal.MessageLoggedOut')}
42+
<Link to="/login" onClick={closeModal}>
43+
{t('ErrorModal.LogIn')}
4344
</Link>
4445
.
4546
</p>
4647
);
4748
}
4849

49-
staleProject() {
50-
return <p>{this.props.t('ErrorModal.SavedDifferentWindow')}</p>;
50+
function staleProject() {
51+
return <p>{t('ErrorModal.SavedDifferentWindow')}</p>;
5152
}
5253

53-
render() {
54-
return (
55-
<div className="error-modal__content">
56-
{(() => { // eslint-disable-line
57-
if (this.props.type === 'forceAuthentication') {
58-
return this.forceAuthentication();
59-
} else if (this.props.type === 'staleSession') {
60-
return this.staleSession();
61-
} else if (this.props.type === 'staleProject') {
62-
return this.staleProject();
63-
} else if (this.props.type === 'oauthError') {
64-
return this.oauthError();
65-
}
66-
})()}
67-
</div>
68-
);
69-
}
70-
}
54+
return (
55+
<div className="error-modal__content">
56+
{(() => { // eslint-disable-line
57+
if (type === 'forceAuthentication') {
58+
return forceAuthentication();
59+
} else if (type === 'staleSession') {
60+
return staleSession();
61+
} else if (type === 'staleProject') {
62+
return staleProject();
63+
} else if (type === 'oauthError') {
64+
return oauthError();
65+
}
66+
})()}
67+
</div>
68+
);
69+
};
7170

7271
ErrorModal.propTypes = {
7372
type: PropTypes.string.isRequired,
7473
closeModal: PropTypes.func.isRequired,
75-
t: PropTypes.func.isRequired,
7674
service: PropTypes.string
7775
};
7876

7977
ErrorModal.defaultProps = {
8078
service: ''
8179
};
8280

83-
export default withTranslation()(ErrorModal);
81+
export default ErrorModal;

‎client/modules/IDE/components/Feedback.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
22
import { Helmet } from 'react-helmet';
3-
import { withTranslation } from 'react-i18next';
3+
import { useTranslation } from 'react-i18next';
44
import GitHubLogo from '../../../images/github.svg';
55

6-
function Feedback(props) {
6+
function Feedback() {
7+
const { t } = useTranslation();
78
return (
89
<div className="feedback__content">
910
<Helmet>
10-
<title>{this.props.t('Feedback.Title')}</title>
11+
<title>{t('Feedback.Title')}</title>
1112
</Helmet>
1213
<div className="feedback__content-pane">
1314
<h2 className="feedback__content-pane-header">Via Github Issues</h2>
@@ -50,4 +51,4 @@ function Feedback(props) {
5051
);
5152
}
5253

53-
export default withTranslation()(Feedback);
54+
export default Feedback;

0 commit comments

Comments
 (0)