deps: i18next 10 -> 23, react-i18next 7 -> 14

Modernizes the whole i18n stack:
- 48 translate([], {wait:true}) / translate() HOCs -> withTranslation()
- react.wait:true -> react.useSuspense:false
- whitelist -> supportedLngs; added compatibilityJSON: 'v3' so our
  natural-language keys + v3 _plural layout keep working (custom
  separators ss/eth/dj preserved)
- backends: xhr -> i18next-http-backend (client), sync-fs ->
  i18next-fs-backend (server); dropped i18next-localstorage-cache
  (was enabled:false); languagedetector 2 -> 8
- ReSendEmail: <Interpolate> (removed in v10) -> <Trans values={{email}}/>,
  dropped the removed bare t export
- saveMissing handler signature (lngs, ns, key, fallbackValue)

Silences the per-component Translate/I18n legacy-context warnings.
Browser-verified es/en switch and <Trans> interpolation on /fires;
REST smoke byte-identical.

imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 /* import { Nav, NavDropdown } from 'react-bootstrap'; */
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 
 /*
@@ -39,4 +39,4 @@ AuthenticatedNavigation.propTypes = {
   name: PropTypes.string.isRequired
 };
 
-export default translate([], { wait: true })(withRouter(AuthenticatedNavigation));
+export default withTranslation()(withRouter(AuthenticatedNavigation));

imports/ui/components/BetaRibbon/BetaRibbon.js

@@ -4,7 +4,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 import './BetaRibbon.scss';
 
@@ -30,4 +30,4 @@ BetaRibbon.propTypes = {
 BetaRibbon.defaultProps = {
 };
 
-export default translate([], { wait: true })(BetaRibbon);
+export default withTranslation()(BetaRibbon);

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Tracker } from 'meteor/tracker';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Button } from 'react-bootstrap';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Bert } from 'meteor/themeteorchef:bert';
 
 import './CenterInMyPosition.scss';
@@ -63,4 +63,4 @@ CenterInMyPosition.propTypes = {
   onlyIcon: PropTypes.bool
 };
 
-export default translate([], { wait: true })(CenterInMyPosition);
+export default withTranslation()(CenterInMyPosition);

imports/ui/components/Comments/CommentsBox.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Meteor } from 'meteor/meteor';
 import moment from 'moment';
 import CommentsCollection from '/imports/api/Comments/Comments';
@@ -149,4 +149,4 @@ const CommentsBoxContainer = withTracker(({ referenceId }) => {
   };
 })(CommentsBox);
 
-export default translate([], { wait: true })(CommentsBoxContainer);
+export default withTranslation()(CommentsBoxContainer);

imports/ui/components/DistanceSlider/DistanceSlider.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-absolute-path */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, translate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import Tooltip from 'rc-tooltip';
 import Slider from 'rc-slider';
 import 'rc-slider/assets/index.css';
@@ -107,4 +107,4 @@ DistanceSlider.propTypes = {
   onChange: PropTypes.func
 };
 
-export default translate([], { wait: true })(DistanceSlider);
+export default withTranslation()(DistanceSlider);

imports/ui/components/Feedback/Feedback.js

@@ -5,7 +5,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { FormGroup, Button, FormControl } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { withTracker } from 'meteor/react-meteor-data';
@@ -134,7 +134,7 @@ Feedback.propTypes = {
   isHome: PropTypes.bool.isRequired
 };
 
-export default translate()(withTracker(props => ({
+export default withTranslation()(withTracker(props => ({
   emailAddress: props.emailAddress,
   emailVerified: props.emailVerified,
   isHome: isHome()

imports/ui/components/Footer/Footer.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { year } from '@cleverbeagle/dates';
 import { Link } from 'react-router-dom';
 import { Grid } from 'react-bootstrap';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 
 import './Footer.scss';
@@ -51,4 +51,4 @@ const Footer = (props) => {
 
 Footer.propTypes = {};
 
-export default translate([], { wait: true })(Footer);
+export default withTranslation()(Footer);

imports/ui/components/FromNow/FromNow.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import Chronos from '/imports/ui/components/Chronos/Chronos';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { dateLongFormat } from '/imports/api/Common/dates';
 
 import './FromNow.scss';
@@ -60,7 +60,7 @@ FromNow.defaultProps = {
  * export default FromNowContainer;
  * */
 
-export default translate([], { wait: true })(withTracker((props) => {
+export default withTranslation()(withTracker((props) => {
   const whenDate = props.when;
   return {
     when: whenDate ? Chronos.moment(whenDate).fromNow() : null,

imports/ui/components/LocationAutocomplete/LocationAutocomplete.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-indent-props */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
 import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
@@ -130,4 +130,4 @@ LocationAutocomplete.propTypes = {
   i18n: PropTypes.object.isRequired
 };
 
-export default translate([], { wait: true })(LocationAutocomplete);
+export default withTranslation()(LocationAutocomplete);

imports/ui/components/Maps/DefMapLayers.js

@@ -4,7 +4,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { GoogleLayer } from 'react-leaflet-google/lib/';
 import Gkeys from '/imports/startup/client/Gkeys';
 import { TileLayer, LayersControl } from 'react-leaflet';
@@ -85,4 +85,4 @@ DefMapLayers.defaultProps = {
   satellite: false
 };
 
-export default translate([], { wait: true })(DefMapLayers);
+export default withTranslation()(DefMapLayers);

imports/ui/components/Maps/FireIconMark.js

@@ -3,7 +3,7 @@ import React, { Component, Fragment } from 'react';
 import { CircleMarker, Marker, Tooltip } from 'react-leaflet';
 import PropTypes from 'prop-types';
 import { fireIconS, fireIconM, fireIconL, nFireIcon, industryIcon, regIndustryIcon } from '/imports/ui/components/Maps/Icons';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { onMarkClick } from './MarkListeners';
 import FirePopup from './FirePopup';
 
@@ -80,4 +80,4 @@ FireIconMark.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(FireIconMark);
+export default withTranslation()(FireIconMark);

imports/ui/components/Maps/FirePixel.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { CircleMarker } from 'react-leaflet';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import FirePopup from './FirePopup';
 
 /* Less acurate (1 pixel per fire) but faster */
@@ -34,4 +34,4 @@ FirePixel.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(FirePixel);
+export default withTranslation()(FirePixel);

imports/ui/components/Maps/FirePopup.js

@@ -2,7 +2,7 @@
 import React, { Fragment } from 'react';
 import { Tooltip } from 'react-leaflet';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 const FirePopup = ({
   lat,
@@ -29,4 +29,4 @@ FirePopup.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(FirePopup);
+export default withTranslation()(FirePopup);

imports/ui/components/Maps/FullScreenMap.js

@@ -4,7 +4,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import FullscreenControl from 'react-leaflet-fullscreen';
 import 'react-leaflet-fullscreen/dist/styles.css';
 
@@ -25,4 +25,4 @@ FullScreenMap.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(FullScreenMap);
+export default withTranslation()(FullScreenMap);

imports/ui/components/Navigation/Navigation.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Trans, translate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 /* import BetaRibbon from '../../components/BetaRibbon/BetaRibbon'; */
 import PublicNavigation from '../PublicNavigation/PublicNavigation';
@@ -71,4 +71,4 @@ Navigation.propTypes = {
   authenticated: PropTypes.bool.isRequired
 };
 
-export default translate([], { wait: true })(Navigation);
+export default withTranslation()(Navigation);

imports/ui/components/OAuthLoginButton/OAuthLoginButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import Icon from '../Icon/Icon';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
 import './OAuthLoginButton.scss';
@@ -60,4 +60,4 @@ OAuthLoginButton.propTypes = {
   callback: PropTypes.func,
 };
 
-export default translate([], { wait: true })(OAuthLoginButton);
+export default withTranslation()(OAuthLoginButton);

imports/ui/components/PublicNavigation/PublicNavigation.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
 /* import { Nav } from 'react-bootstrap'; */
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 
 /*
@@ -32,4 +32,4 @@ PublicNavigation.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(PublicNavigation);
+export default withTranslation()(PublicNavigation);

imports/ui/components/ReSendEmail/ReSendEmail.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Alert, Button } from 'react-bootstrap';
-import { t, Trans, translate, Interpolate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
 const handleResendVerificationEmail = (emailAddress, t) => {
@@ -16,7 +16,7 @@ const handleResendVerificationEmail = (emailAddress, t) => {
 
 const ReSendEmail = props => (
   <div>
-  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Interpolate i18nKey="verifyEmail" email={props.emailAddress}></Interpolate> <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
+  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
   </div>
 );
 
@@ -32,4 +32,4 @@ ReSendEmail.propTypes = {
   emailVerified: PropTypes.bool.isRequired,
 };
 
-export default translate([], { wait: true })(ReSendEmail);
+export default withTranslation()(ReSendEmail);

imports/ui/components/Reconnect/Reconnect.js

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 /* import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker'; */
 import Blaze from 'meteor/gadicc:blaze-react-component';
@@ -28,7 +28,7 @@ Reconnect.propTypes = {
 Reconnect.defaultProps = {
 };
 
-export default translate([], { wait: true })(Reconnect);
+export default withTranslation()(Reconnect);
 
 /*
 if (!Meteor.isProduction) {

imports/ui/components/SelectionMap/SelectionMap.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { Map, Marker, CircleMarker, Circle, Tooltip } from 'react-leaflet';
 import Leaflet from 'leaflet';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
 import update from 'immutability-helper';
 import geolocation from '/imports/startup/client/geolocation';
@@ -293,7 +293,7 @@ SelectionMap.propTypes = {
   }))
 };
 
-export default translate([], { wait: true })(withTracker((props) => {
+export default withTranslation()(withTracker((props) => {
   const subscription = Meteor.subscribe('mysubscriptions');
   // console.log(props.loadingSubs);
   return {

imports/ui/components/ShareIt/ShareIt.js

@@ -3,7 +3,7 @@
 /* eslint-disable import/no-absolute-path */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
 import { currentLocationHref } from '/imports/ui/components/Utils/location';
 import {
@@ -138,7 +138,7 @@ ShareIt.propTypes = {
 ShareIt.defaultProps = {
 };
 
-export default translate([], { wait: true })(withTracker((props) => {
+export default withTranslation()(withTracker((props) => {
   const { title } = props;
   return {
     title

imports/ui/components/SubscriptionEditor/SubscriptionEditor.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { isAnyMobile } from '/imports/ui/components/Utils/isMobile';
 
 class SubscriptionEditor extends React.Component {
@@ -89,4 +89,4 @@ SubscriptionEditor.propTypes = {
   focusInput: PropTypes.bool
 };
 
-export default translate([], { wait: true })(SubscriptionEditor);
+export default withTranslation()(SubscriptionEditor);

imports/ui/pages/About/About.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-indent */
 
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Page from '../Page/Page';
 
 const About = props => (
@@ -16,4 +16,4 @@ const About = props => (
   </div>
 );
 
-export default translate([], { wait: true })(About);
+export default withTranslation()(About);

imports/ui/pages/Auth/Auth.js

@@ -4,7 +4,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Meteor } from 'meteor/meteor';
 import { T9n } from 'meteor-accounts-t9n';
@@ -45,4 +45,4 @@ Auth.propTypes = {
 Auth.defaultProps = {
 };
 
-export default translate([], { wait: true })(Auth);
+export default withTranslation()(Auth);

imports/ui/pages/Credits/Credits.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-indent */
 
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import Page from '../Page/Page';
 
 const Credits = props => (
@@ -16,4 +16,4 @@ const Credits = props => (
     </div>
 );
 
-export default translate([], { wait: true })(Credits);
+export default withTranslation()(Credits);

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col } from 'react-bootstrap';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
 import Gkeys from '/imports/startup/client/Gkeys';
@@ -129,4 +129,4 @@ FireSubscription.propTypes = {
   disableFstBtn: PropTypes.bool.isRequired
 };
 
-export default translate([], { wait: true })(FireSubscription);
+export default withTranslation()(FireSubscription);

imports/ui/pages/Fires/Fires.js

@@ -5,7 +5,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { Row, Col, Alert, FormGroup } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
@@ -259,7 +259,7 @@ Fire.propTypes = {
 Fire.defaultProps = {
 };
 
-// export default translate([], { wait: true })(withTracker((props) => {
+// export default withTranslation()(withTracker((props) => {
 
 const FireContainer = withTracker(({ match }) => {
   const id = match.params.id;
@@ -304,4 +304,4 @@ const FireContainer = withTracker(({ match }) => {
 })(Fire);
 
 // export default FireContainer;
-export default translate([], { wait: true })(FireContainer);
+export default withTranslation()(FireContainer);

imports/ui/pages/FiresMap/FireStats.js

@@ -4,7 +4,7 @@
 
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import FromNow from '/imports/ui/components/FromNow/FromNow';
 
 class FireStats extends Component {
@@ -57,4 +57,4 @@ FireStats.propTypes = {
 FireStats.defaultProps = {
 };
 
-export default translate([], { wait: true })(FireStats);
+export default withTranslation()(FireStats);

imports/ui/pages/FiresMap/FiresMap.js

@@ -10,7 +10,7 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Tracker } from 'meteor/tracker';
 import { Helmet } from 'react-helmet-async';
-import { Trans, translate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { Map } from 'react-leaflet';
 import Control from 'react-leaflet-control';
 import LoadingBar from '/imports/ui/components/Loading/LoadingBar';
@@ -386,7 +386,7 @@ FiresMap.propTypes = {
 
 let geoInit = true;
 
-export default translate([], { wait: true })(withTracker(() => {
+export default withTranslation()(withTracker(() => {
   // const firesType = match.params.type;
   // const withIndustries = firesType === 'with-industries';
   // console.log(`With industries: ${withIndustries}`);

imports/ui/pages/Index/Index.js

@@ -4,7 +4,7 @@
 /* eslint-env jquery */
 import 'simple-line-icons/css/simple-line-icons.css';
 import React, { Component } from 'react';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 // import { Link } from 'react-router-dom';
@@ -335,4 +335,4 @@ Index.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(Index);
+export default withTranslation()(Index);

imports/ui/pages/License/License.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-indent */
 
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { dateParseShortFormat } from '/imports/api/Common/dates';
 import Page from '../Page/Page';
 
@@ -17,4 +17,4 @@ const License = props => (
     </div>
 );
 
-export default translate([], { wait: true })(License);
+export default withTranslation()(License);

imports/ui/pages/Login/Login.js

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 import Col from '../../components/Col/Col';
@@ -126,4 +126,4 @@ Login.propTypes = {
   location: PropTypes.object
 };
 
-export default translate([], { wait: true })(Login);
+export default withTranslation()(Login);

imports/ui/pages/Logout/Logout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meteor } from 'meteor/meteor';
 import Icon from '../../components/Icon/Icon';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 
 import './Logout.scss';
@@ -30,4 +30,4 @@ class Logout extends React.Component {
 
 Logout.propTypes = {};
 
-export default translate([], { wait: true })(Logout);
+export default withTranslation()(Logout);

imports/ui/pages/NewSubscription/NewSubscription.js

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, translate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor';
 
 class NewSubscription extends Component {
@@ -47,4 +47,4 @@ NewSubscription.propTypes = {
   location: PropTypes.object
 };
 
-export default translate([], { wait: true })(NewSubscription);
+export default withTranslation()(NewSubscription);

imports/ui/pages/NotFound/NotFound.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert } from 'react-bootstrap';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 
 const NotFound = () => (
@@ -16,4 +16,4 @@ const NotFound = () => (
   </div>
 );
 
-export default translate([], { wait: true })(NotFound);
+export default withTranslation()(NotFound);

imports/ui/pages/Privacy/Privacy.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-indent */
 
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { dateParseShortFormat } from '/imports/api/Common/dates';
 import Page from '../Page/Page';
 
@@ -17,4 +17,4 @@ const Privacy = props => (
   </div>
 );
 
-export default translate([], { wait: true })(Privacy);
+export default withTranslation()(Privacy);

imports/ui/pages/Profile/Profile.js

@@ -9,7 +9,7 @@ import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 import { withTracker } from 'meteor/react-meteor-data';
 import Col from '../../components/Col/Col';
@@ -272,7 +272,7 @@ Profile.propTypes = {
   i18n: PropTypes.object.isRequired
 };
 
-export default translate()(withTracker(() => {
+export default withTranslation()(withTracker(() => {
   const subscription = Meteor.subscribe('users.editProfile');
 
   return {

imports/ui/pages/RecoverPassword/RecoverPassword.js

@@ -8,7 +8,7 @@ import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
 import validate from '../../../modules/validate';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
 class RecoverPassword extends React.Component {
@@ -89,4 +89,4 @@ RecoverPassword.propTypes = {
   history: PropTypes.object.isRequired
 };
 
-export default translate([], { wait: true })(RecoverPassword);
+export default withTranslation()(RecoverPassword);

imports/ui/pages/ResetPassword/ResetPassword.js

@@ -6,7 +6,7 @@ import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
 import validate from '../../../modules/validate';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
 class ResetPassword extends React.Component {
@@ -104,4 +104,4 @@ ResetPassword.propTypes = {
   history: PropTypes.object.isRequired,
 };
 
-export default translate([], { wait: true })(ResetPassword);
+export default withTranslation()(ResetPassword);

imports/ui/pages/Sandbox/Sandbox.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-absolute-path */
 import React from 'react';
 // import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 class Sandbox extends React.Component {
   componentDidMount() {
@@ -21,4 +21,4 @@ Sandbox.propTypes = {
   // history: PropTypes.object.isRequired
 };
 
-export default translate([], { wait: true })(Sandbox);
+export default withTranslation()(Sandbox);

imports/ui/pages/Signup/Signup.js

@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
-import { translate, Trans } from 'react-i18next';
+import { withTranslation, Trans } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 import { Helmet } from 'react-helmet-async';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
@@ -213,4 +213,4 @@ Signup.propTypes = {
   location: PropTypes.object
 };
 
-export default translate([], { wait: true })(Signup);
+export default withTranslation()(Signup);

imports/ui/pages/Status/Status.js

@@ -4,7 +4,7 @@
 
 import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
 import Blaze from 'meteor/gadicc:blaze-react-component';
 import { Helmet } from 'react-helmet-async';
@@ -44,7 +44,7 @@ Status.propTypes = {
 Status.defaultProps = {
 };
 
-// export default translate([], { wait: true })(Status);
-export default translate([], { wait: true })(withTracker(props => ({
+// export default withTranslation()(Status);
+export default withTranslation()(withTracker(props => ({
   // props.something
 }))(Status));

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { Alert } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
-import { Trans, translate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
@@ -127,7 +127,7 @@ Subscriptions.propTypes = {
   location: PropTypes.object
 };
 
-export default translate([], { wait: true })(withTracker(() => {
+export default withTranslation()(withTracker(() => {
   const subscription = Meteor.subscribe('mysubscriptions');
   // console.log(UserSubsToFiresCollection.find().fetch());
   return {

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { Button, ButtonGroup, Row, Col } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
-import { Trans, translate } from 'react-i18next';
+import { Trans, withTranslation } from 'react-i18next';
 import { Map } from 'react-leaflet';
 import { Helmet } from 'react-helmet-async';
 import L from 'leaflet';
@@ -165,7 +165,7 @@ SubscriptionsMap.propTypes = {
   t: PropTypes.func.isRequired
 };
 
-export default translate([], { wait: true })(withTracker(() => {
+export default withTranslation()(withTracker(() => {
   const settingsSubs = Meteor.subscribe('settings');
   const userSubs = SiteSettings.findOne({ name: 'subs-public-union' });
   const userSubsBounds = SiteSettings.findOne({ name: 'subs-public-union-bounds' });

imports/ui/pages/Terms/Terms.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-indent */
 
 import React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { dateParseShortFormat } from '/imports/api/Common/dates';
 import Page from '../Page/Page';
 
@@ -17,4 +17,4 @@ const Terms = props => (
   </div>
 );
 
-export default translate([], { wait: true })(Terms);
+export default withTranslation()(Terms);

imports/ui/pages/VerifyEmail/VerifyEmail.js

@@ -5,7 +5,7 @@ import { Meteor } from 'meteor/meteor';
 import { Helmet } from 'react-helmet-async';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
 class VerifyEmail extends React.Component {
@@ -48,4 +48,4 @@ VerifyEmail.propTypes = {
   history: PropTypes.object.isRequired
 };
 
-export default translate([], { wait: true })(VerifyEmail);
+export default withTranslation()(VerifyEmail);