Skip to content

GitLab

G
Genesys Website
Commit 9bfa23e9 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files
Options

initial fix of i18n

parent dd58b857
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 906 additions and 988 deletions
i18n/options-base.ts
View file @ 9bfa23e9
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
View file @ 9bfa23e9
......@@ -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
View file @ 9bfa23e9
......@@ -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=="
}
}
},
......
src/accessions/ui/BrowsePage.tsx
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
......@@ -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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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
View file @ 9bfa23e9
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 }) => {