[#82] added cozy-ui for internationnalisation (#267)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/App.tsx

@@ -12,29 +12,42 @@ import { CustomThemeProvider } from "./theme/ThemeProvider";
 import { useAppDispatch, useAppSelector } from "./app/hooks";
 import { push } from "redux-first-history";
 import { ErrorSnackbar } from "./components/Error/ErrorSnackbar";
+import I18n from "cozy-ui/transpiled/react/providers/I18n";
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+
+const locale = { en, fr };
 
 function App() {
   const error = useAppSelector((state) => state.user.error);
+  const lang = useAppSelector((state) => state.settings.language);
+
   const dispatch = useAppDispatch();
   useEffect(() => {
     if (error) {
       dispatch(push("/error"));
     }
   });
+
   return (
     <CustomThemeProvider>
-      <Suspense fallback={<Loading />}>
-        <Router history={history}>
-          <Routes>
-            <Route path="/" element={<HandleLogin />} />
-            <Route path="/calendar" element={<CalendarLayout />} />
-            <Route path="/callback" element={<CallbackResume />} />
-            <Route path="/error" element={<Error />} />
-          </Routes>
-        </Router>
-        <ErrorSnackbar error={error} type="user" />
-        <ErrorSnackbar error={error} type="user" />
-      </Suspense>
+      <I18n
+        dictRequire={(lang: keyof typeof locale) => locale[lang]}
+        lang={lang}
+      >
+        <Suspense fallback={<Loading />}>
+          <Router history={history}>
+            <Routes>
+              <Route path="/" element={<HandleLogin />} />
+              <Route path="/calendar" element={<CalendarLayout />} />
+              <Route path="/callback" element={<CallbackResume />} />
+              <Route path="/error" element={<Error />} />
+            </Routes>
+          </Router>
+          <ErrorSnackbar error={error} type="user" />
+          <ErrorSnackbar error={error} type="user" />
+        </Suspense>
+      </I18n>
     </CustomThemeProvider>
   );
 }