initial fix of i18n

i18n/options-base.ts

 const optionsBase = {
   fallbackLng: 'en',
   preload: ['en'],
-  load: 'languageOnly', // we only provide en, de -> no region specific locals like en-US, de-DE
+  load: 'languageOnly' as 'languageOnly', // we only provide en, de -> no region specific locals like en-US, de-DE
 
   // have a common namespace used around the full app
   ns: ['translations', 'common'],

locales/README.md

@@ -3,11 +3,11 @@
 
 We use [i18next](https://www.i18next.com/) and [react-i18next](https://react.i18next.com/) libraries for i18n and l10n.
 
-The components that use translations need to be wrapped with `translate()`:
+The components that use translations need to be wrapped with `withTranslation()`:
 
 ```tsx
 // ...
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 const Footer = ({ t }) => ( // <-- Get t from properties
   <footer className="footer">
@@ -15,12 +15,12 @@ const Footer = ({ t }) => ( // <-- Get t from properties
   </footer>
 )
 
-export default translate()(Footer);
+export default withTranslation()(Footer);
 ```
 
 ```tsx
 // ...
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
 class Header extends React.Component<IHeaderProps | any, any> {
   public render() {
@@ -32,7 +32,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
 }
 
 // ...
-export default translate()(withRouter(connect(mapStateToProps, null)(withStyles(styleSheet)(Header))));
+export default withTranslation()(withRouter(connect(mapStateToProps, null)(withStyles(styleSheet)(Header))));
 ```
 
 

package-lock.json

@@ -15113,19 +15113,26 @@
       }
     },
     "react-i18next": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-7.13.0.tgz",
-      "integrity": "sha512-35M+MZFPqHwVIas7tXWQKFrf+ozCJukNplUTiGqL8mczSk+VRBsHxxXuuQKRkz/4CcWkONGWbp/AzxfM6wZncg==",
+      "version": "10.13.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-10.13.1.tgz",
+      "integrity": "sha512-MReJUMoYooaKZONvoewFuAwf31bQU60Xt25P5wBIPTMphY4LjDJE27rwhEKjNLL24nSIHa3Jh+z9bPwSKISAoA==",
       "requires": {
-        "hoist-non-react-statics": "^2.3.1",
-        "html-parse-stringify2": "2.0.1",
-        "prop-types": "^15.6.0"
+        "@babel/runtime": "^7.3.1",
+        "html-parse-stringify2": "2.0.1"
       },
       "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        "@babel/runtime": {
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
+          "integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },

package.json

@@ -91,7 +91,7 @@
     "react-fontawesome": "^1.6.1",
     "react-google-login": "^3.2.1",
     "react-google-recaptcha": "^1.0.2",
-    "react-i18next": "^7.8.1",
+    "react-i18next": "^10.13.1",
     "react-leaflet": "^2.0.1",
     "react-leaflet-control": "^2.1.1",
     "react-loadable": "^5.5.0",

src/accessions/ui/BrowsePage.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -140,4 +140,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default translate()(connect(mapStateToProps, mapDispatchToProps)(BrowsePage));
+export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(BrowsePage));

src/accessions/ui/DisplayPage.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { translate } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
 
 // Actions
@@ -60,8 +60,7 @@ const styles = (theme) => ({
 });
 
 
-interface IBrowsePageProps {
-  t?: any;
+interface IBrowsePageProps extends React.ClassAttributes<any>, WithTranslation {
   classes?: any;
 
   uuid: string;
@@ -521,4 +520,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(withTranslation()(BrowsePage)));

src/accessions/ui/ImageBrowsePage.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import {translate} from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 // actions
@@ -247,4 +247,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   repositoryThumbnailUrl,
 }, dispatch);
 
-export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ImageBrowsePage)));
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ImageBrowsePage)));

src/accessions/ui/MapPage.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { translate } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { WithStyles, withStyles } from '@material-ui/core/styles';
 import { isMobile } from 'is-mobile';
 import { bindActionCreators } from 'redux';
 import {showSnackbar} from 'actions/snackbar';
@@ -57,9 +57,7 @@ let Control;
 
 const popupContentLimit = 11;
 
-interface IMapPageProps {
-    classes?: any;
-    t?: any;
+interface IMapPageProps extends WithStyles, WithTranslation {
 
     apiUrl: string;
     mapInfo: ApiCall<AccessionMapInfo>;
@@ -892,4 +890,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
     toggleMyMap,
 }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(withTranslation()(BrowsePage)));

src/accessions/ui/OverviewPage.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { translate } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import * as _ from 'lodash';
 
 // Actions
@@ -27,7 +27,7 @@ import ErrorMessage from 'ui/common/error/ErrorMessage';
 import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
 import AccessionFilters from './c/Filters';
 
-interface IOverviewPageProps extends React.ClassAttributes<any> {
+interface IOverviewPageProps extends React.ClassAttributes<any>, WithTranslation {
   apiCall: ApiCall<AccessionOverview>;
   suggestions: any;
   filterCode: string;
@@ -36,7 +36,6 @@ interface IOverviewPageProps extends React.ClassAttributes<any> {
   applyOverviewFilters: (filters: string | AccessionFilter, page?: IPageRequest) => void;
   updateRouteWithFilterCode: (filterCode: string, path: string) => void;
   currentTab: string;
-  t: any;
 }
 /* tslint:disable */
 class BrowsePage extends React.Component<IOverviewPageProps, any> {
@@ -272,4 +271,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(translate()(BrowsePage));
+export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(BrowsePage));

src/accessions/ui/c/AccessionCard.tsx

 import * as React from 'react';
 import {connect} from 'react-redux';
-import {translate} from 'react-i18next';
-import {bindActionCreators} from 'redux';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { bindActionCreators } from 'redux';
 import { withStyles } from '@material-ui/core/styles';
 
 import Accession from 'model/accession/Accession';
@@ -24,7 +24,7 @@ const styles = (theme) => ({
   },
 });
 
-interface IAccessionCardProps {
+interface IAccessionCardProps extends React.ClassAttributes<any>, WithTranslation {
   accession: Accession;
   classes: any;
   index?: number;
@@ -32,7 +32,6 @@ interface IAccessionCardProps {
   removeAccessionFromMyList: (uuid: string) => void;
   accessions: any;
   editMode?: boolean;
-  t: any;
   translatedCountry: string;
 }
 
@@ -142,4 +141,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   removeAccessionFromMyList,
 }, dispatch);
 
-export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AccessionCard)));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(withTranslation()(AccessionCard)));

src/accessions/ui/c/AccessionRefCard.tsx

 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import {translate} from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 
 import Accession from 'model/accession/Accession';
 import Card, { CardContent, CardActions } from 'ui/common/Card';
@@ -19,7 +19,7 @@ const styles = (theme) => ({
 });
 
 const AccessionRefCard = ({ accessionRef, classes, index, editMode, t }:
-                         { accessionRef: AccessionRef, classes: any, index?: number, editMode?: boolean, t: any } & React.ClassAttributes<any>) => {
+                         WithTranslation & { accessionRef: AccessionRef, classes: any, index?: number, editMode?: boolean } & React.ClassAttributes<any>) => {
 
   const accession: Accession = accessionRef.accession;
 
@@ -54,4 +54,4 @@ const AccessionRefCard = ({ accessionRef, classes, index, editMode, t }:
   );
 };
 
-export default translate()(withStyles(styles)(AccessionRefCard));
+export default withStyles(styles)(withTranslation()(AccessionRefCard));

src/accessions/ui/c/BioClimateDisplay.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -35,7 +35,7 @@ const styles = (theme) => ({
   /*tslint:enable*/
 });
 
-const BioClimateDisplay = ({climateData, t, extraFilters, applyClimateFilters, inModal = false, classes, ...rest}: {climateData: TileClimate, t: any, extraFilters?: any, applyClimateFilters: any, inModal?: boolean, classes: any}) => {
+const BioClimateDisplay = ({climateData, t, extraFilters, applyClimateFilters, inModal = false, classes, ...rest}: WithTranslation & {climateData: TileClimate, extraFilters?: any, applyClimateFilters: any, inModal?: boolean, classes: any}) => {
     const doFilters = () => {
       console.log(`Applying climate filters`, climateData, extraFilters);
       document.body.classList.remove('modal-open');
@@ -79,4 +79,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   applyClimateFilters,
 }, dispatch);
 
-export default connect(null, mapDispatchToProps)(translate()(withStyles(styles)(BioClimateDisplay)));
+export default connect(null, mapDispatchToProps)(withStyles(styles)(withTranslation()(BioClimateDisplay)));

src/accessions/ui/c/ClimateTable.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import Table from '@material-ui/core/Table';
 import { TableHead } from '@material-ui/core';
 import TableRow from '@material-ui/core/TableRow';
@@ -8,7 +8,7 @@ import TableBody from '@material-ui/core/TableBody';
 
 const climateKeys = ['tmin', 'tmean', 'tmax', 'prec'];
 
-const ClimateTable = ({ climate, t }) => {
+const ClimateTable = ({ climate, t }: WithTranslation & { climate: any}) => {
   return (
     <Table padding="none">
       <TableHead>
@@ -29,4 +29,4 @@ const ClimateTable = ({ climate, t }) => {
   );
 };
 
-export default translate()(ClimateTable);
+export default withTranslation()(ClimateTable);

src/accessions/ui/c/Filters.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
-import {translate} from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { ACCESSION_FILTERFORM } from 'accessions/constants';
@@ -22,8 +22,10 @@ import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import Validators from 'utilities/Validators';
+import Crop from '../../../model/genesys/Crop';
 
-const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode, autocomplete, terms, crops, countryCodes, t, ...other}) => {
+const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode, autocomplete, terms, crops, countryCodes, t, ...other}:
+                            WithTranslation & {handleSubmit?: any, initialValues?: Accession, initialize?: any, filterCode?: string, autocomplete: any, terms: any, crops: Crop[], countryCodes: string[]} & any) => {
   // console.log('AccessionFilters', initialValues);
   let sectionIndex: number = 0;
   return (
@@ -223,8 +225,8 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   autocomplete,
 }, dispatch);
 
-export default translate()(reduxForm({
+export default reduxForm({
     enableReinitialize: true,
     destroyOnUnmount: false,
     form: ACCESSION_FILTERFORM,
-})(connect(mapStateToProps, mapDispatchToProps)(AccessionFilters)));
+})(connect(mapStateToProps, mapDispatchToProps)(withTranslation()(AccessionFilters)));

src/accessions/ui/c/MapConfigSection.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 // model
 import MapLayer from 'model/genesys/MapTileLayer';
 // ui
@@ -55,4 +55,4 @@ const mapStateToProps = (state, ownProps) => ({
 });
 
 
-export default translate()(connect(mapStateToProps, null)(withStyles(styles)(MapConfigSection)));
\ No newline at end of file
+export default withTranslation()(connect(mapStateToProps, null)(withStyles(styles)(MapConfigSection)));

src/accessions/ui/c/MapLayerConfig.tsx

 import * as React from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
-import { translate } from 'react-i18next';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
 
 // actions
 import { updateTileLayerInfo } from 'accessions/actions/public';
@@ -86,7 +86,7 @@ const styles = (theme) => ({
 /*tslint:enable*/
 
 
-interface IMapLayerConfigProps extends React.ClassAttributes<any> {
+interface IMapLayerConfigProps extends React.ClassAttributes<any>, WithStyles, WithTranslation {
   title: string;
   classes: any;
   layer: MapLayer;
@@ -176,4 +176,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   updateTileLayerInfo,
 }, dispatch);
 
-export default translate()(connect(null, mapDispatchToProps)(withStyles(styles)(MapLayerConfig)));
+export default connect(null, mapDispatchToProps)(withStyles(styles)(withTranslation()(MapLayerConfig)));

src/accessions/ui/c/MapSavedSection.tsx

 import * as React from 'react';
-import {translate} from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { Field, reduxForm } from 'redux-form';
 
 import { ACCESSION_REMEMBERMAPFORM } from 'accessions/constants';
 
 import Validators from 'utilities/Validators';
 
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Button from '@material-ui/core/Button';
@@ -131,9 +131,7 @@ const SavedMapControl = (
 );
 
 
-interface IMapSavedSectionProps extends React.ClassAttributes<any> {
-  classes: any;
-  t: any;
+interface IMapSavedSectionProps extends React.ClassAttributes<any>, WithStyles, WithTranslation {
   submitting: boolean;
   invalid: boolean;
   toggleInputFocus: (focused: boolean) => void;
@@ -253,11 +251,11 @@ class MapSavedSection extends React.Component<IMapSavedSectionProps> {
   }
 }
 
-export default translate()(reduxForm({
+export default reduxForm({
   enableReinitialize: true,
   destroyOnUnmount: false,
   form: ACCESSION_REMEMBERMAPFORM,
   initialValues: {
     color: '#ff0000',
   }
-})(withStyles(styles)(MapSavedSection)));
+})(withStyles(styles)(withTranslation()(MapSavedSection)));

src/accessions/ui/c/PdciTable.tsx

 import * as React from 'react';
-import {translate} from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 // model
@@ -7,19 +7,17 @@ import PDCI from 'model/accession/PDCI';
 
 // UI
 import Grid from '@material-ui/core/Grid';
-import withWidth from '@material-ui/core/withWidth';
+import withWidth, { WithWidth } from '@material-ui/core/withWidth';
 import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
 
 import {Properties, PropertiesItem} from 'ui/common/Properties';
 import {PageSection} from 'ui/layout/PageLayout';
 
-interface IPdciTableProps extends React.ClassAttributes<any> {
+interface IPdciTableProps extends React.ClassAttributes<any>, WithWidth, WithTranslation {
   children?: any;
-  width: Breakpoint;
   pdci: PDCI;
   title: string;
   small?: boolean;
-  t: any;
 }
 
 const mobile = ['sm', 'xs'] as Breakpoint[];
@@ -86,4 +84,4 @@ class PdciTable extends React.Component<IPdciTableProps, any> {
   }
 }
 
-export default translate()(withWidth()(PdciTable));
+export default withWidth()(withTranslation()(PdciTable));

src/accessions/ui/c/PrecipitationChart.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { ColumnChart } from 'react-chartkick';
 import { Grid } from '@material-ui/core';
 
 require('chart.js');
 const chartColor = '#8888ee';
 
-const PrecipitationChart = ({ halfWidth = false, climate, t }) => {
+const PrecipitationChart = ({ halfWidth = false, climate, t }: WithTranslation & { halfWidth?: boolean, climate}) => {
 
   const precipitation = {
     name: t('accessions.climate.precipitation'),
@@ -47,4 +47,4 @@ const PrecipitationChart = ({ halfWidth = false, climate, t }) => {
   );
 };
 
-export default translate()(PrecipitationChart);
+export default withTranslation()(PrecipitationChart);

src/accessions/ui/c/TemperatureChart.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { AreaChart } from 'react-chartkick';
 import { Grid } from '@material-ui/core';
 
 require('chart.js');
 const chartColor = '#ee8888';
-const TemperatureChart = ({ halfWidth = false, climate, t }) => {
+const TemperatureChart = ({ halfWidth = false, climate, t }: WithTranslation & { halfWidth?: boolean, climate: any }) => {
 
   const minData = {
     name: t('accessions.climate.tMin'),
@@ -62,4 +62,4 @@ const TemperatureChart = ({ halfWidth = false, climate, t }) => {
   );
 };
 
-export default translate()(TemperatureChart);
+export default withTranslation()(TemperatureChart);