Feature(translation): upgrade react-i18next to v10

Armour · Armour · commit 2c06c58b7f22 · 2019-02-06T14:33:21.000-08:00
diff --git a/__mocks__/react-i18next.tsx b/__mocks__/react-i18next.tsx
@@ -1 +1 @@
-export const NamespacesConsumer = ({ children }: any) => children((k: string) => k, { i18n: {} });
+export const Translation = ({ children }: any) => children((k: string) => k, { i18n: {} });
diff --git a/frontend/src/components/Dropdown/dropdown.tsx b/frontend/src/components/Dropdown/dropdown.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 interface IDropdownProps {
@@ -19,15 +19,15 @@ export class Dropdown extends React.Component<IDropdownProps> {
 
   public render() {
     return (
-      <NamespacesConsumer ns='common'>
+      <Translation ns='common'>
         {(t) => (
           <ul id={this.props.id} className='dropdown-content'>
             {this.props.dropdownLists.map((key) =>
               <li key={key}><Link to={`/${key}`}>{t('dropdown.' + key)}</Link></li>,
             )}
           </ul>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/components/Footer/footer.tsx b/frontend/src/components/Footer/footer.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 export class Footer extends React.Component {
   public render() {
     return (
-      <NamespacesConsumer ns='common'>
+      <Translation ns='common'>
         {(t) => (
           <footer className='page-footer'>
             <div className='container'>
@@ -32,7 +32,7 @@ export class Footer extends React.Component {
             </div>
           </footer>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/components/Header/header.tsx b/frontend/src/components/Header/header.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -37,7 +37,7 @@ export class Header extends React.Component<IHeaderStateProps> {
   public render() {
     const dropdownList = ['parallax'];
     return (
-      <NamespacesConsumer ns='common'>
+      <Translation ns='common'>
         {(t) => (
           <div>
             <nav>
@@ -68,7 +68,7 @@ export class Header extends React.Component<IHeaderStateProps> {
             </ul>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/HomePage/components/Carousel/carousel.tsx b/frontend/src/pages/HomePage/components/Carousel/carousel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 import { CAROUSEL_AUTOPLAY_INTERVAL, TOAST_DISPLAY_DURATION, TOOLTIP_DELAY_TIME } from './constants/carousel';
 
@@ -55,7 +55,7 @@ export class Carousel extends React.Component {
 
   public render() {
     return (
-      <NamespacesConsumer ns='homePage'>
+      <Translation ns='homePage'>
         {(t) => (
           this.initTooltip(t('carousel.tooltipText')),
           <div className='carousel carousel-slider center z-depth-3' data-indicators='true'>
@@ -82,7 +82,7 @@ export class Carousel extends React.Component {
             </a>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/HomePage/components/Pushpin/pushpin.tsx b/frontend/src/pages/HomePage/components/Pushpin/pushpin.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 const styles = require('./pushpin.scss');
 
@@ -11,7 +11,7 @@ interface IPushpinProps {
 export class Pushpin extends React.Component<IPushpinProps> {
   public render() {
     return (
-      <NamespacesConsumer ns='homePage'>
+      <Translation ns='homePage'>
         {(t) => (
           <div id={this.props.color} className={`${styles.pushpin} ${this.props.color} ${this.props.depth}`}>
             <nav className='pushpin-nav pin-top' data-target={'pushpin-' + this.props.color}>
@@ -27,7 +27,7 @@ export class Pushpin extends React.Component<IPushpinProps> {
             </nav>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/HomePage/components/TranslationButton/translationButton.tsx b/frontend/src/pages/HomePage/components/TranslationButton/translationButton.tsx
@@ -1,6 +1,6 @@
 import i18next from 'i18next';
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 const floatingActionButtonConfig: Partial<M.FloatingActionButtonOptions> = {
   direction: 'top',
@@ -19,7 +19,7 @@ export class TranslationButton extends React.Component {
 
   public render() {
     return (
-      <NamespacesConsumer>
+      <Translation>
         {(_, {i18n}) => (
           <div className='fixed-action-btn vertical'>
             <a className='btn-floating btn-large red'>
@@ -32,7 +32,7 @@ export class TranslationButton extends React.Component {
             </ul>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/HomePage/homePage.tsx b/frontend/src/pages/HomePage/homePage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 import Carousel from './components/Carousel';
 import Pushpin from './components/Pushpin';
@@ -27,7 +27,7 @@ export class HomePage extends React.Component {
 
   public render() {
     return (
-      <NamespacesConsumer ns='homePage'>
+      <Translation ns='homePage'>
         {(t) => (
           <div>
             <div className={styles['home-page-block']}>
@@ -45,7 +45,7 @@ export class HomePage extends React.Component {
             <TranslationButton />
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/NotFoundPage/notFoundPage.tsx b/frontend/src/pages/NotFoundPage/notFoundPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 const styles = require('./notFoundPage.scss');
 
@@ -28,14 +28,14 @@ export class NotFoundPage extends React.Component<{}, INotFoundPageState> {
 
   public render() {
     return (
-      <NamespacesConsumer ns='notFoundPage'>
+      <Translation ns='notFoundPage'>
         {(t) => (
           <div>
             <h1 className='page-title'>{t('title')}</h1>
             <img className={styles['not-found-img']} src={require('./assets/images/' + notFoundImageList[this.state.imageId])} alt='not-found-img' height='550px' width='750px' />
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/ParallaxPage/parallaxPage.tsx b/frontend/src/pages/ParallaxPage/parallaxPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 import PrismCodes, { PARALLAX_CODE } from './components/PrismCodes';
 
@@ -13,7 +13,7 @@ export class ParallaxPage extends React.Component {
 
   public render() {
     return (
-      <NamespacesConsumer ns='parallaxPage'>
+      <Translation ns='parallaxPage'>
         {(t) => (
           <div>
             <div className='white'>
@@ -43,7 +43,7 @@ export class ParallaxPage extends React.Component {
             </div>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/ReactPage/components/FetchNote/fetchNote.tsx b/frontend/src/pages/ReactPage/components/FetchNote/fetchNote.tsx
@@ -1,6 +1,6 @@
 import { List } from 'immutable';
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { AnyAction, Dispatch } from 'redux';
 
@@ -49,7 +49,7 @@ export class FetchNote extends React.Component<IFetchNoteProps> {
       </div>
     );
     return (
-      <NamespacesConsumer ns='reactPage'>
+      <Translation ns='reactPage'>
         {(t) => (
           <div className={`center-align z-depth-2 ${styles['fetch-note-layout']}`}>
             <span className={styles['fetch-note-title']}>{t('fetchNote.asyncCalls')}</span>
@@ -62,7 +62,7 @@ export class FetchNote extends React.Component<IFetchNoteProps> {
             {this.props.error !== '' && errorPanel}
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/ReactPage/components/TodoLayout/components/TodoFooter/todoFooter.tsx b/frontend/src/pages/ReactPage/components/TodoLayout/components/TodoFooter/todoFooter.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 import TodoFilter from './components/TodoFilter';
 
 export class TodoFooter extends React.Component {
   public render() {
     return (
-      <NamespacesConsumer ns='reactPage'>
+      <Translation ns='reactPage'>
         {(t) => (
           <div className='todo-footer'>
             <TodoFilter filter='SHOW_ALL'>
@@ -20,7 +20,7 @@ export class TodoFooter extends React.Component {
             </TodoFilter>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/ReactPage/components/TodoLayout/components/TodoInput/todoInput.tsx b/frontend/src/pages/ReactPage/components/TodoLayout/components/TodoInput/todoInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { AnyAction, Dispatch } from 'redux';
 
@@ -29,7 +29,7 @@ export class TodoInput extends React.Component<ITodoInputDispatchProps> {
 
   public render() {
     return (
-      <NamespacesConsumer ns='reactPage'>
+      <Translation ns='reactPage'>
         {(t) => (
           <div>
             <form onSubmit={this.onSubmit}>
@@ -40,7 +40,7 @@ export class TodoInput extends React.Component<ITodoInputDispatchProps> {
             </form>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/ReactPage/components/TodoLayout/todoLayout.tsx b/frontend/src/pages/ReactPage/components/TodoLayout/todoLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 import TodoFooter from './components/TodoFooter';
 import TodoInput from './components/TodoInput';
@@ -10,7 +10,7 @@ const styles = require('./todoLayout.scss');
 export class TodoLayout extends React.Component {
   public render() {
     return (
-      <NamespacesConsumer ns='reactPage'>
+      <Translation ns='reactPage'>
         {(t) => (
           <div className={`center-align z-depth-2 ${styles['todo-layout']}`}>
             <span className={styles['todo-title']}>{t('title')}</span>
@@ -19,7 +19,7 @@ export class TodoLayout extends React.Component {
             <TodoFooter />
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/frontend/src/pages/ReactPage/reactPage.tsx b/frontend/src/pages/ReactPage/reactPage.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { NamespacesConsumer } from 'react-i18next';
+import { Translation } from 'react-i18next';
 
 import FetchNote from './components/FetchNote';
 import TodoLayout from './components/TodoLayout';
 
 export class ReactPage extends React.Component {
   public render() {
     return (
-      <NamespacesConsumer ns='reactPage'>
+      <Translation ns='reactPage'>
         {(t) => (
           <div>
             <div className='react-container'>
@@ -17,7 +17,7 @@ export class ReactPage extends React.Component {
             </div>
           </div>
         )}
-      </NamespacesConsumer>
+      </Translation>
     );
   }
 }
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export const NamespacesConsumer = ({ children }: any) => children((k: string) => k, { i18n: {} });`
	`1`	`+export const Translation = ({ children }: any) => children((k: string) => k, { i18n: {} });`