From 5e12baa35fe1773af0924641b149f359990b9d9b Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Wed, 5 Oct 2022 23:24:59 +0200
Subject: [PATCH] add translations

---
 assets/jsons/translations/en.json              | 18 ++++++++++++++++++
 assets/jsons/translations/es.json              | 18 ++++++++++++++++++
 assets/jsons/translations/fr.json              | 18 ++++++++++++++++++
 .../slides/mods/mods-grid.component.tsx        | 12 +++++++-----
 .../slides/mods/mods-slide.component.tsx       |  8 +++++---
 5 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/assets/jsons/translations/en.json b/assets/jsons/translations/en.json
index fd171178..1d612590 100644
--- a/assets/jsons/translations/en.json
+++ b/assets/jsons/translations/en.json
@@ -14,6 +14,24 @@
             "desktop": "Desktop Mod",
             "debug": "Debug Mod"
          },
+         "mods":{
+            "loading-mods": "Loading mods...",
+            "buttons":{
+                "more-infos": "More info",
+                "install-or-update": "Install or update"
+            },
+            "mods-grid":{
+                "header-bar":{
+                    "name": "Name",
+                    "installed": "Installed",
+                    "latest": "Latest",
+                    "description":"Description",
+                    "dropdown":{
+                        "uninstall-all":"Uninstall all"
+                    }
+                }
+            }
+         },
          "dropdown":{
             "open-folder": "Open folder",
             "verify-files": "Verify files",
diff --git a/assets/jsons/translations/es.json b/assets/jsons/translations/es.json
index 3a7613a6..7843d4bc 100644
--- a/assets/jsons/translations/es.json
+++ b/assets/jsons/translations/es.json
@@ -14,6 +14,24 @@
             "desktop": "Desktop Mod",
             "debug": "Debug Mod"
          },
+         "mods":{
+            "loading-mods": "Cargando mods...",
+            "buttons":{
+                "more-infos": "Más información",
+                "install-or-update": "Instalar o actualizar"
+            },
+            "mods-grid":{
+                "header-bar":{
+                    "name": "Nombre",
+                    "installed": "Instalado",
+                    "latest": "Último",
+                    "description":"Descripción",
+                    "dropdown":{
+                        "uninstall-all":"Desinstalar todos"
+                    }
+                }
+            }
+         },
          "dropdown":{
             "open-folder": "Abrir la carpeta",
             "verify-files": "Verificar los archivos",
diff --git a/assets/jsons/translations/fr.json b/assets/jsons/translations/fr.json
index 2db2db14..71d036d0 100644
--- a/assets/jsons/translations/fr.json
+++ b/assets/jsons/translations/fr.json
@@ -14,6 +14,24 @@
             "desktop": "Mode Bureau",
             "debug": "Mode Debug"
          },
+         "mods":{
+            "loading-mods": "Chargement des mods...",
+            "buttons":{
+                "more-infos": "Plus d'infos",
+                "install-or-update": "Installer ou mettre à jour"
+            },
+            "mods-grid":{
+                "header-bar":{
+                    "name": "Nom",
+                    "installed": "Installé",
+                    "latest": "Récent",
+                    "description":"Description",
+                    "dropdown":{
+                        "uninstall-all":"Tout désinstaller"
+                    }
+                }
+            }
+         },
          "dropdown":{
             "open-folder": "Ouvrir le dossier",
             "verify-files": "Vérifier les fichiers",
diff --git a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
index d9fa78a0..7ed236f2 100644
--- a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
+++ b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
@@ -2,6 +2,7 @@ import { motion } from "framer-motion";
 import { useState } from "react";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmDropdownButton } from "renderer/components/shared/bsm-dropdown-button.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { BsModsManagerService } from "renderer/services/bs-mods-manager.service";
 import { PageStateService } from "renderer/services/page-state.service";
 import { Mod } from "shared/models/mods/mod.interface"
@@ -16,6 +17,7 @@ export function ModsGrid({modsMap, installed, modsSelected, onModChange, moreInf
 
     const [filter, setFilter] = useState("");
     const [filterEnabled, setFilterEnabled] = useState(false);
+    const t = useTranslation();
 
     const installedModVersion = (key: string, mod: Mod): string => {
         if(!installed || !installed.get(key)){ return undefined; }
@@ -55,16 +57,16 @@ export function ModsGrid({modsMap, installed, modsSelected, onModChange, moreInf
                 {(filterEnabled ? (
                     <motion.input autoFocus className="bg-main-color-1 rounded-md h-6 px-2" initial={{width: 0}} animate={{width: "250px"}} transition={{ease:"easeInOut", duration:.15}} onChange={e => handleInput(e.target.value)}/>   
                 ):(
-                    <span className="w-full text-center">Nom</span>
+                    <span className="w-full text-center">{t("pages.version-viewer.mods.mods-grid.header-bar.name")}</span>
                 ))}
             </span>
             
-            <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2">Installé</span>
-            <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2">Récent</span>
-            <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8">Description</span>
+            <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2">{t("pages.version-viewer.mods.mods-grid.header-bar.installed")}</span>
+            <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2">{t("pages.version-viewer.mods.mods-grid.header-bar.latest")}</span>
+            <span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8">{t("pages.version-viewer.mods.mods-grid.header-bar.description")}</span>
             <span className="z-10 sticky top-0 bg-inherit border-b-2 border-main-color-1 h-8 flex justify-start items-center py-1 pl-[3px] min-w-[50px]">
                     <BsmDropdownButton className="h-full aspect-square relative rounded-full bg-light-main-color-1 dark:bg-main-color-3" withBar={false} icon="three-dots" buttonClassName="!rounded-full !p-[2px] !bg-light-main-color-2 dark:!bg-main-color-2 hover:!bg-light-main-color-1 dark:hover:!bg-main-color-3" menuTranslationY="5px" items={[
-                        ({text: "Tout désintaller", icon: "trash", onClick: handleUninstallAll}),
+                        ({text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.uninstall-all", icon: "trash", onClick: handleUninstallAll}),
                     ]}/>
             </span>
             
diff --git a/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
index f0557d0b..c1c07b17 100644
--- a/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
+++ b/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
@@ -14,6 +14,7 @@ import YuruYuriDance from "../../../../../../assets/images/gifs/yuruyuri-dance.g
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { skip, filter } from "rxjs/operators";
 import { Subscription } from "rxjs";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
  
 export function ModsSlide({version}: {version: BSVersion}) {
 
@@ -27,6 +28,7 @@ export function ModsSlide({version}: {version: BSVersion}) {
     const [modsSelected, setModsSelected] = useState([] as Mod[]);
     const [moreInfoMod, setMoreInfoMod] = useState(null as Mod);
     const installing = useObservable(modsManager.isInstalling$);
+    const t  = useTranslation();
 
     const downloadRef = useRef(null);
     const [downloadWith, setDownloadWidth] = useState(0);
@@ -112,16 +114,16 @@ export function ModsSlide({version}: {version: BSVersion}) {
                                 <ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo}/>
                             </div>
                             <div className="h-10 shrink-0 flex items-center justify-between px-3">
-                                <BsmButton className="text-center rounded-md px-2 py-[2px]" text="Plus d'infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{width: downloadWith}}/>
+                                <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{width: downloadWith}}/>
                                 <div ref={downloadRef}>
-                                    <BsmButton className="text-center rounded-md px-2 py-[2px]" text="Installer ou mettre à jour" withBar={false} disabled={installing} typeColor="primary" onClick={installMods}/>
+                                    <BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.install-or-update" withBar={false} disabled={installing} typeColor="primary" onClick={installMods}/>
                                 </div>
                             </div>
                         </>
                     ) : (
                         <div className="w-full h-full flex flex-col items-center justify-center relative">
                             <img className="w-32 h-32 spin-loading" src={BeatWaitingImg}></img>
-                            <span className="text-xl mt-3 h-0 italic">Chargement des mods...</span>
+                            <span className="text-xl mt-3 h-0 italic">{t("pages.version-viewer.mods.loading-mods")}</span>
                             <SpoilerClick className="absolute right-5 w-20 h-[120px] bottom-5 cursor-pointer">
                                 <img className="relative w-full" src={YuruYuriDance}/>
                             </SpoilerClick>