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 React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import "./i18n"; import initI18n from "./i18n";
import { log } from '@genesys/client/utilities/debug'; import { log } from '@genesys/client/utilities/debug';
// import * as cookies from 'es-cookie'; // import * as cookies from 'es-cookie';
...@@ -42,9 +42,11 @@ function checkAccessTokens(apiUrl: string, clientId: string, clientSecret: strin ...@@ -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 }); reconfigureServiceAxios({ apiUrl });
initI18n(language);
checkAccessTokens(apiUrl, clientId, clientSecret).then( (result) => { checkAccessTokens(apiUrl, clientId, clientSecret).then( (result) => {
ReactDOM.render( ReactDOM.render(
......
...@@ -4,15 +4,17 @@ import translations from 'translations.json'; ...@@ -4,15 +4,17 @@ import translations from 'translations.json';
// the translations // the translations
i18n const initI18n = (lang) => {
.use(initReactI18next) // passes i18n down to react-i18next return i18n
.init({ .use(initReactI18next) // passes i18n down to react-i18next
resources: translations, .init({
lng: 'en', resources: translations,
lng: lang,
interpolation: { interpolation: {
escapeValue: false, escapeValue: false,
}, },
}); });
}
export default i18n; export default initI18n;
...@@ -4,6 +4,15 @@ ...@@ -4,6 +4,15 @@
"nav": { "nav": {
"home": "Home", "home": "Home",
"apiInfo": "API info" "apiInfo": "API info"
},
"pag": {
"first": "First",
"prev": "Prev",
"next": "Next",
"last": "Last"
},
"error": {
"notFound": "Not Found"
} }
} }
} }
......
import * as React from 'react'; import * as React from 'react';
import {withTranslation, WithTranslation} from "react-i18next";
// interface INotFoundProps extends React.ClassAttributes<any> {} // interface INotFoundProps extends React.ClassAttributes<any> {}
class NotFound extends React.Component<any> { class NotFound extends React.Component<WithTranslation> {
public render() { public render() {
const { t } = this.props
return ( return (
<h3> <h3>
Not found {t('error.notFound')}
</h3> </h3>
) )
} }
} }
export default NotFound export default withTranslation()(NotFound)
import React from 'react'; import React from 'react';
import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage'; import FilteredPage, { IPageRequest } from '@genesys/client/model/FilteredPage';
import { history } from './App'; 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>; loadData: (filter: Record<string, any>, pageR: IPageRequest) => Promise<any>;
paged: FilteredPage<any>; paged: FilteredPage<any>;
children: React.ReactNode; children: React.ReactNode;
} }
export default class Pagination extends React.Component<IPagination, any> { class Pagination extends React.Component<IPagination> {
public componentDidMount() { public componentDidMount() {
const { paged } = this.props; const { paged } = this.props;
if (paged) { if (paged) {
...@@ -78,35 +79,35 @@ export default class Pagination extends React.Component<IPagination, any> { ...@@ -78,35 +79,35 @@ export default class Pagination extends React.Component<IPagination, any> {
}; };
private renderPagination = () => { private renderPagination = () => {
const { paged } = this.props; const { paged, t } = this.props;
const currentPageStyle = { fontWeight: 500, border: 0 }; const currentPageStyle = { fontWeight: 500, border: 0 };
return ( return (
<div style={ { display: 'flex' } }> <div style={ { display: 'flex' } }>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ 0 } disabled={ paged.number === 0 }> <button style={ { border: 0 } } onClick={ this.toPage } data-page={ 0 } disabled={ paged.number === 0 }>
{ '<< First' } { `<< ${t('pag.first')}`}
</button> </button>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number - 1 } disabled={ paged.number === 0 }> <button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number - 1 } disabled={ paged.number === 0 }>
{ '< Prev' } { `< ${t('pag.prev')}`}
</button> </button>
{ this.getPageNumbers().map((page, i) => ( { this.getPageNumbers().map((page, i) => (
<button <button
key={ `page-${page}-${i}` } key={ `page-${page}-${i}` }
style={ paged.number === page - 1 ? currentPageStyle : { border: 0 } } style={ paged.number === page - 1 ? currentPageStyle : { border: 0 } }
disabled={ paged.number === page - 1 } disabled={ paged.number === page - 1 }
onClick={ this.toPage } onClick={ this.toPage }
data-page={ page - 1 } data-page={ page - 1 }
> >
{ page } { page }
</button>
)) }
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number + 1 } disabled={ paged.last }>
{ `${t('pag.next')} >`}
</button> </button>
)) } <button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.totalPages - 1 } disabled={ paged.last }>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number + 1 } disabled={ paged.last }> { `${t('pag.last')} >>`}
{ 'Next >' } </button>
</button> </div>
<button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.totalPages - 1 } disabled={ paged.last }>
{ 'Last >>' }
</button>
</div>
); );
} }
...@@ -120,3 +121,5 @@ export default class Pagination extends React.Component<IPagination, any> { ...@@ -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