feat: add i18n

GIP-RECIA · Apr 14, 2023 · d14dca7 · d14dca7
1 parent 9b7da5b
commit d14dca7
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 16 deletions.
diff --git a/client/package.json b/client/package.json
@@ -19,10 +19,14 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@tldraw/tldraw": "1.29.2",
     "axios": "^1.3.5",
+    "i18next": "^22.4.14",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.2.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.3.8",
+    "react-i18next": "^12.2.0",
     "react-toastify": "^9.1.2",
     "sass": "^1.62.0",
     "uuid": "^9.0.0",

diff --git a/client/src/components/Editor.tsx b/client/src/components/Editor.tsx
@@ -14,6 +14,7 @@ import MultiplayerEditor from "./MultiplayerEditor";
 import SingleplayerEditor from "./SingleplayerEditor";
 import "../assets/scss/editor.scss";
 import { ToastContainer } from "react-toastify";
+import { useTranslation } from "react-i18next";
 
 type Settings = {
   idbName: string;
@@ -55,6 +56,8 @@ function Editor({
   noLeave,
   noShare,
 }: Settings) {
+  const { t } = useTranslation();
+
   const [room, setRoom] = useState<string | undefined>(roomId);
   const [joinRoom, setJoinRoom] = useState<string | undefined>(undefined);
   const [wantJoinRoom, setWantJoinRoom] = useState<boolean>(false);
@@ -110,7 +113,7 @@ function Editor({
             <a
               className="sharing-item"
               onClick={() => setRoom(uuidv4())}
-              title="Generate a room"
+              title={t("sharingItem.generateRoom")}
             >
               <FontAwesomeIcon icon={faUsers} />
             </a>
@@ -122,7 +125,7 @@ function Editor({
                 setUseLocalDoc(true);
                 setRoom(uuidv4());
               }}
-              title="Share current document"
+              title={t("sharingItem.shareCurrentPage")}
             >
               <FontAwesomeIcon icon={faShareNodes} />
             </a>
@@ -131,7 +134,7 @@ function Editor({
             <a
               className="sharing-item"
               onClick={() => setWantJoinRoom(true)}
-              title="Join room"
+              title={t("sharingItem.joinRoom")}
             >
               <FontAwesomeIcon icon={faArrowRightToBracket} />
             </a>
@@ -144,7 +147,7 @@ function Editor({
               }
               onKeyUp={(e) => e.key === "Enter" && joinRoomHandler()}
               type="text"
-              placeholder="id of room to join..."
+              placeholder={t("sharingItem.joinRoomPlaceholder")}
               maxLength={uuidv4().length}
               autoFocus
             ></input>
@@ -153,7 +156,7 @@ function Editor({
             <a
               className="sharing-item"
               onClick={resetStates}
-              title="Close joining room input"
+              title={t("sharingItem.closeJoinRoom")}
             >
               <FontAwesomeIcon icon={faXmark} />
             </a>
@@ -162,7 +165,7 @@ function Editor({
             <a
               className="sharing-item"
               onClick={joinRoomHandler}
-              title="Join room"
+              title={t("sharingItem.joinRoom")}
             >
               <FontAwesomeIcon icon={faArrowRightToBracket} />
             </a>
@@ -175,7 +178,7 @@ function Editor({
             <a
               className="sharing-item"
               onClick={() => navigator.clipboard.writeText(room)}
-              title="Copy room id to clipboard"
+              title={t("sharingItem.roomId")}
             >
               {room}
             </a>
@@ -184,7 +187,7 @@ function Editor({
             <a
               className="sharing-item"
               onClick={resetStates}
-              title="Leave room"
+              title={t("sharingItem.leaveRoom")}
             >
               <FontAwesomeIcon icon={faArrowRightFromBracket} />
             </a>

diff --git a/client/src/hooks/useSave.ts b/client/src/hooks/useSave.ts
@@ -3,8 +3,11 @@ import { useCallback } from "react";
 import { saveOnNextcloud } from "../services/serviceNextcloud";
 import { DialogState } from "@tldraw/tldraw/dist/hooks";
 import { toast } from "react-toastify";
+import { useTranslation } from "react-i18next";
 
 export function useSave(nextcloudUrl: string) {
+  const { t } = useTranslation();
+
   const onSaveProject = useCallback((app: TldrawApp): void => {}, []);
 
   const onSaveProjectAs = useCallback((app: TldrawApp): void => {}, []);
@@ -40,20 +43,26 @@ export function useSave(nextcloudUrl: string) {
 
       try {
         let response = await saveOnNextcloud(nextcloudUrl, file, info.type);
-        let message;
+        let state;
         switch (response.status) {
           case 201:
-            message = "created";
+            state = t("nextcloud.stateMessage.created");
             break;
           case 204:
-            message = "updated";
+            state = t("nextcloud.stateMessage.updated");
             break;
         }
-        toast.success(`"${file.name}" has been ${message} on your Nextcloud`, {
-          theme: "colored",
-        });
+        toast.success(
+          t("nextcloud.toast.success", {
+            fileName: `${file.name}.${info.type}`,
+            state: state,
+          }),
+          {
+            theme: "colored",
+          }
+        );
       } catch (ignore) {
-        toast.error("Loggin to your Nextcloud and retry", {
+        toast.error(t("nextcloud.toast.error"), {
           theme: "colored",
           onClose: () => window.open(`${nextcloudUrl}/`, "_blank"),
         });

diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import Backend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+
+export default i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en",
+    resources: {
+      en: {
+        translation: en,
+      },
+      fr: {
+        translation: fr,
+      },
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -0,0 +1,21 @@
+{
+  "sharingItem": {
+    "generateRoom": "Generate a room",
+    "shareCurrentPage": "Share current page",
+    "joinRoom": "Join room",
+    "joinRoomPlaceholder": "id of room...",
+    "closeJoinRoom": "Close joining room mode",
+    "roomId": "Copy room id to clipboard",
+    "leaveRoom": "Leave room"
+  },
+  "nextcloud": {
+    "stateMessage": {
+      "Created": "created",
+      "Updated": "updated"
+    },
+    "toast": {
+      "success": "\"{{fileName}}\" has been {{state}} on your Nextcloud",
+      "error": "Loggin to your Nextcloud and retry"
+    }
+  }
+}
diff --git a/client/src/locales/fr.json b/client/src/locales/fr.json
@@ -0,0 +1,21 @@
+{
+  "sharingItem": {
+    "generateRoom": "Créer une salle",
+    "shareCurrentPage": "Partager la page",
+    "joinRoom": "Rejoindre une salle",
+    "joinRoomPlaceholder": "id de la salle...",
+    "closeJoinRoom": "Fermer le mode rejoindre",
+    "roomId": "Copier l'id de la salle dans le presse papier",
+    "leaveRoom": "Quitter la salle"
+  },
+  "nextcloud": {
+    "stateMessage": {
+      "created": "crée",
+      "updated": "mis à jour"
+    },
+    "toast": {
+      "success": "\"{{fileName}}\" as été {{state}} dans votre Nextcloud",
+      "error": "Connectez vous à votre Nextcloud et réessayez"
+    }
+  }
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -2,3 +2,5 @@ import "react-toastify/dist/ReactToastify.css";
 import "./assets/scss/main.scss";
 
 import "./ce";
+
+import "./i18n";