I18n support for app

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {
+        targets: {
+          node: 'current'
+        }
+      }],
+      '@babel/preset-react'
+    ],
+    ignore: [
+        /node_modules\/(?!undici)/
+    ]
+  };

i18next-parser.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    locales: ['en', 'fr'],
+    output: 'src/translations/$LOCALE.json',
+    input: ['src/**/*.{js,jsx}'], 
+    keySeparator: false,
+    namespaceSeparator: false, 
+    useKeysAsDefaultValue: true,
+    verbose: true,
+    debug: true
+};

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    transform: {
+      '^.+\\.jsx?$': 'babel-jest'
+    },
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['./src/setupTests.js']
+  };

package.json

@@ -4,16 +4,18 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.8",
     "husky": "^0.14.3",
+    "i18next": "^23.15.2",
     "lint-staged": "^7.2.0",
     "moment": "^2.22.2",
     "prettier": "^1.13.7",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.0.2",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "1.1.4",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^16.4.1",
     "sinon": "^6.1.3"
   },
@@ -27,15 +29,36 @@
     "precommit": "lint-staged",
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom --watchAll=false",
     "build-prod": "react-scripts build && node modify-build-index.js", 
-    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "resolutions": { 
+  "resolutions": {
     "**/**/lodash.template": "^4.5.0",
     "**/**/handlebars": "^4.7.7",
     "**/**/set-value": "^2.0.1",
     "**/**/lodash": "^4.17.12",
     "**/**/mixin-deep": "^1.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
+    "babel-jest": "^29.7.0",
+    "i18next-parser": "^9.0.2",
+    "jest": "^29.7.0",
+    "util": "^0.12.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/components/common/Navbar.js

@@ -3,9 +3,11 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './Navbar.css';
+import { useTranslation } from 'react-i18next';
 
 const NavBar = props => {
   const { title, searchPage } = props;
+  const { t } = useTranslation();
   return (
     <div className="navbar">
       <ul className="navbarWrapper">
@@ -20,11 +22,15 @@ const NavBar = props => {
         <li className="navbarIcon">
           {searchPage ? (
             <NavLink to="/new" className="navbarTextLink">
-              <p className="navbarNewPerson">{'Register New Person'}</p>
+              <p className="navbarNewPerson">
+                {t('Register New Person', 'Register New Person')}
+              </p>
             </NavLink>
           ) : (
             <NavLink to="/" className="navbarTextLink">
-              <p className="navbarText">{'Search Person'}</p>
+              <p className="navbarText">
+                {t('Search Person', 'Search Person')}
+              </p>
             </NavLink>
           )}
         </li>

src/components/common/Table.js

@@ -2,9 +2,11 @@
 
 import React from 'react';
 import './Table.css';
+import { useTranslation } from 'react-i18next';
 
 const Table = props => {
   const { data } = props;
+  const { t } = useTranslation();
   const isIframe = window.self !== window.top;
 
   const handleClick = async item => {
@@ -16,10 +18,10 @@ const Table = props => {
       <table className="resultsTable">
         <thead className="headersTable">
           <tr className="resultsTableHeader">
-            <th id="headerTableName">NAME</th>
-            <th>GENDER</th>
-            <th>AGE</th>
-            <th id="headerTableReg">REGISTRATION</th>
+            <th id="headerTableName">{t('NAME', 'NAME')}</th>
+            <th>{t('GENDER', 'GENDER')}</th>
+            <th>{t('AGE', 'AGE')}</th>
+            <th id="headerTableReg">{t('REGISTRATION', 'REGISTRATION')}</th>
           </tr>
         </thead>
         <tbody>

src/components/common/modals/ModalError.js

@@ -2,12 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import './Modal.css';
 import Icon from '../Icon';
+import { useTranslation } from 'react-i18next';
 
 class ModalError extends Component {
   handleClick(e) {
     this.props.onClose(e);
   }
   render() {
+    const { t } = useTranslation();
     const modalBackgroundColor = {
       backgroundColor: 'rgba(217, 89, 88, 0.65)'
     };
@@ -20,7 +22,7 @@ class ModalError extends Component {
           </div>
           <div className="modalButton">
             <button className="errorButton" onClick={e => this.handleClick(e)}>
-              OK
+              {t('OK', 'OK')}
             </button>
           </div>
         </div>

src/containers/CreatePerson.js

@@ -14,6 +14,7 @@ import { genderOptions } from '../components/common/constants';
 import ModalError from '../components/common/modals/ModalError';
 import ModalSuccess from '../components/common/modals/ModalSuccess';
 import './CreatePerson.css';
+import { useTranslation } from 'react-i18next';
 
 class CreatePerson extends Component {
   constructor(props) {
@@ -259,11 +260,14 @@ class CreatePerson extends Component {
   };
 
   errorModalText = [
-    'An error occurred while trying to register this person.',
-    'Please try again.'
+    t(
+      'An error occurred while trying to register this person.',
+      'An error occurred while trying to register this person.'
+    ),
+    t('Please try again.', 'Please try again.')
   ];
 
-  successModalText = ['was added.'];
+  sucessModalText = [t('was added.', 'was added.')];
 
   render() {
     const {
@@ -275,6 +279,7 @@ class CreatePerson extends Component {
       birthdateEstimated
     } = this.state.person;
     const personAttributes = this.state.attributes;
+    const { t } = useTranslation();
 
     const { years, months, days } = this.state.person.age;
 
@@ -312,7 +317,10 @@ class CreatePerson extends Component {
 
     return (
       <div>
-        <Navbar title="Register New Person" searchPage={false} />
+        <Navbar
+          title={t('Register New Person', 'Register New Person')}
+          searchPage={false}
+        />
         <form autoComplete="off">
           <div>
             <fieldset>
@@ -321,7 +329,7 @@ class CreatePerson extends Component {
                 <div className="flex-item">
                   <Input
                     type={'text'}
-                    title={'First name '}
+                    title={t('First name', 'First name ')}
                     name={'firstName'}
                     aria-label={'First name'}
                     aria-required="true"
@@ -334,7 +342,7 @@ class CreatePerson extends Component {
                 <div className="flex-item">
                   <Input
                     type={'text'}
-                    title={'Middle name '}
+                    title={t('Middle name', 'Middle name ')}
                     name={'middleName'}
                     aria-label={'Middle name'}
                     onChange={this.handleChange}
@@ -345,7 +353,7 @@ class CreatePerson extends Component {
                 <div className="flex-item">
                   <Input
                     type={'text'}
-                    title={'Last name '}
+                    title={t('Last name', 'Last name ')}
                     name={'lastName'}
                     aria-label={'Last name'}
                     aria-required="true"
@@ -366,7 +374,7 @@ class CreatePerson extends Component {
                 <div className="flex-item2">
                   <Input
                     type={'date'}
-                    title={'Date of Birth '}
+                    title={t('Date of Birth', 'Date of Birth ')}
                     name={'birthdate'}
                     aria-label={'Date of Birth'}
                     aria-required="true"
@@ -377,7 +385,7 @@ class CreatePerson extends Component {
                     required={true}
                   />
                   <Checkbox
-                    title="Estimated"
+                    title={t('Estimated', 'Estimated')}
                     name="birthdateEstimated"
                     checked={birthdateEstimated}
                     onChange={this.handleCheckbox}
@@ -387,8 +395,8 @@ class CreatePerson extends Component {
                 <div className="flex-item2">
                   <Input
                     type={'number'}
-                    title={'Years '}
-                    name={'years'}
+                    title={t('Years', 'Years ')}
+                    name={'year'}
                     aria-label={'Years'}
                     aria-required="true"
                     onChange={this.handleChange}
@@ -399,8 +407,8 @@ class CreatePerson extends Component {
                   />
                   <Input
                     type={'number'}
-                    title={'Months '}
-                    name={'months'}
+                    title={t('Months', 'Months ')}
+                    name={'month'}
                     aria-label={'Months'}
                     aria-required="true"
                     onChange={this.handleChange}
@@ -411,8 +419,8 @@ class CreatePerson extends Component {
                   />
                   <Input
                     type={'number'}
-                    title={'Days '}
-                    name={'days'}
+                    title={t('Days', 'Days ')}
+                    name={'day'}
                     aria-label={'Days'}
                     aria-required="true"
                     onChange={this.handleChange}
@@ -432,7 +440,7 @@ class CreatePerson extends Component {
                 <div className="flex-item">
                   <Dropdown
                     name={'gender'}
-                    title={'Gender'}
+                    title={t('Gender', 'Gender')}
                     value={gender}
                     items={genderOptions}
                     onChange={this.handleChange}
@@ -447,7 +455,7 @@ class CreatePerson extends Component {
               <hr />
               <div>
                 <fieldset className="other-attributes">
-                  <legend>Other Information</legend>
+                  <legend>{t('Other Information', 'Other Information')}</legend>
                   {personAttributes.map(attribute => {
                     return (
                       <div className="flex-container-row" key={attribute.name}>
@@ -472,7 +480,7 @@ class CreatePerson extends Component {
               <div className="flex-container-row">
                 <div className="flex-item">
                   <Button
-                    value="Cancel"
+                    value={t('Cancel', 'Cancel')}
                     valueLoading=""
                     isLoading={false}
                     onClick={this.handleClearForm}
@@ -481,7 +489,7 @@ class CreatePerson extends Component {
                 <div className="flex-item">
                   <Button
                     disabled={isEnabled ? null : 'disabled'}
-                    value="Register"
+                    value={t('Register', 'Register')}
                     valueLoading=""
                     isLoading={isRequestLoading}
                     onClick={this.handleFormSubmit}