Commit 3c6c6ddb authored by Maksym Tishchenko's avatar Maksym Tishchenko
Browse files

Updated i18n instance so that language can be dynamically set.

Translated NotFound and Pagination pages as an example.
parent 353f2087
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "./i18n";
import initI18n from "./i18n";
import { log } from '@genesys/client/utilities/debug';
// import * as cookies from 'es-cookie';
......@@ -42,9 +42,11 @@ function checkAccessTokens(apiUrl: string, clientId: string, clientSecret: strin
};
export function showGenesysUI(apiUrl: string, clientId: string, clientSecret: string, holdingNode: HTMLElement, filter: object = {}) {
export function showGenesysUI(apiUrl: string, clientId: string, clientSecret: string, holdingNode: HTMLElement, filter: object = {}, language: string = "en") {
reconfigureServiceAxios({ apiUrl });
initI18n(language);
checkAccessTokens(apiUrl, clientId, clientSecret).then( (result) => {
ReactDOM.render(
......
......@@ -4,15 +4,17 @@ import translations from 'translations.json';
// the translations
i18n
const initI18n = (lang) => {
return i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources: translations,
lng: 'en',
lng: lang,
interpolation: {
escapeValue: false,
},
});
}
export default i18n;
export default initI18n;
......@@ -4,6 +4,15 @@
"nav": {
"home": "Home",
"apiInfo": "API info"
},
"pag": {
"first": "First",
"prev": "Prev",
"next": "Next",
"last": "Last"
},
"error": {
"notFound": "Not Found"
}
}
}
......
import * as React from 'react';
import {withTranslation, WithTranslation} from "react-i18next";
// interface INotFoundProps extends React.ClassAttributes<any> {}
class NotFound extends React.Component<any> {
class NotFound extends React.Component<WithTranslation> {
public render() {
const { t } = this.props
return (
<h3>
Not found
{t('error.notFound')}
</h3>
)
}
}
export default NotFound
export default withTranslation()(NotFound)
import React from 'react';
import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage';
import { history } from './App';
import {withTranslation, WithTranslation} from "react-i18next";
interface IPagination extends React.ClassAttributes<any> {
interface IPagination extends React.ClassAttributes<any>, WithTranslation {
loadData: (filter: Record<string, any>, pageR: IPageRequest) => Promise<any>;
paged: FilteredPage<any>;
children: React.ReactNode;
}
export default class Pagination extends React.Component<IPagination, any> {
class Pagination extends React.Component<IPagination> {
public componentDidMount() {
const { paged } = this.props;
if (paged) {
......@@ -78,16 +79,16 @@ export default class Pagination extends React.Component<IPagination, any> {
};
private renderPagination = () => {
const { paged } = this.props;
const { paged, t } = this.props;
const currentPageStyle = { fontWeight: 500, border: 0 };
return (
<div style={ { display: 'flex' } }>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ 0 } disabled={ paged.number === 0 }>
{ '<< First' }
{ `<< ${t('pag.first')}`}
</button>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number - 1 } disabled={ paged.number === 0 }>
{ '< Prev' }
{ `< ${t('pag.prev')}`}
</button>
{ this.getPageNumbers().map((page, i) => (
<button
......@@ -101,10 +102,10 @@ export default class Pagination extends React.Component<IPagination, any> {
</button>
)) }
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number + 1 } disabled={ paged.last }>
{ 'Next >' }
{ `${t('pag.next')} >`}
</button>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.totalPages - 1 } disabled={ paged.last }>
{ 'Last >>' }
{ `${t('pag.last')} >>`}
</button>
</div>
);
......@@ -120,3 +121,5 @@ export default class Pagination extends React.Component<IPagination, any> {
);
};
}
export default withTranslation()(Pagination)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment