prefer react-i18next useTranslation hook

client/components/AddRemoveButton.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
-const AddRemoveButton = ({ type, onClick, t }) => {
+const AddRemoveButton = ({ type, onClick }) => {
+  const { t } = useTranslation();
   const alt =
     type === 'add'
       ? t('AddRemoveButton.AltAddARIA')
@@ -25,8 +26,7 @@ const AddRemoveButton = ({ type, onClick, t }) => {
 
 AddRemoveButton.propTypes = {
   type: PropTypes.oneOf(['add', 'remove']).isRequired,
-  onClick: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired
 };
 
-export default withTranslation()(AddRemoveButton);
+export default AddRemoveButton;

client/components/PreviewNav.jsx

@@ -1,47 +1,50 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project, t }) => (
-  <nav className="nav preview-nav">
-    <div className="nav__items-left">
-      <div className="nav__item-logo">
-        <LogoIcon
-          role="img"
-          aria-label={t('Common.p5logoARIA')}
-          focusable="false"
-          className="svg__logo"
-        />
+const PreviewNav = ({ owner, project }) => {
+  const { t } = useTranslation();
+  return (
+    <nav className="nav preview-nav">
+      <div className="nav__items-left">
+        <div className="nav__item-logo">
+          <LogoIcon
+            role="img"
+            aria-label={t('Common.p5logoARIA')}
+            focusable="false"
+            className="svg__logo"
+          />
+        </div>
+        <Link
+          className="nav__item"
+          to={`/${owner.username}/sketches/${project.id}`}
+        >
+          {project.name}
+        </Link>
+        <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
+        <Link className="nav__item" to={`/${owner.username}/sketches/`}>
+          {owner.username}
+        </Link>
       </div>
-      <Link
-        className="nav__item"
-        to={`/${owner.username}/sketches/${project.id}`}
-      >
-        {project.name}
-      </Link>
-      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
-      <Link className="nav__item" to={`/${owner.username}/sketches/`}>
-        {owner.username}
-      </Link>
-    </div>
-    <div className="nav__items-right">
-      <Link
-        to={`/${owner.username}/sketches/${project.id}`}
-        aria-label={t('PreviewNav.EditSketchARIA')}
-      >
-        <CodeIcon
-          className="preview-nav__editor-svg"
-          focusable="false"
-          aria-hidden="true"
-        />
-      </Link>
-    </div>
-  </nav>
-);
+      <div className="nav__items-right">
+        <Link
+          to={`/${owner.username}/sketches/${project.id}`}
+          aria-label={t('PreviewNav.EditSketchARIA')}
+        >
+          <CodeIcon
+            className="preview-nav__editor-svg"
+            focusable="false"
+            aria-hidden="true"
+          />
+        </Link>
+      </div>
+    </nav>
+  );
+};
 
 PreviewNav.propTypes = {
   owner: PropTypes.shape({
@@ -50,8 +53,7 @@ PreviewNav.propTypes = {
   project: PropTypes.shape({
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
+  }).isRequired
 };
 
-export default withTranslation()(PreviewNav);
+export default PreviewNav;

client/modules/IDE/components/Console.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { bindActionCreators } from 'redux';
 
@@ -201,7 +200,8 @@ const getConsoleFeedStyle = (theme, fontSize) => {
   }
 };
 
-const Console = ({ t }) => {
+const Console = () => {
+  const { t } = useTranslation();
   const consoleEvents = useSelector((state) => state.console);
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
   const isPlaying = useSelector((state) => state.ide.isPlaying);
@@ -284,8 +284,4 @@ const Console = ({ t }) => {
   );
 };
 
-Console.propTypes = {
-  t: PropTypes.func.isRequired
-};
-
-export default withTranslation()(Console);
+export default Console;

client/modules/IDE/components/EditorAccessibility.jsx

@@ -1,46 +1,38 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-class EditorAccessibility extends React.Component {
-  componentDidMount() {}
-  render() {
-    const messages = [];
-    if (this.props.lintMessages.length > 0) {
-      this.props.lintMessages.forEach((lintMessage, i) => {
-        messages.push(
-          <li key={lintMessage.id}>
-            {lintMessage.severity} in line
-            {lintMessage.line} :{lintMessage.message}
-          </li>
-        );
-      });
-    } else {
-      messages.push(
-        <li key={0}>{this.props.t('EditorAccessibility.NoLintMessages')}</li>
-      );
-    }
-    return (
-      <div className="editor-accessibility">
-        <ul className="editor-lintmessages" title="lint messages">
-          {messages}
-        </ul>
-        <p>
+const EditorAccessibility = ({ lintMessages = [] }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="editor-accessibility">
+      <ul className="editor-lintmessages" title="lint messages">
+        {lintMessages.length > 0 ? (
+          lintMessages.map((lintMessage) => (
+            <li key={lintMessage.id}>
+              {lintMessage.severity} in line
+              {lintMessage.line} :{lintMessage.message}
+            </li>
+          ))
+        ) : (
+          <li key={0}>{t('EditorAccessibility.NoLintMessages')}</li>
+        )}
+      </ul>
+      <p>
+        {' '}
+        {t('EditorAccessibility.CurrentLine')}
+        <span
+          className="editor-linenumber"
+          aria-live="polite"
+          aria-atomic="true"
+          id="current-line"
+        >
           {' '}
-          {this.props.t('EditorAccessibility.CurrentLine')}
-          <span
-            className="editor-linenumber"
-            aria-live="polite"
-            aria-atomic="true"
-            id="current-line"
-          >
-            {' '}
-          </span>
-        </p>
-      </div>
-    );
-  }
-}
+        </span>
+      </p>
+    </div>
+  );
+};
 
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.arrayOf(
@@ -50,8 +42,7 @@ EditorAccessibility.propTypes = {
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired
     })
-  ).isRequired,
-  t: PropTypes.func.isRequired
+  ).isRequired
 };
 
-export default withTranslation()(EditorAccessibility);
+export default EditorAccessibility;

client/modules/IDE/components/ErrorModal.jsx

@@ -1,28 +1,29 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
-class ErrorModal extends React.Component {
-  forceAuthentication() {
+const ErrorModal = ({ type, service, closeModal }) => {
+  const { t } = useTranslation();
+
+  function forceAuthentication() {
     return (
       <p>
-        {this.props.t('ErrorModal.MessageLogin')}
-        <Link to="/login" onClick={this.props.closeModal}>
+        {t('ErrorModal.MessageLogin')}
+        <Link to="/login" onClick={closeModal}>
           {' '}
-          {this.props.t('ErrorModal.Login')}
+          {t('ErrorModal.Login')}
         </Link>
-        {this.props.t('ErrorModal.LoginOr')}
-        <Link to="/signup" onClick={this.props.closeModal}>
-          {this.props.t('ErrorModal.SignUp')}
+        {t('ErrorModal.LoginOr')}
+        <Link to="/signup" onClick={closeModal}>
+          {t('ErrorModal.SignUp')}
         </Link>
         .
       </p>
     );
   }
 
-  oauthError() {
-    const { t, service } = this.props;
+  function oauthError() {
     const serviceLabels = {
       github: 'GitHub',
       google: 'Google'
@@ -34,50 +35,47 @@ class ErrorModal extends React.Component {
     );
   }
 
-  staleSession() {
+  function staleSession() {
     return (
       <p>
-        {this.props.t('ErrorModal.MessageLoggedOut')}
-        <Link to="/login" onClick={this.props.closeModal}>
-          {this.props.t('ErrorModal.LogIn')}
+        {t('ErrorModal.MessageLoggedOut')}
+        <Link to="/login" onClick={closeModal}>
+          {t('ErrorModal.LogIn')}
         </Link>
         .
       </p>
     );
   }
 
-  staleProject() {
-    return <p>{this.props.t('ErrorModal.SavedDifferentWindow')}</p>;
+  function staleProject() {
+    return <p>{t('ErrorModal.SavedDifferentWindow')}</p>;
   }
 
-  render() {
-    return (
-      <div className="error-modal__content">
-        {(() => { // eslint-disable-line
-          if (this.props.type === 'forceAuthentication') {
-            return this.forceAuthentication();
-          } else if (this.props.type === 'staleSession') {
-            return this.staleSession();
-          } else if (this.props.type === 'staleProject') {
-            return this.staleProject();
-          } else if (this.props.type === 'oauthError') {
-            return this.oauthError();
-          }
-        })()}
-      </div>
-    );
-  }
-}
+  return (
+    <div className="error-modal__content">
+      {(() => { // eslint-disable-line
+        if (type === 'forceAuthentication') {
+          return forceAuthentication();
+        } else if (type === 'staleSession') {
+          return staleSession();
+        } else if (type === 'staleProject') {
+          return staleProject();
+        } else if (type === 'oauthError') {
+          return oauthError();
+        }
+      })()}
+    </div>
+  );
+};
 
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
   closeModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
   service: PropTypes.string
 };
 
 ErrorModal.defaultProps = {
   service: ''
 };
 
-export default withTranslation()(ErrorModal);
+export default ErrorModal;

client/modules/IDE/components/Feedback.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import GitHubLogo from '../../../images/github.svg';
 
-function Feedback(props) {
+function Feedback() {
+  const { t } = useTranslation();
   return (
     <div className="feedback__content">
       <Helmet>
-        <title>{this.props.t('Feedback.Title')}</title>
+        <title>{t('Feedback.Title')}</title>
       </Helmet>
       <div className="feedback__content-pane">
         <h2 className="feedback__content-pane-header">Via Github Issues</h2>
@@ -50,4 +51,4 @@ function Feedback(props) {
   );
 }
 
-export default withTranslation()(Feedback);
+export default Feedback;