Setup react router

client-tauri/package.json

@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@stirling-pdf/shared-operations": "^0.0.0",
-    "@tauri-apps/api": "^1.5.0",
+    "@tauri-apps/api": "^1.5.1",
     "archiver": "^6.0.1",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.0",

client-tauri/src/App.css

@@ -1,7 +0,0 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafb);
-}

client-tauri/src/App.tsx

@@ -1,84 +1,43 @@
-import { useState } from "react";
+import { Routes, Route, Outlet } from "react-router-dom";
-import reactLogo from "./assets/react.svg";
+import Home from "./pages/Home";
-import { appendToFilename } from './utils/file-utils';
+import About from "./pages/About";
-import { openFiles, downloadFile } from './utils/tauri-wrapper'
+import Dashboard from "./pages/Dashboard";
-import { rotatePages } from './utils/pdf-operations';
+import NoMatch from "./pages/NoMatch";
-import "./App.css";
+import NavBar from "./components/NavBar";
-
-function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(`Hello, ${name}! You've been greeted from Tauri!`);
-  }
-  async function rotatePdf() {
-    var selected = await openFiles({
-      multiple: false,
-      filters: [{
-        name: 'PDF',
-        extensions: ['pdf']
-      }]
-    })
-    
-    if (!selected) return;
-    selected
-
-    const rotated = await rotatePages(selected[0].data, 90);
-    console.log(rotated);
-
-    const appendedPath = appendToFilename(selected[0].getPath(), "_rotated");
-    console.log(appendedPath)
-
-    await downloadFile(rotated, {
-      defaultPath: appendedPath,
-      filters: [{
-        name: "PDF",
-        extensions: ['pdf']
-      }]
-    });
-    console.log("done!")
-  }
 
+export default function App() {
   return (
-    <div className="container">
+    <div>
-      <h1>Welcome to Tauri!</h1>
+      <h1>Basic Example</h1>
 
-      <div className="row">
+      {/* Routes nest inside one another. Nested route paths build upon
-        <a href="https://vitejs.dev" target="_blank">
+            parent route paths, and nested route elements render inside
-          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
+            parent route elements. See the note about <Outlet> below. */}
-        </a>
+      <Routes>
-        <a href="https://tauri.app" target="_blank">
+        <Route path="/" element={<Layout />}>
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
+          <Route index element={<Home />} />
-        </a>
+          <Route path="about" element={<About />} />
-        <a href="https://reactjs.org" target="_blank">
+          <Route path="dashboard" element={<Dashboard />} />
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
 
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
+          {/* Using path="*"" means "match anything", so this route
-
+                acts like a catch-all for URLs that we don't have explicit
-      <form
+                routes for. */}
-        className="row"
+          <Route path="*" element={<NoMatch />} />
-        onSubmit={(e) => {
+        </Route>
-          e.preventDefault();
+      </Routes>
-          greet();
-        }}
-      >
-        <input
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-
-      <button onClick={rotatePdf}>Rotate 90</button>
-
-      <p>{greetMsg}</p>
     </div>
   );
 }
 
-export default App;
+function Layout() {
+  return (
+    <div>
+        <NavBar/>
+
+      {/* An <Outlet> renders whatever child route is currently active,
+          so you can think about this <Outlet> as a placeholder for
+          the child routes we defined above. */}
+      <Outlet />
+    </div>
+  );
+}

client-tauri/src/components/NavBar.tsx

@@ -0,0 +1,18 @@
+import { Link } from "react-router-dom";
+
+function NoMatch() {
+    /* A "layout route" is a good place to put markup you want to
+        share across all the pages on your site, like navigation. */
+  return (
+    <nav>
+      <ul>
+        <li><Link to="/">Home</Link></li>
+        <li><Link to="/about">About</Link></li>
+        <li><Link to="/dashboard">Dashboard</Link></li>
+        <li><Link to="/nothing-here">Nothing Here</Link></li>
+      </ul>
+    </nav>
+  );
+}
+
+export default NoMatch;

client-tauri/src/main.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import { BrowserRouter } from "react-router-dom";
-import "./styles.css";
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
-  </React.StrictMode>,
+    </BrowserRouter>
+  </React.StrictMode>
 );

client-tauri/src/pages/About.tsx

@@ -0,0 +1,10 @@
+
+function About() {
+  return (
+    <div>
+      <h2>About</h2>
+    </div>
+  );
+}
+
+export default About;

client-tauri/src/pages/Dashboard.tsx

@@ -0,0 +1,10 @@
+
+function Dashboard() {
+  return (
+    <div>
+      <h2>Dashboard</h2>
+    </div>
+  );
+}
+
+export default Dashboard;

client-tauri/src/pages/Home.tsx

@@ -0,0 +1,10 @@
+
+function Home() {
+    return (
+      <div>
+        <h2>Home</h2>
+      </div>
+    );
+}
+
+export default Home;

client-tauri/src/pages/NoMatch.tsx

@@ -0,0 +1,14 @@
+import { Link } from "react-router-dom";
+
+function NoMatch() {
+  return (
+    <div>
+      <h2>Nothing to see here!</h2>
+      <p>
+        <Link to="/">Go to the home page 3</Link>
+      </p>
+    </div>
+  );
+}
+
+export default NoMatch;

package-lock.json

@@ -68,11 +68,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@stirling-pdf/shared-operations": "^0.0.0",
-        "@tauri-apps/api": "^1.5.0",
+        "@tauri-apps/api": "^1.5.1",
         "archiver": "^6.0.1",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.18.0"
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.5.0",
@@ -84,20 +85,6 @@
         "vite": "^4.4.4"
       }
     },
-    "client-tauri/node_modules/@tauri-apps/api": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.5.1.tgz",
-      "integrity": "sha512-6unsZDOdlXTmauU3NhWhn+Cx0rODV+rvNvTdvolE5Kls5ybA6cqndQENDt1+FS0tF7ozCP66jwWoH6a5h90BrA==",
-      "engines": {
-        "node": ">= 14.6.0",
-        "npm": ">= 6.6.0",
-        "yarn": ">= 1.19.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/tauri"
-      }
-    },
     "client-tauri/node_modules/@tauri-apps/cli": {
       "version": "1.5.6",
       "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.5.6.tgz",
@@ -286,6 +273,36 @@
         "node": ">= 10"
       }
     },
+    "client-tauri/node_modules/react-router": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
+      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+      "dependencies": {
+        "@remix-run/router": "1.11.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "client-tauri/node_modules/react-router-dom": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
+      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+      "dependencies": {
+        "@remix-run/router": "1.11.0",
+        "react-router": "6.18.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -3638,6 +3655,14 @@
         "pako": "^1.0.10"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
+      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3693,6 +3718,20 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@tauri-apps/api": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.5.1.tgz",
+      "integrity": "sha512-6unsZDOdlXTmauU3NhWhn+Cx0rODV+rvNvTdvolE5Kls5ybA6cqndQENDt1+FS0tF7ozCP66jwWoH6a5h90BrA==",
+      "engines": {
+        "node": ">= 14.6.0",
+        "npm": ">= 6.6.0",
+        "yarn": ">= 1.19.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tauri"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",