diff --git a/index.html b/index.html index e4b78ea..4a726cf 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + Personal Finance tools web app
diff --git a/package-lock.json b/package-lock.json index 9351863..484f24a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2309,6 +2309,21 @@ "node": ">=6.9.0" } }, + "node_modules/get-tsconfig": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.0.tgz", + "integrity": "sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "resolve-pkg-maps": "^1.0.0" + }, + "funding": { + "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" + } + }, "node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -2868,6 +2883,18 @@ "node": ">=4" } }, + "node_modules/resolve-pkg-maps": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", + "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "funding": { + "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" + } + }, "node_modules/reusify": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", @@ -3049,6 +3076,28 @@ "typescript": ">=4.8.4" } }, + "node_modules/tsx": { + "version": "4.19.3", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.3.tgz", + "integrity": "sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "esbuild": "~0.25.0", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, "node_modules/turbo-stream": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 3d7ded3..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' - -function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) -} - -export default App diff --git a/src/main.tsx b/src/main.tsx index bef5202..cb313d8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,11 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { RouterProvider } from "react-router"; +import "./index.css"; +import { router } from "./routes.ts"; -createRoot(document.getElementById('root')!).render( +createRoot(document.getElementById("root")!).render( - - , -) + + +); diff --git a/src/App.css b/src/root.css similarity index 100% rename from src/App.css rename to src/root.css diff --git a/src/root.tsx b/src/root.tsx new file mode 100644 index 0000000..f854b94 --- /dev/null +++ b/src/root.tsx @@ -0,0 +1,14 @@ +import "./root.css"; +import { NavLink, Outlet } from "react-router"; + +export default function App() { + return ( + <> +

Personal Finance

+ + + + ); +} diff --git a/src/routes.ts b/src/routes.ts new file mode 100644 index 0000000..2646ee8 --- /dev/null +++ b/src/routes.ts @@ -0,0 +1,17 @@ +import { createBrowserRouter } from "react-router"; +import Transactions, { loader } from "./routes/transactions"; +import App from "./root"; + +export const router = createBrowserRouter([ + { + path: "/", + Component: App, + children: [ + { + path: "transactions", + Component: Transactions, + loader: loader, + }, + ], + }, +]); diff --git a/src/routes/transactions.tsx b/src/routes/transactions.tsx new file mode 100644 index 0000000..803c2f7 --- /dev/null +++ b/src/routes/transactions.tsx @@ -0,0 +1,37 @@ +import { useLoaderData } from "react-router"; + +export async function loader() { + return await fetch(`http://localhost:9000/transactions`).then((response) => { + return response.json(); + }); +} + +export default function Transactions() { + const transactions: { + id: number; + date: string; + description: string; + value: number; + }[] = useLoaderData(); + + return ( + + + + + + + + + + {transactions.map((t) => ( + + + + + + ))} + +
datedescriptionvalue
{t.date}{t.description}{t.value}
+ ); +}