REQUIREMENT: The user interface should be localized in French (see #146)

Co-authored-by: vernet-william <[email protected]>

frontend/package.json

@@ -9,10 +9,14 @@
     "bootstrap": "^5.2.2",
     "buffer": "^6.0.3",
     "events": "^3.3.0",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.5.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-icons": "^1.10.2",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2",
     "react-image-crop": "^10.0.9",
     "react-markdown": "^8.0.4",
     "react-notifications": "^1.7.4",

frontend/public/locales/en/translation.json

@@ -0,0 +1,21 @@
+{
+    "document": "Create a document",
+    "glose": "as a glose",
+    "source": "as a source",
+    "scratch": "from scratch",
+    "collection": "Create a collection from this document",
+    "signin": "Sign in",
+    "reference": "referenced by",
+    "username": "Username",
+    "password": "Password",
+    "title": "<TITLE>",
+    "creator": "<CREATOR>",
+    "rights": "All rights reserved",
+    "text": "<TEXT>",
+    "metadata": "Edit metadata...",
+    "content": "Edit content...",
+    "type": "Edit type",
+    "doc_close": "Close this document",
+    "doc_open": "Open this document",
+    "doc_focus": "Focus on this document"
+}

frontend/public/locales/fr/translation.json

@@ -0,0 +1,21 @@
+{
+    "document": "Créer un document",
+    "glose": "en tant que glose",
+    "source": "en tant que source",
+    "scratch": "à partir de zéro",
+    "collection": "Créer une collection à partir de ce document",
+    "signin": "Se connecter",
+    "reference": "référencé par",
+    "username": "Nom d’utilisateur",
+    "password": "Mot de passe",
+    "title": "<TITRE>",
+    "creator": "<CRÉATEUR>",
+    "rights": "Tous droits réservés",
+    "text": "<TEXTE>",
+    "metadata": "Éditer les métadonnées...",
+    "content": "Éditer le contenu...",
+    "type": "Éditer le type",
+    "doc_close": "Fermer ce document",
+    "doc_open": "Ouvrir ce document",
+    "doc_focus": "Se concentrer sur ce document"
+}

frontend/src/components/BrowseTools.js

@@ -1,21 +1,23 @@
 import { Link } from 'react-router-dom';
 import { Bookmark, ChevronBarDown, ChevronExpand } from 'react-bootstrap-icons';
+import { useTranslation } from 'react-i18next';
 
 function BrowseTools({id, closable, openable }) {
+  const { t } = useTranslation();
   return (
     <>
       {closable &&
         <Link to="#" className="icon">
-          <ChevronBarDown title="Close this document" />
+          <ChevronBarDown title={`${t('doc_close')}`} />
         </Link>
       }
       {openable &&
         <Link to={`#${id}`} className="icon open">
-          <ChevronExpand title="Open this document" />
+          <ChevronExpand title={`${t('doc_open')}`} />
         </Link>
       }
       <Link to={`../${id}`} className="icon focus">
-        <Bookmark title="Focus on this document" />
+        <Bookmark title={`${t('doc_focus')}`} />
       </Link>
     </>
   );

frontend/src/components/DocumentsCards.js

@@ -6,6 +6,7 @@ import Metadata from './Metadata';
 import BrowseTools from './BrowseTools';
 import FutureDocument from './FutureDocument';
 import { TypeBadge } from './Type';
+import { useTranslation } from 'react-i18next';
 
 // asSource is a flag that indicates whether to create a parent (left) or a glose (right)
 function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend, asSource = false}) {
@@ -48,9 +49,10 @@ function DocumentCard({doc, expandable}) {
 }
 
 function References({doc}) {
+  const { t } = useTranslation();
   if (doc.referenced) return (
     <Card.Footer>
-      referenced by {doc.referenced} document(s)
+      {t('reference')} {doc.referenced} document(s)
     </Card.Footer>
   );
 }

frontend/src/components/EditableText.js

@@ -3,8 +3,10 @@ import '../styles/EditableText.css';
 import { useState, useEffect } from 'react';
 import FormattedText from './FormattedText';
 import {v4 as uuid} from 'uuid';
+import { useTranslation } from 'react-i18next';
 
 function EditableText({id, text, rubric, isPartOf, links, backend, setLastUpdate}) {
+  const { t } = useTranslation();
   const [beingEdited, setBeingEdited] = useState(false);
   const [editedDocument, setEditedDocument] = useState();
   const [editedText, setEditedText] = useState();
@@ -57,7 +59,7 @@ function EditableText({id, text, rubric, isPartOf, links, backend, setLastUpdate
   };
 
   if (!beingEdited) return (
-    <div className="editable content" onClick={handleClick} title="Edit content...">
+    <div className="editable content" onClick={handleClick} title={`${t('content')}`}>
       <FormattedText>
         {editedText || text}
       </FormattedText>

frontend/src/components/FutureDocument.js

@@ -1,4 +1,5 @@
 import '../styles/FutureDocument.css';
+import { useTranslation } from 'react-i18next';
 
 import { useNavigate } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';
@@ -17,6 +18,7 @@ function FutureDocument({relatedTo, verb = 'refersTo', setLastUpdate, backend, a
 
 function FutureDocumentIcon({relatedTo, verb, setLastUpdate, backend, asSource = false}) {
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   let handleClick = async () => {
     let _id = uuid();
@@ -27,11 +29,11 @@ function FutureDocumentIcon({relatedTo, verb, setLastUpdate, backend, asSource =
       backend.putDocument({
         _id,
         editors,
-        dc_creator: '<CREATOR>',
-        dc_title: '<TITLE>',
+        dc_creator: t('creator'),
+        dc_title: t('title'),
         dc_issued: new Date(),
         dc_license: '',
-        text: '<TEXT>',
+        text: t('text'),
       }).then(() => {
         setLastUpdate(_id);
         backend.getDocument(documentId)
@@ -55,11 +57,11 @@ function FutureDocumentIcon({relatedTo, verb, setLastUpdate, backend, asSource =
       backend.putDocument({
         _id,
         editors,
-        dc_creator: '<CREATOR>',
-        dc_title: '<TITLE>',
+        dc_creator: t('creator'),
+        dc_title: t('title'),
         dc_issued: new Date(),
         dc_license: '',
-        text: '<TEXT>',
+        text: t('text'),
         links
       }).then((x) => {
         setLastUpdate(_id);
@@ -71,14 +73,13 @@ function FutureDocumentIcon({relatedTo, verb, setLastUpdate, backend, asSource =
   switch (verb) {
     case 'includes':
       return (
-        <FolderPlus title="Create a collection from this document"
+        <FolderPlus title= {`${t('collection')}`}
           className="icon create-collection" onClick={handleClick}
         />
       );
     default:
       return (
-        <PlusLg title={`Create a document ${asSource ? 'as a source' : relatedTo.length ? 'as a glose' : 'from scratch'}`}
-          className="icon create-document" onClick={handleClick}
+        <PlusLg title={`${t('document')} ${asSource ? t('source') : relatedTo.length ? t('glose') : t('scratch')}`} className="icon create-document" onClick={handleClick}
         />
       );
   }

frontend/src/components/License.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 function License({ license }) {
+  const { t } = useTranslation();
   let license_uri = license;
 
   let [license_name] = /BY[\w-]+/i.exec(license_uri) || [];
@@ -13,7 +15,7 @@ function License({ license }) {
   );
   return (
     <span className="license">
-      All rights reserved
+      {t('rights')}
     </span>
   );
 }