Feature/trainee import (#43)

* install package * language & detector & wrapper * dictionnary en & fr * trainingCourses translation * Requester translation * OrgaUnits translation * navigation menu translation * modify requester & add i18n * fix i18n * enchance * add icon on navigation menu * Ui & i18n translate * fix typo error * remove aucun label disponible * fix css * bump version to 2.3.1
InseeFr · Feb 5, 2024 · 21b5d6e · 21b5d6e
1 parent 1e44909
commit 21b5d6e
Show file tree

Hide file tree

Showing 10 changed files with 324 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "massive-attack",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",
@@ -11,11 +11,14 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "date-fns": "^2.25.0",
+    "i18next": "^23.5.1",
+    "i18next-browser-languagedetector": "^7.1.0",
     "keycloak-js": "^14.0.0",
     "papaparse": "^5.4.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^13.2.2",
     "react-router-dom": "^5.2.1",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

diff --git a/src/components/app/App.js b/src/components/app/App.js
@@ -1,16 +1,17 @@
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
-
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { Typography } from '@material-ui/core';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../utils/i18n/i18n';
 import Header from '../header';
 import Navigation from '../navigation';
 import OrganisationUnitsVue from '../orgaUnitsVue';
 import Preloader from '../common/Preloader';
 import Requester from '../requester';
 import TrainingCourses from '../trainingCourses';
-import { Typography } from '@material-ui/core';
 import { getConfiguration } from '../../utils/configuration';
-import { getUser } from '../../utils/userInfo';
 import { getUserOrganisationalUnit } from '../../utils/api/massive-attack-api';
+import { getUser } from '../../utils/userInfo';
 import { useAuth } from '../../utils/hook/auth';
 
 export const AppContext = React.createContext();
@@ -20,7 +21,7 @@ const App = () => {
   const [organisationalUnit, setOrganisationalUnit] = useState();
   const [pf, setPf] = useState('');
   const [dateReference, setDateReference] = useState(new Date().getTime());
-  const [campaignLabel, setCampaignLabel] = useState();
+  const [campaignLabel, setCampaignLabel] = useState('');
   const [campaignId, setCampaignId] = useState('');
   const [interviewers, setInterviewers] = useState([{ id: '', index: 0 }]);
   const [sessionType, setSessionType] = useState(undefined);
@@ -76,23 +77,25 @@ const App = () => {
         <>
           <Header user={getUser()} pf={pf} />
           <BrowserRouter>
-            <AppContext.Provider value={context}>
-              <div>
-                <Route
-                  path="/"
-                  render={({ location }) => (
-                    <>
-                      <Navigation location={location} />
-                      <Switch>
-                        <Route exact path="/" component={Requester} />
-                        <Route path="/training-courses" component={TrainingCourses} />
-                        <Route path="/organisation-units-vue" component={OrganisationUnitsVue} />
-                      </Switch>
-                    </>
-                  )}
-                />
-              </div>
-            </AppContext.Provider>
+            <I18nextProvider i18n={i18n}>
+              <AppContext.Provider value={context}>
+                <div>
+                  <Route
+                    path="/"
+                    render={({ location }) => (
+                      <>
+                        <Navigation location={location} />
+                        <Switch>
+                          <Route exact path="/" component={Requester} />
+                          <Route path="/training-courses" component={TrainingCourses} />
+                          <Route path="/organisation-units-vue" component={OrganisationUnitsVue} />
+                        </Switch>
+                      </>
+                    )}
+                  />
+                </div>
+              </AppContext.Provider>
+            </I18nextProvider>
           </BrowserRouter>
         </>
       )}

diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
@@ -1,10 +1,12 @@
 import { Paper, Tab, Tabs } from '@material-ui/core';
 import React, { useContext } from 'react';
-
 import { AppContext } from '../app/App';
 import { Link } from 'react-router-dom';
 import StarIcon from '@material-ui/icons/Star';
+import HomeIcon from '@material-ui/icons/Home';
+import AssignmentIcon from '@material-ui/icons/Assignment';
 import { makeStyles } from '@material-ui/core/styles';
+import { useTranslation } from 'react-i18next';
 
 const useStyles = makeStyles({
   root: {
@@ -13,19 +15,23 @@ const useStyles = makeStyles({
 });
 
 const Navigation = ({ location }) => {
+  const { t } = useTranslation();
   const classes = useStyles();
   const { isAdmin } = useContext(AppContext);
 
-  const adminIcon = <StarIcon color="error"></StarIcon>;
+  const adminIcon = <StarIcon color="error" />;
+  const homeIcon = <HomeIcon color="error" />;
+  const formation = <AssignmentIcon color="error" />;
   return (
     <Paper className={classes.root}>
       <Tabs value={location.pathname}>
-        <Tab label="Accueil" value="/" component={Link} to="/"></Tab>
+        <Tab label={t('HomePage')} value="/" component={Link} to="/" icon={homeIcon}></Tab>
         <Tab
-          label="Sessions de formation"
+          label={t('TrainingSession')}
           value="/training-courses"
           component={Link}
           to="/training-courses"
+          icon={formation}
         ></Tab>
         <Tab
           label="Administration"

diff --git a/src/components/orgaUnitsVue/index.js b/src/components/orgaUnitsVue/index.js
@@ -19,6 +19,7 @@ import { AppContext } from '../app/App';
 import DeleteIcon from '@material-ui/icons/Delete';
 import Preloader from '../common/Preloader';
 import { getConfiguration } from '../../utils/configuration/index';
+import { useTranslation } from 'react-i18next';
 
 const useStyles = makeStyles(theme => ({
   row: {
@@ -42,6 +43,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const OrganisationUnitsVue = () => {
+  const { t } = useTranslation();
   const classes = useStyles();
 
   const { isAdmin = false } = useContext(AppContext);
@@ -138,15 +140,15 @@ const OrganisationUnitsVue = () => {
 
       {!waiting && (
         <>
-          <Typography variant="h6">Liste des sessions de formation</Typography>
+          <Typography variant="h6">{t('ListOfTrainingSessions')}</Typography>
           <TableContainer component={Paper}>
             <Table aria-label="training courses table">
               <TableHead>
                 <TableRow>
-                  <TableCell align="center">Unité organisationnelle</TableCell>
-                  <TableCell align="center">Type de formation</TableCell>
-                  <TableCell align="center">Nombre de campagnes</TableCell>
-                  <TableCell align="center">Supprimer</TableCell>
+                  <TableCell align="center">{t('OrganizationalUnit')}</TableCell>
+                  <TableCell align="center">{t('TypeOfTraining')}</TableCell>
+                  <TableCell align="center">{t('NumberOfCampaigns')}</TableCell>
+                  <TableCell align="center">{t('Delete')}</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -174,10 +176,10 @@ const OrganisationUnitsVue = () => {
               <Typography variant="h6">{`Suppression des ${sessionToDelete?.campaigns?.length} ${sessionToDelete?.type} ${sessionToDelete?.ouid}`}</Typography>
               <div className={classes.buttonContainer}>
                 <Button variant="outlined" className={classes.cancelButton} onClick={handleClose}>
-                  Annuler
+                  {t('Cancel')}
                 </Button>
                 <Button variant="contained" color="primary" onClick={confirmDeletion}>
-                  Valider
+                  {t('Validate')}
                 </Button>
               </div>
             </div>