Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-01-23 00:06:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Setup react router

Browse Source
This commit is contained in:
Saud Fatayerji 2023-11-03 12:06:55 +03:00
parent fcf53c3923
commit 98a19e56a4
11 changed files with 165 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client-tauri/package.json
View File

@ -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",

7
client-tauri/src/App.css
View File

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

111
client-tauri/src/App.tsx
View File

@ -1,84 +1,43 @@
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { appendToFilename } from './utils/file-utils';
import { openFiles, downloadFile } from './utils/tauri-wrapper'
import { rotatePages } from './utils/pdf-operations';
import "./App.css";
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!")
}
import { Routes, Route, Outlet } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";
import NoMatch from "./pages/NoMatch";
import NavBar from "./components/NavBar";
export default function App() {
return (
<div className="container">
<h1>Welcome to Tauri!</h1>
<div>
<h1>Basic Example</h1>
<div className="row">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
</a>
<a href="https://tauri.app" target="_blank">
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
{/* Routes nest inside one another. Nested route paths build upon
parent route paths, and nested route elements render inside
parent route elements. See the note about <Outlet> below. */}
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />} />
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
<form
className="row"
onSubmit={(e) => {
e.preventDefault();
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>
{/* Using path="*"" means "match anything", so this route
acts like a catch-all for URLs that we don't have explicit
routes for. */}
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>
</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>
);
}

18
client-tauri/src/components/NavBar.tsx Normal file
View File

@ -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;

0
client-tauri/src/styles.css → client-tauri/src/index.css
View File

16
client-tauri/src/main.tsx
View File

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

10
client-tauri/src/pages/About.tsx Normal file
View File

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

10
client-tauri/src/pages/Dashboard.tsx Normal file
View File

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

10
client-tauri/src/pages/Home.tsx Normal file
View File

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

14
client-tauri/src/pages/NoMatch.tsx Normal file
View File

@ -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;

71
package-lock.json generated
View File

@ -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",