63 react 18next configure

package.json

@@ -178,13 +178,13 @@
     "fork-ts-checker-webpack-plugin": "^0.5.0",
     "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.6.0",
+    "jest": "^24.7.1",
     "mini-css-extract-plugin": "^0.4.5",
     "react-hot-loader": "^4.7.0",
     "redux-devtools-extension": "^2.13.5",
     "sinon": "^7.1.1",
     "style-loader": "^0.21.0",
-    "stylelint": "^9.6.0",
+    "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-order": "^1.0.0",
     "stylelint-scss": "^3.3.2",
@@ -246,12 +246,14 @@
     "file-loader": "^2.0.0",
     "filemanager-webpack-plugin": "^2.0.5",
     "final-form": "^4.11.0",
+    "i18next": "^15.0.9",
+    "i18next-browser-languagedetector": "^3.0.1",
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
     "jss": "^9.8.3",
     "jss-compose": "^5.0.0",
     "node-polyglot": "^2.3.0",
-    "node-sass": "^4.9.2",
+    "node-sass": "^4.11.0",
     "normalize.css": "^8.0.0",
     "normalizr": "^2.3.1",
     "postcss-easy-import": "^3.0.0",
@@ -264,6 +266,7 @@
     "react-dom": "^16.8.2",
     "react-final-form": "^4.0.2",
     "react-helmet": "^5.2.0",
+    "react-i18next": "^10.6.2",
     "react-jss": "^8.6.1",
     "react-number-format": "^4.0.6",
     "react-redux": "^6.0.0",

src/client.tsx

@@ -1,12 +1,12 @@
 import 'reflect-metadata';
 import 'babel-polyfill';
-import { App } from 'core/App';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bootstrapper from 'react-async-bootstrapper';
-import configureApp from 'core/configureApp';
 
-import getEnvParams from './core/getEnvParams';
+import configureApp from 'core/configureApp';
+import { App } from 'core/App';
+import getEnvParams from 'core/getEnvParams';
 
 const { appVersion } = getEnvParams();
 

src/core/App.tsx

@@ -6,7 +6,6 @@ import 'normalize.css';
 import { hot } from 'react-hot-loader/root';
 import { ThemeProvider } from 'services/theme';
 import { containers as NotificationContainers } from 'services/notification';
-import { I18nProvider } from 'services/i18n';
 import { IAppData, IModule, IJssDependencies } from 'shared/types/app';
 import { BaseStyles, JssProvider, SheetsRegistry } from 'shared/styles';
 
@@ -61,11 +60,9 @@ function renderSharedPart(
       disableStylesGeneration={disableStylesGeneration}
     >
       <ThemeProvider disableStylesGeneration={disableStylesGeneration}>
-        <I18nProvider>
-          <BaseStyles>
-            {createRoutes(modules)}
-          </BaseStyles>
-        </I18nProvider>
+        <BaseStyles>
+          {createRoutes(modules)}
+        </BaseStyles>
         <NotificationContainers.Notification />
       </ThemeProvider>
     </JssProvider>

src/core/configureApp.ts

@@ -1,17 +1,18 @@
 import configureDeps from './configureDeps';
 import { TYPES, container } from './configureIoc';
 import configureStore, { createReducer } from './configureStore';
+import { configureJss } from './configureJss';
 
 import * as allModules from 'modules';
-import { configureJss } from 'core/configureJss';
 import { ReducersMap } from 'shared/types/redux';
 import { reduxEntry as themeProviderRE } from 'services/theme';
 import { reduxEntry as notificationReduxEntry } from 'services/notification';
 import { IAppData, IModule, RootSaga, IAppReduxState, IReduxEntry } from 'shared/types/app';
+import { initializeI18n } from 'services/i18n/i18nContainer';
 
 function configureApp(data?: IAppData): IAppData {
   /* Prepare main app elements */
-  const modules: IModule[] =  Object.values(allModules);
+  const modules: IModule[] = Object.values(allModules);
 
   if (data) {
     return { ...data, modules };
@@ -37,6 +38,7 @@ function configureApp(data?: IAppData): IAppData {
 
   const dependencies = configureDeps(store);
   const jssDeps = configureJss();
+  initializeI18n();
 
   sharedReduxEntries.forEach(connectEntryToStore);
   modules.forEach((module: IModule) => {

src/features/profile/view/containers/ProfileEdit/ProfileEdit.tsx

@@ -4,13 +4,15 @@ import { connect } from 'react-redux';
 import { Form, FormRenderProps } from 'react-final-form';
 import { bind } from 'decko';
 
+import { withTranslation, ITranslationProps, tKeys } from 'services/i18n';
 import { TextInputField, NumberInputField } from 'shared/view/form';
 import { Button } from 'shared/view/elements';
 import { IAppReduxState } from 'shared/types/app';
 import { IProfile } from 'shared/types/models';
 import { actions as notificationServiceActions } from 'services/notification';
-
-import { fieldNames, validateBio, validateName, validateNickname } from './constants';
+import {
+  fieldNames, validateName, validateNickname, validateBio,
+} from './constants';
 import { ProfileAvatar } from '../../components';
 import { IProfileEditFormFields } from '../../../namespace';
 import { actions, selectors } from './../../../redux';
@@ -23,7 +25,7 @@ interface IStateProps {
 
 type IActionProps = typeof mapDispatch;
 
-type IProps = IStateProps & IActionProps;
+type IProps = IStateProps & IActionProps & ITranslationProps;
 
 function mapState(state: IAppReduxState): IStateProps {
   return {
@@ -37,6 +39,7 @@ const mapDispatch = {
 };
 
 const b = block('profile-edit');
+const { profile: translations } = tKeys.features;
 
 class ProfileEdit extends React.PureComponent<IProps> {
   public render() {
@@ -53,27 +56,44 @@ class ProfileEdit extends React.PureComponent<IProps> {
 
   @bind
   private renderForm({ handleSubmit }: FormRenderProps) {
-    const { profile: { avatarURL } } = this.props;
+    const { profile: { avatarURL }, t } = this.props;
     return (
       <form onSubmit={handleSubmit} className={b()}>
         <div className={b('avatar')}>
           <ProfileAvatar avatarURL={avatarURL} size="big" />
         </div>
         <div className={b('fields')}>
           <div className={b('field')}>
-            <TextInputField name={fieldNames.name} label="Name" validate={validateName}/>
+            <TextInputField
+              name={fieldNames.name}
+              label={t(translations.name)}
+              validate={validateName}
+              t={t}
+            />
           </div>
           <div className={b('field')}>
-            <TextInputField name={fieldNames.nickname} label="Nickname" validate={validateNickname} />
+            <TextInputField
+              name={fieldNames.nickname}
+              label={t(translations.nickname)}
+              validate={validateNickname}
+              t={t}
+            />
           </div>
           <div className={b('field')}>
-            <NumberInputField name={fieldNames.age} label="Age" />
+            <NumberInputField name={fieldNames.age} label={t(translations.age)} t={t} />
           </div>
           <div className={b('field')}>
-            <TextInputField name={fieldNames.bio} label="Bio" multiline rowsMax={10} validate={validateBio}/>
+            <TextInputField
+              name={fieldNames.bio}
+              label={t(translations.bio)}
+              multiline
+              rowsMax={10}
+              validate={validateBio}
+              t={t}
+            />
           </div>
           <div className={b('button')}>
-            <Button variant="outlined" type="submit">Save</Button>
+            <Button variant="outlined" type="submit">{t(tKeys.shared.save)}</Button>
           </div>
         </div>
       </form>
@@ -82,11 +102,12 @@ class ProfileEdit extends React.PureComponent<IProps> {
 
   @bind
   private handleFormSubmit(values: IProfileEditFormFields) {
-    const { saveProfile, setNotification } = this.props;
+    const { saveProfile, setNotification, t } = this.props;
     saveProfile(values);
-    setNotification({ kind: 'info', text: 'User data was saved.' });
+    setNotification({ kind: 'info', text: t(tKeys.shared.notifications.saved) });
   }
 }
 
+const connectedComponent = connect(mapState, mapDispatch)(ProfileEdit);
 export { ProfileEdit, IProps as IProfileEditProps };
-export default connect(mapState, mapDispatch)(ProfileEdit);
+export default withTranslation()(connectedComponent);

src/features/profile/view/containers/ProfileEdit/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Form } from 'react-final-form';
 
-import { makeShallowRenderer } from 'shared/helpers';
+import { makeShallowRenderer, getMockedLocaleProps } from 'shared/helpers';
 import { profile } from 'shared/mocks';
 
 import { ProfileEdit, IProfileEditProps } from '../ProfileEdit';
@@ -9,6 +9,7 @@ const props: IProfileEditProps = {
   profile,
   setNotification: jest.fn(),
   saveProfile: jest.fn(),
+  ...getMockedLocaleProps(),
 };
 
 const getComponent = makeShallowRenderer(ProfileEdit, props);

src/features/profile/view/containers/ProfileEdit/constants.ts

@@ -1,8 +1,9 @@
 import { FormFieldNames } from 'shared/types/form';
+import { IProfileEditFormFields } from '../../../namespace';
 import {
-  isRequired, makeMaxCharactersValidator, makeMinCharactersValidator, composeValidators,
+  composeValidators, makeRequired, makeMinCharactersValidator, makeMaxCharactersValidator,
 } from 'shared/validators';
-import { IProfileEditFormFields } from '../../../namespace';
+import { tKeys } from 'services/i18n';
 
 export const fieldNames: FormFieldNames<IProfileEditFormFields> = {
   age: 'age',
@@ -12,16 +13,40 @@ export const fieldNames: FormFieldNames<IProfileEditFormFields> = {
   avatarURL: 'avatarURL',
 };
 
+export const MIN_NAME_LENGTH = 3;
+export const MAX_NAME_LENGTH = 35;
+export const MIN_NICKNAME_LENGTH = 3;
+export const MAX_NICKNAME_LENGTH = 13;
+export const MAX_BIO_LENGTH = 200;
+
 export const validateName = composeValidators(
-  isRequired,
-  makeMinCharactersValidator(3, 'Name'),
-  makeMaxCharactersValidator(35, 'Name'),
+  makeRequired(tKeys.shared.fieldIsRequiredError),
+  makeMinCharactersValidator(MIN_NAME_LENGTH, {
+    key: tKeys.shared.fieldMinLengthError,
+    options: { minCharacters: MIN_NAME_LENGTH },
+  }),
+  makeMaxCharactersValidator(MAX_NAME_LENGTH, {
+    key: tKeys.shared.fieldMaxLengthError,
+    options: { maxCharacters: MAX_NAME_LENGTH },
+  }),
 );
 
 export const validateNickname = composeValidators(
-  isRequired,
-  makeMinCharactersValidator(3, 'Nickname'),
-  makeMaxCharactersValidator(13, 'Nickname'),
+  makeRequired(tKeys.shared.fieldIsRequiredError),
+  makeMinCharactersValidator(MIN_NICKNAME_LENGTH, {
+    key: tKeys.shared.fieldMinLengthError,
+    options: { minCharacters: MIN_NICKNAME_LENGTH },
+  }),
+  makeMaxCharactersValidator(MAX_NICKNAME_LENGTH, {
+    key: tKeys.shared.fieldMaxLengthError,
+    options: { maxCharacters: MAX_NICKNAME_LENGTH },
+  }),
 );
 
-export const validateBio = makeMaxCharactersValidator(200, 'Bio');
+export const validateBio = composeValidators(
+  makeRequired(tKeys.shared.fieldIsRequiredError),
+  makeMaxCharactersValidator(MAX_BIO_LENGTH, {
+    key: tKeys.shared.fieldMaxLengthError,
+    options: { maxCharacters: MAX_BIO_LENGTH },
+  }),
+);

src/features/profile/view/containers/ProfilePreview/ProfilePreview.tsx

@@ -3,6 +3,7 @@ import block from 'bem-cn';
 import { connect } from 'react-redux';
 import { bind } from 'decko';
 
+import { withTranslation, ITranslationProps, tKeys } from 'services/i18n';
 import { IAppReduxState } from 'shared/types/app';
 import { IProfile } from 'shared/types/models';
 import { Popover } from 'shared/view/components';
@@ -23,9 +24,10 @@ interface IStateProps {
   profile: IProfile;
 }
 
-type IProps = IOwnProps & IStateProps;
+type IProps = IOwnProps & IStateProps & ITranslationProps;
 
 const b = block('profile-preview');
+const { profile: translations } = tKeys.features;
 
 function mapState(state: IAppReduxState): IStateProps {
   return {
@@ -41,7 +43,7 @@ class ProfilePreview extends React.PureComponent<IProps, IState> {
   private blockRef = createRef<HTMLDivElement>();
 
   public render() {
-    const { profile: { avatarURL, name, nickname, age, bio }, onEditClick } = this.props;
+    const { profile: { avatarURL, name, nickname, age, bio }, onEditClick, t } = this.props;
     const { isOpen } = this.state;
     return (
       <div className={b()} ref={this.blockRef}>
@@ -64,15 +66,15 @@ class ProfilePreview extends React.PureComponent<IProps, IState> {
                   {nickname}
                 </div>
                 <div className={b('age')}>
-                  {age} y.o.
+                  {t(translations.yearsOld, { count: age })}
                 </div>
               </div>
             </div>
             <div className={b('bio')}>
               {bio}
             </div>
             <div className={b('edit')} onClick={onEditClick}>
-              Edit
+              {t(translations.edit)}
             </div>
           </div>
         </Popover>
@@ -92,5 +94,7 @@ class ProfilePreview extends React.PureComponent<IProps, IState> {
 
 }
 
+const connectedComponent = connect(mapState)(ProfilePreview);
+
 export { ProfilePreview, IProps as IProfilePreviewProps };
-export default connect(mapState)(ProfilePreview);
+export default withTranslation()(connectedComponent);

src/features/profile/view/containers/ProfilePreview/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { makeShallowRenderer } from 'shared/helpers';
+import { makeShallowRenderer, getMockedLocaleProps } from 'shared/helpers';
 import { Popover } from 'shared/view/components';
 import { profile } from 'shared/mocks';
 
@@ -7,6 +7,7 @@ import { ProfilePreview, IProfilePreviewProps } from '../ProfilePreview';
 const props: IProfilePreviewProps = {
   onEditClick: jest.fn(),
   profile,
+  ...getMockedLocaleProps(),
 };
 
 const getComponent = makeShallowRenderer(ProfilePreview, props);