From 7bb7454d7f2b40cd18f131a9f9e2552bde0de225 Mon Sep 17 00:00:00 2001 From: KartoffelChips <104089082+KartoffelChipss@users.noreply.github.com> Date: Fri, 3 Apr 2026 14:56:45 +0200 Subject: [PATCH] AddedReact router and react query --- frontend/package.json | 2 + frontend/pnpm-lock.yaml | 44 ++++++++++++++ frontend/src/components/theme-provider.tsx | 71 ++++++++++++++++++++++ frontend/src/main.tsx | 26 +++++--- frontend/src/pages/Main/Main.tsx | 10 +++ 5 files changed, 145 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/theme-provider.tsx create mode 100644 frontend/src/pages/Main/Main.tsx diff --git a/frontend/package.json b/frontend/package.json index 3453e07..63ea5d0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,12 +12,14 @@ "dependencies": { "@fontsource-variable/geist": "^5.2.8", "@tailwindcss/vite": "^4.2.2", + "@tanstack/react-query": "^5.96.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^1.7.0", "radix-ui": "^1.4.3", "react": "^19.2.4", "react-dom": "^19.2.4", + "react-router": "^7.14.0", "shadcn": "^4.1.2", "tailwind-merge": "^3.5.0", "tailwindcss": "^4.2.2", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index d14824c..5307a88 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@tailwindcss/vite': specifier: ^4.2.2 version: 4.2.2(vite@8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@types/node@24.12.1)(jiti@2.6.1)) + '@tanstack/react-query': + specifier: ^5.96.2 + version: 5.96.2(react@19.2.4) class-variance-authority: specifier: ^0.7.1 version: 0.7.1 @@ -32,6 +35,9 @@ importers: react-dom: specifier: ^19.2.4 version: 19.2.4(react@19.2.4) + react-router: + specifier: ^7.14.0 + version: 7.14.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) shadcn: specifier: ^4.1.2 version: 4.1.2(@types/node@24.12.1)(typescript@5.9.3) @@ -1299,6 +1305,14 @@ packages: peerDependencies: vite: ^5.2.0 || ^6 || ^7 || ^8 + '@tanstack/query-core@5.96.2': + resolution: {integrity: sha512-hzI6cTVh4KNRk8UtoIBS7Lv9g6BnJPXvBKsvYH1aGWvv0347jT3BnSvztOE+kD76XGvZnRC/t6qdW1CaIfwCeA==} + + '@tanstack/react-query@5.96.2': + resolution: {integrity: sha512-sYyzzJT4G0g02azzJ8o55VFFV31XvFpdUpG+unxS0vSaYsJnSPKGoI6WdPwUucJL1wpgGfwfmntNX/Ub1uOViA==} + peerDependencies: + react: ^18 || ^19 + '@ts-morph/common@0.27.0': resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==} @@ -2562,6 +2576,16 @@ packages: '@types/react': optional: true + react-router@7.14.0: + resolution: {integrity: sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true + react-style-singleton@2.2.3: resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==} engines: {node: '>=10'} @@ -2642,6 +2666,9 @@ packages: resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==} engines: {node: '>= 18'} + set-cookie-parser@2.7.2: + resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==} + setprototypeof@1.2.0: resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} @@ -4297,6 +4324,13 @@ snapshots: tailwindcss: 4.2.2 vite: 8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@types/node@24.12.1)(jiti@2.6.1) + '@tanstack/query-core@5.96.2': {} + + '@tanstack/react-query@5.96.2(react@19.2.4)': + dependencies: + '@tanstack/query-core': 5.96.2 + react: 19.2.4 + '@ts-morph/common@0.27.0': dependencies: fast-glob: 3.3.3 @@ -5532,6 +5566,14 @@ snapshots: optionalDependencies: '@types/react': 19.2.14 + react-router@7.14.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4): + dependencies: + cookie: 1.1.1 + react: 19.2.4 + set-cookie-parser: 2.7.2 + optionalDependencies: + react-dom: 19.2.4(react@19.2.4) + react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4): dependencies: get-nonce: 1.0.1 @@ -5638,6 +5680,8 @@ snapshots: transitivePeerDependencies: - supports-color + set-cookie-parser@2.7.2: {} + setprototypeof@1.2.0: {} shadcn@4.1.2(@types/node@24.12.1)(typescript@5.9.3): diff --git a/frontend/src/components/theme-provider.tsx b/frontend/src/components/theme-provider.tsx new file mode 100644 index 0000000..26a5ad8 --- /dev/null +++ b/frontend/src/components/theme-provider.tsx @@ -0,0 +1,71 @@ +import { createContext, useContext, useEffect, useState } from 'react'; + +export type Theme = 'dark' | 'light' | 'system'; + +type ThemeProviderProps = { + children: React.ReactNode; + defaultTheme?: Theme; + storageKey?: string; +}; + +type ThemeProviderState = { + theme: Theme; + setTheme: (theme: Theme) => void; +}; + +const initialState: ThemeProviderState = { + theme: 'system', + setTheme: () => null, +}; + +const ThemeProviderContext = createContext(initialState); + +export function ThemeProvider({ + children, + defaultTheme = 'system', + storageKey = 'vite-ui-theme', + ...props +}: ThemeProviderProps) { + const [theme, setTheme] = useState( + () => (localStorage.getItem(storageKey) as Theme) || defaultTheme + ); + + useEffect(() => { + const root = window.document.documentElement; + + root.classList.remove('light', 'dark'); + + if (theme === 'system') { + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; + + root.classList.add(systemTheme); + return; + } + + root.classList.add(theme); + }, [theme]); + + const value = { + theme, + setTheme: (theme: Theme) => { + localStorage.setItem(storageKey, theme); + setTheme(theme); + }, + }; + + return ( + + {children} + + ); +} + +export const useTheme = () => { + const context = useContext(ThemeProviderContext); + + if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider'); + + return context; +}; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 3b08b76..b036a26 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,20 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { BrowserRouter, Route, Routes } from 'react-router'; +import { createRoot } from 'react-dom/client'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import './index.css'; +import MainPage from './pages/Main/Main'; +import { ThemeProvider } from './components/theme-provider'; + +const queryClient = new QueryClient(); createRoot(document.getElementById('root')!).render( - - - , -) + + + + + } /> + + + + +); diff --git a/frontend/src/pages/Main/Main.tsx b/frontend/src/pages/Main/Main.tsx new file mode 100644 index 0000000..a8821cb --- /dev/null +++ b/frontend/src/pages/Main/Main.tsx @@ -0,0 +1,10 @@ +const MainPage = () => { + return ( +
+

Main Page

+

Welcome to the main page of our application!

+
+ ); +}; + +export default MainPage;