From fbc921a077ce8b19f029f5b6599102207332eed3 Mon Sep 17 00:00:00 2001
From: Felix Kaspar <ich@felixkaspar.com>
Date: Sun, 28 Jan 2024 19:14:53 +0100
Subject: [PATCH] translation in frontend

---
 client-tauri/src/App.tsx                      | 18 +++++--
 client-tauri/src/components/NavBar.tsx        |  8 +--
 .../src/declarations/shared-operations.d.ts   |  4 --
 client-tauri/src/pages/Dynamic.tsx            | 49 +++++++++++++++++++
 client-tauri/src/pages/Home.tsx               |  4 ++
 client-tauri/src/pages/NoMatch.tsx            |  4 +-
 server-node/src/index.ts                      |  3 +-
 .../src/workflow/getOperatorByName.ts         |  2 +-
 shared-operations/tsconfig.json               |  3 +-
 9 files changed, 80 insertions(+), 15 deletions(-)
 delete mode 100644 client-tauri/src/declarations/shared-operations.d.ts
 create mode 100644 client-tauri/src/pages/Dynamic.tsx

diff --git a/client-tauri/src/App.tsx b/client-tauri/src/App.tsx
index ce88cddae..4a313b6c3 100644
--- a/client-tauri/src/App.tsx
+++ b/client-tauri/src/App.tsx
@@ -4,6 +4,7 @@ import { Routes, Route, Outlet } from "react-router-dom";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import Dashboard from "./pages/Dashboard";
+import Dynamic from "./pages/Dynamic";
 import ToPdf from "./pages/convert/ToPdf";
 import Impose from "./pages/page-operations/Impose";
 import NoMatch from "./pages/NoMatch";
@@ -15,10 +16,20 @@ import { Container } from "react-bootstrap";
 import { useTranslation, initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 
-import i18n, { options } from "@stirling-pdf/shared-operations/src/i18next.config";
+import i18next from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
 
-i18n.use(LanguageDetector)
-    .use(initReactI18next).init(options) // passes i18n down to react-i18next
+i18next.use(LanguageDetector).use(initReactI18next).use(resourcesToBackend((language: string, namespace: string) => import(`../../shared-operations/public/locales/${namespace}/${language}.json`)))
+.init({
+    debug: true,
+    ns: ["common"], // Preload this namespace, no need to add the others, they will load once their module is loaded
+    defaultNS: "common",
+    fallbackLng: "en",
+    interpolation: {
+        escapeValue: false,
+    },
+    initImmediate: true // Makes loading blocking but sync
+}); // TODO: use i18next.config.ts instead
 
 import "./general.css";
 
@@ -34,6 +45,7 @@ export default function App() {
                     <Route index element={<Home />} />
                     <Route path="about" element={<About />} />
                     <Route path="dashboard" element={<Dashboard />} />
+                    <Route path="dynamic" element={<Dynamic />} />
 
                     {/* Using path="*"" means "match anything", so this route
                 acts like a catch-all for URLs that we don't have explicit
diff --git a/client-tauri/src/components/NavBar.tsx b/client-tauri/src/components/NavBar.tsx
index 91451298b..9af79d2d8 100644
--- a/client-tauri/src/components/NavBar.tsx
+++ b/client-tauri/src/components/NavBar.tsx
@@ -68,11 +68,13 @@ function convertToNavDropdown(sublist: NavInfoSublist, index: number) {
 function NavBar() {
     const { t } = useTranslation();
 
+    // TODO: Construct automatically by fetching local & server-side operators
+
     const navInfo = [
-        {displayText: t("multiTool.title"), icon: BsTools, dest: "/home", tooltip: t("home.multiTool.desc")},
+        {displayText: t("multiTool.title"), icon: BsTools, dest: "/nothing-here", tooltip: t("home.multiTool.desc")},
         {displayText: t("navbar.pageOps"), icon: BsFileEarmarkPdf, sublist: [
-            { displayText: t("home.merge.title"), icon: AiOutlineMergeCells, dest: "/dashboard", tooltip: t("home.merge.desc") },
-            { displayText: t("home.split.title"), icon: AiOutlineSplitCells, dest: "/about", tooltip: t("home.split.desc") },
+            { displayText: t("home.merge.title"), icon: AiOutlineMergeCells, dest: "/nothing-here", tooltip: t("home.merge.desc") },
+            { displayText: t("home.split.title"), icon: AiOutlineSplitCells, dest: "/nothing-here", tooltip: t("home.split.desc") },
             { displayText: t("home.pdfOrganiser.title"), icon: BsSortNumericDown, dest: "/nothing-here", tooltip: t("home.pdfOrganiser.desc") },
             { displayText: t("home.rotate.title"), icon: BsArrowClockwise, dest: "/nothing-here", tooltip: t("home.rotate.desc") },
             { displayText: t("home.removePages.title"), icon: BsFileEarmarkX, dest: "/nothing-here", tooltip: t("home.removePages.desc") },
diff --git a/client-tauri/src/declarations/shared-operations.d.ts b/client-tauri/src/declarations/shared-operations.d.ts
deleted file mode 100644
index 3cee864c4..000000000
--- a/client-tauri/src/declarations/shared-operations.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-
-declare module "@stirling-pdf/shared-operations/wasm/pdfcpu/pdfcpu-wrapper-browser.js" {
-    export async function oneToOne(wasmArray: any, snapshot: any): Promise<Uint8Array>;
-}
diff --git a/client-tauri/src/pages/Dynamic.tsx b/client-tauri/src/pages/Dynamic.tsx
new file mode 100644
index 000000000..242ff7ce7
--- /dev/null
+++ b/client-tauri/src/pages/Dynamic.tsx
@@ -0,0 +1,49 @@
+import { Link } from "react-router-dom";
+
+import { listOperatorNames } from "@stirling-pdf/shared-operations/src/workflow/getOperatorByName"
+import { Impose } from "@stirling-pdf/shared-operations/src/functions/impose"
+import { BaseSyntheticEvent } from "react";
+
+function Dynamic() {
+    console.log(listOperatorNames());
+    
+    const operators = listOperatorNames();
+    
+    function selectionChanged(s: BaseSyntheticEvent) {
+        const selectedValue = s.target.value;
+        if(selectedValue == "none") return;
+        const LoadedOperator = import(`../shared-operations/src/functions/${selectedValue}`);
+        LoadedOperator.then(console.log);
+    }
+
+    return (
+        <div>
+            <h2>Dynamic test page for operators</h2>
+
+            <input type="file" id="pdfFile" accept=".pdf" multiple />
+            <br />
+            
+            <br />
+            <textarea name="workflow" id="workflow"></textarea>
+            <br />
+            <select id="pdfOptions" onChange={selectionChanged}>
+                <option value="none">none</option>
+                {operators.map((operator, i) => { 
+                    return (<option value={operator}>{operator}</option>) 
+                })}
+            </select>
+            <button id="loadButton">Load</button>
+            <br />
+            
+            <br />
+            <button id="doneButton">Done</button>
+
+            <p>
+                <Link to="/">Go back home...</Link>
+            </p>
+        </div>
+    );
+}
+
+
+export default Dynamic;
\ No newline at end of file
diff --git a/client-tauri/src/pages/Home.tsx b/client-tauri/src/pages/Home.tsx
index e2b2e543f..907074dfe 100644
--- a/client-tauri/src/pages/Home.tsx
+++ b/client-tauri/src/pages/Home.tsx
@@ -1,8 +1,12 @@
+import { Link } from "react-router-dom";
 
 function Home() {
     return (
         <div>
             <h2>Home</h2>
+            <Link to="/about">About</Link><br />
+            <Link to="/dashboard">Dashboard</Link><br />
+            <Link to="/dynamic">Dynamic</Link>
         </div>
     );
 }
diff --git a/client-tauri/src/pages/NoMatch.tsx b/client-tauri/src/pages/NoMatch.tsx
index 6794379ce..53e26d2b8 100644
--- a/client-tauri/src/pages/NoMatch.tsx
+++ b/client-tauri/src/pages/NoMatch.tsx
@@ -3,9 +3,9 @@ import { Link } from "react-router-dom";
 function NoMatch() {
     return (
         <div>
-            <h2>Nothing to see here!</h2>
+            <h2>The Page you are trying to access does not exist.</h2>
             <p>
-                <Link to="/">Go to the home page 3</Link>
+                <Link to="/">Go back home...</Link>
             </p>
         </div>
     );
diff --git a/server-node/src/index.ts b/server-node/src/index.ts
index 0e1a85c85..11b584791 100644
--- a/server-node/src/index.ts
+++ b/server-node/src/index.ts
@@ -1,4 +1,5 @@
-import "@stirling-pdf/shared-operations/src/i18next.config";
+import { init } from "@stirling-pdf/shared-operations/src/i18next.config";
+init("./public/locales/");
 
 import express from "express";
 const app = express();
diff --git a/shared-operations/src/workflow/getOperatorByName.ts b/shared-operations/src/workflow/getOperatorByName.ts
index 30fa9f3f5..b3890c2a1 100644
--- a/shared-operations/src/workflow/getOperatorByName.ts
+++ b/shared-operations/src/workflow/getOperatorByName.ts
@@ -27,5 +27,5 @@ export function getOperatorByName(name: string): typeof Operator | undefined {
 
 export function listOperatorNames(): string[] {
     // TODO: Implement this
-    return [];
+    return ["impose"];
 }
diff --git a/shared-operations/tsconfig.json b/shared-operations/tsconfig.json
index 5ea10b16c..ec0eab812 100644
--- a/shared-operations/tsconfig.json
+++ b/shared-operations/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
-        "module": "Node16",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
         "esModuleInterop": true,
         "baseUrl": "./src",                                  /* Specify the base directory to resolve non-relative module names. */
         "paths": {