Feature(i18n): support react-i18n withNamespace function

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.5'
+version: '3.7'
 
 services:
   web:

frontend/src/components/Dropdown/__tests__/dropdown.spec.tsx

@@ -11,7 +11,7 @@ describe('Dropdown', () => {
     const renderer = TestRenderer.create(
       <MemoryRouter>
         <div>
-          <Dropdown id='id' dropdownLists={['dropdown']} t={tMock} i18n={i18nMock} />,
+          <Dropdown id='id' dropdownLists={['dropdown']} t={tMock} tReady={true} i18n={i18nMock} />,
         </div>
       </MemoryRouter>,
     );

frontend/src/components/Dropdown/dropdown.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import i18ns from './i18n';
 
-interface IDropdownProps extends InjectedI18nProps, InjectedTranslateProps {
+interface IDropdownProps extends Ii18nProps {
   id: string;
   dropdownLists: string[];
 }
@@ -44,4 +44,4 @@ export class Dropdown extends React.Component<IDropdownProps> {
   }
 }
 
-export default translate('Dropdown')(Dropdown);
+export default withNamespaces('Dropdown')(Dropdown);

frontend/src/components/Footer/__tests__/footer.spec.tsx

@@ -7,7 +7,7 @@ import { Footer } from '../footer';
 describe('Footer', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <Footer t={tMock} i18n={i18nMock} />,
+      <Footer t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/components/Footer/footer.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import i18ns from './i18n';
 
-interface IFooterProps extends InjectedI18nProps, InjectedTranslateProps { }
-
-export class Footer extends React.Component<IFooterProps> {
-  constructor(props: IFooterProps) {
+export class Footer extends React.Component<Ii18nProps> {
+  constructor(props: Ii18nProps) {
     super(props);
     this.loadI18ns();
   }
@@ -50,4 +48,4 @@ export class Footer extends React.Component<IFooterProps> {
   }
 }
 
-export default translate('Footer')(Footer);
+export default withNamespaces('Footer')(Footer);

frontend/src/components/Header/__tests__/header.spec.tsx

@@ -13,7 +13,7 @@ describe('Header', () => {
     const renderer = TestRenderer.create(
       <MemoryRouter>
         <div>
-          <Header pathname='/parallax' t={tMock} i18n={i18nMock} />,
+          <Header pathname='/parallax' t={tMock} tReady={true} i18n={i18nMock} />,
         </div>
       </MemoryRouter>,
     );

frontend/src/components/Header/header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -15,7 +15,7 @@ interface IHeaderStateProps {
   pathname: string;
 }
 
-interface IHeaderProps extends IHeaderStateProps, InjectedI18nProps, InjectedTranslateProps { }
+interface IHeaderProps extends IHeaderStateProps, Ii18nProps { }
 
 export class Header extends React.Component<IHeaderProps> {
   constructor(props: IHeaderProps) {
@@ -90,4 +90,4 @@ const mapStateToProps = (state: IGlobalState): IHeaderStateProps => ({
 export default connect(
   mapStateToProps,
   null,
-)(translate('Header')(Header));
+)(withNamespaces('Header')(Header));

frontend/src/pages/HomePage/__tests__/homePage.spec.tsx

@@ -12,7 +12,7 @@ jest.mock('../components/TranslationButton', () => 'TranslationButton');
 describe('HomePage', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <HomePage t={tMock} i18n={i18nMock} />,
+      <HomePage t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/HomePage/components/Carousel/__tests__/carousel.spec.tsx

@@ -8,7 +8,7 @@ import { Carousel } from '../carousel';
 describe('Carousel', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <Carousel t={tMock} i18n={i18nMock} />,
+      <Carousel t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/HomePage/components/Carousel/carousel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import { CAROUSEL_AUTOPLAY_INTERVAL, TOAST_DISPLAY_DURATION, TOOLTIP_DELAY_TIME } from './constants/carousel';
 import i18ns from './i18n';
@@ -20,12 +20,10 @@ const toastConfig: Partial<M.ToastOptions> = {
   displayLength: TOAST_DISPLAY_DURATION,
 };
 
-interface ICarouselProps extends InjectedI18nProps, InjectedTranslateProps { }
-
-export class Carousel extends React.Component<ICarouselProps> {
+export class Carousel extends React.Component<Ii18nProps> {
   public timer: number = 0;
 
-  constructor(props: ICarouselProps) {
+  constructor(props: Ii18nProps) {
     super(props);
     this.loadI18ns();
   }
@@ -92,4 +90,4 @@ export class Carousel extends React.Component<ICarouselProps> {
   }
 }
 
-export default translate('Carousel')(Carousel);
+export default withNamespaces('Carousel')(Carousel);

frontend/src/pages/HomePage/components/Pushpin/__tests__/pushpin.spec.tsx

@@ -7,7 +7,7 @@ import { Pushpin } from '../pushpin';
 describe('Pushpin', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <Pushpin color='red' depth='base' t={tMock} i18n={i18nMock} />,
+      <Pushpin color='red' depth='base' t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/HomePage/components/Pushpin/pushpin.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import i18ns from './i18n';
 
 const styles = require('./pushpin.scss');
 
-interface IPushpinProps extends InjectedI18nProps, InjectedTranslateProps {
+interface IPushpinProps extends Ii18nProps {
   color: string;
   depth: string;
 }
@@ -43,4 +43,4 @@ export class Pushpin extends React.Component<IPushpinProps> {
   }
 }
 
-export default translate('Pushpin')(Pushpin);
+export default withNamespaces('Pushpin')(Pushpin);

frontend/src/pages/HomePage/components/TranslationButton/__tests__/translationButton.spec.tsx

@@ -8,7 +8,7 @@ import { TranslationButton } from '../translationButton';
 describe('TranslationButton', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <TranslationButton t={tMock} i18n={i18nMock} />,
+      <TranslationButton t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/HomePage/components/TranslationButton/translationButton.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 const floatingActionButtonConfig: Partial<M.FloatingActionButtonOptions> = {
   direction: 'top',
 };
 
-interface ITranslationButtonProps extends InjectedI18nProps, InjectedTranslateProps { }
-
-export class TranslationButton extends React.Component<ITranslationButtonProps> {
+export class TranslationButton extends React.Component<Ii18nProps> {
   public componentDidMount() {
     const elems = document.querySelectorAll('.fixed-action-btn');
     M.FloatingActionButton.init(elems, floatingActionButtonConfig);
@@ -36,4 +34,4 @@ export class TranslationButton extends React.Component<ITranslationButtonProps>
   }
 }
 
-export default translate('TranslationButton')(TranslationButton);
+export default withNamespaces('TranslationButton')(TranslationButton);

frontend/src/pages/HomePage/homePage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import Carousel from './components/Carousel';
 import Pushpin from './components/Pushpin';
@@ -8,10 +8,8 @@ import i18ns from './i18n';
 
 const styles = require('./homePage.scss');
 
-interface IHomeProps extends InjectedI18nProps, InjectedTranslateProps { }
-
-export class HomePage extends React.Component<IHomeProps> {
-  constructor(props: IHomeProps) {
+export class HomePage extends React.Component<Ii18nProps> {
+  constructor(props: Ii18nProps) {
     super(props);
     this.loadI18ns();
   }
@@ -62,4 +60,4 @@ export class HomePage extends React.Component<IHomeProps> {
   }
 }
 
-export default translate('HomePage')(HomePage);
+export default withNamespaces('HomePage')(HomePage);

frontend/src/pages/NotFoundPage/__tests__/notFoundPage.spec.tsx

@@ -7,7 +7,7 @@ import { NotFoundPage } from '../notFoundPage';
 describe('NotFoundPage', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <NotFoundPage t={tMock} i18n={i18nMock} />,
+      <NotFoundPage t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/NotFoundPage/notFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import i18ns from './i18n';
 
@@ -12,14 +12,12 @@ const notFoundImageList = [
   '404.jpg',
 ];
 
-interface INotFoundPageProps extends InjectedI18nProps, InjectedTranslateProps { }
-
 interface INotFoundPageState {
   imageId: number;
 }
 
-export class NotFoundPage extends React.Component<INotFoundPageProps, INotFoundPageState> {
-  constructor(props: INotFoundPageProps) {
+export class NotFoundPage extends React.Component<Ii18nProps, INotFoundPageState> {
+  constructor(props: Ii18nProps) {
     super(props);
     this.loadI18ns();
     this.state = { imageId: this.getRandomInt(0, notFoundImageList.length) };
@@ -49,4 +47,4 @@ export class NotFoundPage extends React.Component<INotFoundPageProps, INotFoundP
   }
 }
 
-export default translate('NotFoundPage')(NotFoundPage);
+export default withNamespaces('NotFoundPage')(NotFoundPage);

frontend/src/pages/ParallaxPage/__tests__/parallaxPage.spec.tsx

@@ -10,7 +10,7 @@ jest.mock('../components/PrismCodes', () => 'PrismCodes');
 describe('ParallaxPage', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <ParallaxPage t={tMock} i18n={i18nMock} />,
+      <ParallaxPage t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/ParallaxPage/parallaxPage.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import PrismCodes, { PARALLAX_CODE } from './components/PrismCodes';
 import i18ns from './i18n';
 
 const styles = require('./parallaxPage.scss');
 
-interface IParallaxPageProps extends InjectedI18nProps, InjectedTranslateProps { }
-
-export class ParallaxPage extends React.Component<IParallaxPageProps> {
-  constructor(props: IParallaxPageProps) {
+export class ParallaxPage extends React.Component<Ii18nProps> {
+  constructor(props: Ii18nProps) {
     super(props);
     this.loadI18ns();
   }
@@ -60,4 +58,4 @@ export class ParallaxPage extends React.Component<IParallaxPageProps> {
   }
 }
 
-export default translate('ParallaxPage')(ParallaxPage);
+export default withNamespaces('ParallaxPage')(ParallaxPage);

frontend/src/pages/ReactPage/__tests__/reactPage.spec.tsx

@@ -10,7 +10,7 @@ jest.mock('../components/TodoLayout', () => 'TodoLayout');
 describe('ReactPage', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <ReactPage t={tMock} i18n={i18nMock} />,
+      <ReactPage t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/ReactPage/components/FetchNote/__tests__/fetchNote.spec.tsx

@@ -19,6 +19,7 @@ describe('FetchNote', () => {
         editNote={dispatchMock}
         removeNote={dispatchMock}
         t={tMock}
+        tReady={true}
         i18n={i18nMock}
       />,
     );

frontend/src/pages/ReactPage/components/FetchNote/fetchNote.tsx

@@ -1,6 +1,6 @@
 import { List } from 'immutable';
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 import { connect } from 'react-redux';
 import { AnyAction, Dispatch } from 'redux';
 
@@ -27,7 +27,7 @@ interface IFetchNoteDispatchProps {
   removeNote(id: number): void;
 }
 
-interface IFetchNoteProps extends IFetchNoteStateProps, IFetchNoteDispatchProps, InjectedI18nProps,  InjectedTranslateProps { }
+interface IFetchNoteProps extends IFetchNoteStateProps, IFetchNoteDispatchProps, Ii18nProps { }
 
 export class FetchNote extends React.Component<IFetchNoteProps> {
   constructor(props: IFetchNoteProps) {
@@ -104,4 +104,4 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>): IFetchNoteDispatchPr
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(translate('FetchNote')(FetchNote));
+)(withNamespaces('FetchNote')(FetchNote));

frontend/src/pages/ReactPage/components/TodoLayout/__tests__/todoLayout.spec.tsx

@@ -11,7 +11,7 @@ jest.mock('../components/TodoList', () => 'TodoList');
 describe('TodoLayout', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <TodoLayout t={tMock} i18n={i18nMock} />,
+      <TodoLayout t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/ReactPage/components/TodoLayout/components/TodoFooter/__tests__/todoFooter.spec.tsx

@@ -9,7 +9,7 @@ jest.mock('../components/TodoFilter', () => 'TodoFilter');
 describe('TodoFooter', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <TodoFooter t={tMock} i18n={i18nMock} />,
+      <TodoFooter t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/ReactPage/components/TodoLayout/components/TodoFooter/todoFooter.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
+import { withNamespaces, WithNamespaces as Ii18nProps } from 'react-i18next';
 
 import TodoFilter from './components/TodoFilter';
 import i18ns from './i18n';
 
-interface ITodoFooterProps extends InjectedI18nProps, InjectedTranslateProps { }
-
-export class TodoFooter extends React.Component<ITodoFooterProps> {
-  constructor(props: ITodoFooterProps) {
+export class TodoFooter extends React.Component<Ii18nProps> {
+  constructor(props: Ii18nProps) {
     super(props);
     this.loadI18ns();
   }
@@ -37,4 +35,4 @@ export class TodoFooter extends React.Component<ITodoFooterProps> {
   }
 }
 
-export default translate('TodoFooter')(TodoFooter);
+export default withNamespaces('TodoFooter')(TodoFooter);

frontend/src/pages/ReactPage/components/TodoLayout/components/TodoInput/__tests__/todoInput.spec.tsx

@@ -7,7 +7,7 @@ import { TodoInput } from '../todoInput';
 describe('TodoInput', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <TodoInput onSubmit={dispatchMock} t={tMock} i18n={i18nMock} />,
+      <TodoInput onSubmit={dispatchMock} t={tMock} tReady={true} i18n={i18nMock} />,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();