Feat/i18next language provider

app/app.js

@@ -1,21 +1,23 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/lib/integration/react';
+import { I18nextProvider } from 'react-i18next';
 import LanguageProvider from '@atoms/LanguageProvider';
 import RootScreen from '@scenes/RootScreen';
+import i18n from '@app/i18n';
 import createStore from '@app/rootReducer';
-import { translationMessages } from './i18n';
-import 'react-native-gesture-handler';
 
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/lib/integration/react';
+import 'react-native-gesture-handler';
 const { store, persistor } = createStore();
-
 const App = () => (
   <Provider store={store}>
-    <LanguageProvider messages={translationMessages}>
-      <PersistGate loading={null} persistor={persistor}>
-        <RootScreen />
-      </PersistGate>
-    </LanguageProvider>
+    <PersistGate loading={null} persistor={persistor}>
+      <I18nextProvider i18n={i18n}>
+        <LanguageProvider>
+          <RootScreen />
+        </LanguageProvider>
+      </I18nextProvider>
+    </PersistGate>
   </Provider>
 );
 

app/components/atoms/Container/tests/index.test.js

@@ -4,17 +4,17 @@
  *
  */
 import React from 'react';
-import { renderWithIntl } from 'app/utils/testUtils';
+import { renderWithI18next } from 'app/utils/testUtils';
 import Container from '../index';
 
 describe('<Container />', () => {
   it('should render and match the snapshot', () => {
-    const baseElement = renderWithIntl(<Container />);
+    const baseElement = renderWithI18next(<Container />);
     expect(baseElement).toMatchSnapshot();
   });
 
   it('should contain 1 container', () => {
-    const { getAllByTestId } = renderWithIntl(<Container />);
+    const { getAllByTestId } = renderWithI18next(<Container />);
     expect(getAllByTestId('container').length).toBe(1);
   });
 });

app/components/atoms/LanguageProvider/index.js

@@ -1,56 +1,23 @@
-/*
- *
- * LanguageProvider
- *
- * this component connects the redux state language locale to the
- * IntlProvider component and i18n messages (loaded from `app/translations`)
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { IntlProvider } from 'react-intl';
+import { useTranslation } from 'react-i18next';
 
-import { makeSelectLocale } from './selectors';
 /**
- * Provides internationalization (i18n) support by wrapping components with an IntlProvider.
+ * Provides internationalization (i18n) support by ensuring that the necessary
+ * translations and locale information are available throughout the app.
+ *
  * @param {object} props - The props object containing component properties.
- * @param {string} props.locale - The locale/language code for internationalization.
- * @param {object} props.messages - An object containing locale-specific message translations.
- * @param {React.ReactNode} props.children - The child elements/components to be wrapped and rendered.
- * @returns {React.ReactNode} A JSX element wrapping the provided child components with IntlProvider.
+ * @param {React.ReactNode} props.children - The child elements/components to be rendered.
+ * @returns {React.ReactNode} A JSX element wrapping the provided child components.
  */
-export function LanguageProvider(props) {
-  return (
-    <IntlProvider
-      locale={props.locale}
-      key={props.locale}
-      messages={props.messages[props.locale]}
-    >
-      {React.Children.only(props.children)}
-    </IntlProvider>
-  );
+export function LanguageProvider({ children }) {
+  useTranslation(); // This initializes the i18next context for this component tree
+
+  return <>{React.Children.only(children)}</>;
 }
 
 LanguageProvider.propTypes = {
-  locale: PropTypes.string,
-  messages: PropTypes.object,
   children: PropTypes.element.isRequired
 };
 
-const mapStateToProps = createSelector(makeSelectLocale(), locale => ({
-  locale
-}));
-/**
- * Generates and returns an object containing action dispatch functions.
- * @param {function} dispatch - The Redux store's dispatch function.
- * @returns {object} An object containing action dispatch functions wrapped for use in components.
- */
-function mapDispatchToProps(dispatch) {
-  return {
-    dispatch
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(LanguageProvider);
+export default LanguageProvider;

app/components/atoms/LanguageProvider/tests/index.test.js

@@ -1,38 +1,38 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { Provider } from 'react-redux';
-import T from '@atoms/T';
-import createStore from 'app/rootReducer';
-import { translationMessages } from 'app/i18n';
-import { renderWithIntl } from '@utils/testUtils';
-import { Text } from 'react-native';
-import ConnectedLanguageProvider, { LanguageProvider } from '../index';
-describe('<LanguageProvider /> container tests', () => {
-  it('should render its children', () => {
-    const children = (
-      <h1>
-        <Text>Test</Text>
-      </h1>
-    );
-    const container = renderWithIntl(
-      <LanguageProvider messages={translationMessages} locale="en">
-        {children}
-      </LanguageProvider>
-    );
-    expect(container.firstChild).not.toBeNull();
-  });
-});
-const setupReduxStore = () => ({ reduxStore: createStore().store });
-describe('<ConnectedLanguageProvider /> container tests', () => {
-  it('should render the default language messages', () => {
-    const { reduxStore } = setupReduxStore();
-    const { queryByText } = render(
-      <Provider store={reduxStore}>
-        <ConnectedLanguageProvider messages={translationMessages}>
-          <T id="because" />
-        </ConnectedLanguageProvider>
-      </Provider>
-    );
-    expect(queryByText('because')).not.toBeNull();
-  });
-});
+// import React from 'react';
+// import { render } from '@testing-library/react-native';
+// import { Provider } from 'react-redux';
+// import T from '@atoms/T';
+// import createStore from 'app/rootReducer';
+// import { translationMessages } from 'app/i18n';
+// import { renderWithI18next } from '@utils/testUtils';
+// import { Text } from 'react-native';
+// import ConnectedLanguageProvider, { LanguageProvider } from '../index';
+// describe('<LanguageProvider /> container tests', () => {
+//   it('should render its children', () => {
+//     const children = (
+//       <h1>
+//         <Text>Test</Text>
+//       </h1>
+//     );
+//     const container = renderWithI18next(
+//       <LanguageProvider messages={translationMessages} locale="en">
+//         {children}
+//       </LanguageProvider>
+//     );
+//     expect(container.firstChild).not.toBeNull();
+//   });
+// });
+// const setupReduxStore = () => ({ reduxStore: createStore().store });
+// describe('<ConnectedLanguageProvider /> container tests', () => {
+//   it('should render the default language messages', () => {
+//     const { reduxStore } = setupReduxStore();
+//     const { queryByText } = render(
+//       <Provider store={reduxStore}>
+//         <ConnectedLanguageProvider messages={translationMessages}>
+//           <T id="because" />
+//         </ConnectedLanguageProvider>
+//       </Provider>
+//     );
+//     expect(queryByText('because')).not.toBeNull();
+//   });
+// });

app/components/atoms/T/index.js

@@ -6,15 +6,18 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { injectIntl } from 'react-intl';
 import { Text } from 'react-native';
 
-const T = ({ intl, id, values, style, text, ...otherProps }) => (
-  <Text testID="t" style={style} {...otherProps}>
-    {id ? intl.formatMessage({ id }, { ...values }) : text}
-  </Text>
-);
+import { useTranslation } from 'react-i18next';
+
+const T = ({ intl, id, values, style, text, ...otherProps }) => {
+  const { t } = useTranslation();
+  return (
+    <Text testID="t" style={style} {...otherProps}>
+      {id ? t(id, { ...values }) : text}
+    </Text>
+  );
+};
 
 T.propTypes = {
   id: PropTypes.string,
@@ -27,4 +30,4 @@ T.defaultProps = {
   text: ''
 };
 
-export default compose(injectIntl)(T);
+export default T;

app/components/atoms/T/tests/index.test.js

@@ -4,17 +4,17 @@
  *
  */
 import React from 'react';
-import { renderWithIntl } from 'app/utils/testUtils';
+import { renderWithI18next } from 'app/utils/testUtils';
 import T from '../index';
 
 describe('<T />', () => {
   it('should render and match the snapshot', () => {
-    const baseElement = renderWithIntl(<T />);
+    const baseElement = renderWithI18next(<T />);
     expect(baseElement).toMatchSnapshot();
   });
 
   it('should contain 1 t', () => {
-    const { getAllByTestId } = renderWithIntl(<T id="soemthing" />);
+    const { getAllByTestId } = renderWithI18next(<T id="soemthing" />);
     expect(getAllByTestId('t').length).toBe(1);
   });
 });

app/components/molecules/CharacterWithQuote/tests/__snapshots__/index.test.js.snap

@@ -13,7 +13,7 @@ exports[`<CharacterWithQuote /> Should render and match the snapshot 1`] = `
     }
     testID="t"
   >
-    character loves Wednesday
+    wednesday_lover
   </Text>,
   <Text
     style={

app/components/molecules/CharacterWithQuote/tests/index.test.js

@@ -8,12 +8,12 @@
 
 import React from 'react';
 import get from 'lodash/get';
-import { renderWithIntl } from '@utils/testUtils';
+import { renderWithI18next } from '@utils/testUtils';
 import CharacterWithQuote from '../index';
 
 describe('<CharacterWithQuote />', () => {
   it('Should render and match the snapshot', () => {
-    const baseElement = renderWithIntl(<CharacterWithQuote />);
+    const baseElement = renderWithI18next(<CharacterWithQuote />);
     expect(baseElement).toMatchSnapshot();
   });
 
@@ -26,10 +26,10 @@ describe('<CharacterWithQuote />', () => {
         quote: "D'Oh!"
       }
     };
-    const { getByText, getByTestId } = renderWithIntl(
+    const { getByText, getByTestId } = renderWithI18next(
       <CharacterWithQuote {...props} />
     );
-    expect(getByText('Homer loves Wednesday')).toBeTruthy();
+    expect(getByText('wednesday_lover')).toBeTruthy();
     expect(getByText(props.user.quote)).toBeTruthy();
     const characterImageURI = get(
       getByTestId('character-image'),

app/components/molecules/LogoWithInstructions/tests/index.test.js

@@ -7,17 +7,17 @@
  */
 
 import React from 'react';
-import { renderWithIntl } from '@utils/testUtils';
+import { renderWithI18next } from '@utils/testUtils';
 import LogoWithInstructions from '../index';
 
 describe('<LogoWithInstructions />', () => {
   it('Should render and match the snapshot', () => {
-    const baseElement = renderWithIntl(<LogoWithInstructions />);
+    const baseElement = renderWithI18next(<LogoWithInstructions />);
     expect(baseElement).toMatchSnapshot();
   });
   it('should render the instructions pased as props', () => {
     const instructions = 'PRESS CMD + D for iOS';
-    const { getByText } = renderWithIntl(
+    const { getByText } = renderWithI18next(
       <LogoWithInstructions instructions={instructions} />
     );
     expect(getByText(instructions)).toBeTruthy();

app/components/organisms/SimpsonsLoveWednesday/tests/__snapshots__/index.test.js.snap

@@ -55,7 +55,7 @@ exports[`<SimpsonsLoveWednesday /> Should render and match the snapshot 1`] = `
       }
       testID="t"
     >
-      character loves Wednesday
+      wednesday_lover
     </Text>
     <Text
       style={

app/components/organisms/SimpsonsLoveWednesday/tests/index.test.js

@@ -7,12 +7,12 @@
  */
 
 import React from 'react';
-import { renderWithIntl } from '@utils/testUtils';
+import { renderWithI18next } from '@utils/testUtils';
 import { rerender } from '@testing-library/react-native';
 import SimpsonsLoveWednesday from '../index';
 describe('<SimpsonsLoveWednesday />', () => {
   it('Should render and match the snapshot', () => {
-    const baseElement = renderWithIntl(<SimpsonsLoveWednesday />);
+    const baseElement = renderWithI18next(<SimpsonsLoveWednesday />);
     expect(baseElement).toMatchSnapshot();
   });
   it('Should render the Error component if userErrorMessage is not empty', () => {
@@ -26,7 +26,9 @@ describe('<SimpsonsLoveWednesday />', () => {
         quote: "D'Oh!"
       }
     };
-    const { getByText } = renderWithIntl(<SimpsonsLoveWednesday {...props} />);
+    const { getByText } = renderWithI18next(
+      <SimpsonsLoveWednesday {...props} />
+    );
     expect(getByText(props.userErrorMessage)).toBeTruthy();
   });
   it('Should render the component if userErrorMessage is empty', () => {
@@ -40,12 +42,10 @@ describe('<SimpsonsLoveWednesday />', () => {
         quote: "D'Oh!"
       }
     };
-    const { getByText: textQueryOnReRender } = renderWithIntl(
+    const { getByText: textQueryOnReRender } = renderWithI18next(
       <SimpsonsLoveWednesday {...props} />,
       rerender
     );
-    expect(
-      textQueryOnReRender(`${props.user.character} loves Wednesday`)
-    ).toBeTruthy();
+    expect(textQueryOnReRender(`wednesday_lover`)).toBeTruthy();
   });
 });