cos tam dziala

front/bun.lock

@@ -8,6 +8,7 @@
         "@fontsource-variable/figtree": "^5.2.10",
         "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@tailwindcss/vite": "^4.2.1",
+        "@tanstack/react-query": "4",
         "@types/ldapjs": "^3.0.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -469,6 +470,10 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.2.2", "", { "dependencies": { "@tailwindcss/node": "4.2.2", "@tailwindcss/oxide": "4.2.2", "tailwindcss": "4.2.2" }, "peerDependencies": { "vite": "7.3.2" } }, "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w=="],
 
+    "@tanstack/query-core": ["@tanstack/query-core@4.44.0", "", {}, "sha512-swSgb7OiPRR3UuIL7NuDrZNSMGmQD+wdtHxPD7j60SvBEnxbXurl5XOirtGEX2gm2hbK6mC8kMV1I+uO3l0UOw=="],
+
+    "@tanstack/react-query": ["@tanstack/react-query@4.44.0", "", { "dependencies": { "@tanstack/query-core": "4.44.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-native": "*" }, "optionalPeers": ["react-dom", "react-native"] }, "sha512-RuIqHYrS98LrK/8kJJOJMMSQ/BCpojwsXDh7p0fBmp38ZOz6dlk+uyFRRusH+V+t3POoCsDOQ2zhomEYOeReXw=="],
+
     "@ts-morph/common": ["@ts-morph/common@0.27.0", "", { "dependencies": { "fast-glob": "3.3.3", "minimatch": "10.2.5", "path-browserify": "1.0.1" } }, "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ=="],
 
     "@tsconfig/node10": ["@tsconfig/node10@1.0.12", "", {}, "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ=="],

front/package.json

@@ -15,6 +15,7 @@
     "@fontsource-variable/figtree": "^5.2.10",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-query": "4",
     "@types/ldapjs": "^3.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

front/src/global.d.ts

@@ -0,0 +1,12 @@
+type User = {
+    username: string;
+    dn?: string;
+};
+
+type AuthContextType = {
+    user: User | null;
+    isAuthenticated: boolean;
+    login: (username: string, password: string) => Promise<void>;
+    logout: () => void;
+};
+

front/src/hooks/useLogin.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export function useLogin() {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async (data: {
+            username: string;
+            password: string;
+        }) => {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/auth/login`, {
+                method: "POST",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (!res.ok) {
+                throw new Error("Invalid credentials");
+            }
+
+            return res.json();
+        },
+
+        onSuccess(data) {
+            queryClient.setQueryData(["me"], data.user);
+        },
+    });
+}

front/src/hooks/useLogout.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+export function useLogout() {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async () => {
+            await fetch(`${import.meta.env.VITE_API_URL}/auth/logout`, {
+                method: "POST",
+                credentials: "include",
+            });
+        },
+
+        onSuccess() {
+            queryClient.setQueryData(["me"], null);
+        },
+    });
+}

front/src/hooks/useMe.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+
+
+export function useMe() {
+    return useQuery<User>({
+        queryKey: ["me"],
+        queryFn: async () => {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/auth/me`, {
+                credentials: "include",
+            });
+
+            if (res.status === 401) {
+                return null;
+            }
+
+            if (!res.ok) {
+                throw new Error("Failed to get current user");
+            }
+
+            return res.json();
+        },
+    });
+}

front/src/hooks/video/useCreateClip.ts

@@ -0,0 +1,18 @@
+import { useMutation } from "@tanstack/react-query";
+
+export function useCreateClip() {
+    return useMutation({
+        mutationFn: async () => {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/protected/createclip`, {
+                method: "POST",
+                credentials: "include",
+            });
+
+            if (!res.ok) {
+                throw new Error("Invalid credentials");
+            }
+
+            return res.json();
+        },
+    });
+}

front/src/hooks/video/useRefreshFiles.ts

@@ -0,0 +1,18 @@
+import { useMutation } from "@tanstack/react-query";
+
+export function useRefreshFiles() {
+    return useMutation({
+        mutationFn: async () => {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/protected/refreshfiles`, {
+                method: "POST",
+                credentials: "include",
+            });
+
+            if (!res.ok) {
+                throw new Error("Invalid credentials");
+            }
+
+            return res.json();
+        },
+    });
+}

front/src/layouts/MainLayout.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { useAuth } from "@/providers/AuthProvider";
+import { useLogout } from "@/hooks/useLogout";
+import { useMe } from "@/hooks/useMe";
 import { type ReactNode } from "react";
 import { Link, Outlet, useLocation } from "react-router";
 
@@ -18,7 +19,9 @@ function Path({ url, children }: { url: string, children: ReactNode }) {
 }
 
 export function MainLayout() {
-    const { isAuthenticated, user, logout } = useAuth()
+    const { data: user } = useMe();
+    const isAuthenticated = !!user;
+    const logout = useLogout();
 
 
     return (
@@ -53,7 +56,7 @@ export function MainLayout() {
 
                     {/* Actions */}
                     <div className="flex items-center gap-2 shrink-0">
-                        {isAuthenticated && user &&
+                        {user &&
                             <>
                                 <div>
                                     {user.username}
@@ -61,7 +64,10 @@ export function MainLayout() {
                             </>
                         }
                         {isAuthenticated ?
-                            <Button onClick={logout}>Logout</Button>
+                            <Button
+                                disabled={logout.isPending}
+                                onClick={() => { logout.mutate() }}
+                            >Logout</Button>
                             :
                             <Button asChild>
                                 <Link to="/auth/login">Login</Link>

front/src/main.tsx

@@ -1,20 +1,23 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-
-import "./index.css"
 import { ThemeProvider } from "@/components/theme-provider.tsx"
 import { BrowserRouter, Route, Routes } from "react-router"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import "./index.css"
+
 import AuthLayout from "./layouts/AuthLayout.tsx"
 import { LoginForm } from "./pages/Login.tsx"
 import { Home } from "./pages/Home.tsx"
 import { MainLayout } from "./layouts/MainLayout.tsx"
-import { AuthProvider } from "./providers/AuthProvider.tsx"
 import { Video } from "./pages/Video.tsx"
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <ThemeProvider>
-            <AuthProvider>
+        <QueryClientProvider client={queryClient}>
+            <ThemeProvider>
                 <BrowserRouter>
                     <Routes>
                         <Route element={<MainLayout />}>
@@ -27,7 +30,7 @@ createRoot(document.getElementById("root")!).render(
                         </Route>
                     </Routes>
                 </BrowserRouter>
-            </AuthProvider>
-        </ThemeProvider>
+            </ThemeProvider>
+        </QueryClientProvider>
     </StrictMode >
 )

front/src/pages/Login.tsx

@@ -15,33 +15,29 @@ import {
 import { Input } from "@/components/ui/input"
 import { useState, type FormEvent } from "react"
 import { useNavigate } from "react-router"
-import { useAuth } from "@/providers/AuthProvider"
+import { useLogin } from "@/hooks/useLogin"
 
 export function LoginForm({
     className,
     ...props
 }: React.ComponentProps<"div">) {
-    const { login } = useAuth();
+    const login = useLogin();
     const navigate = useNavigate();
 
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
 
-    const [loading, setLoading] = useState(false);
     const [_error, setError] = useState<string | null>(null);
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
-        setLoading(true);
         setError(null);
 
         try {
-            await login(username, password);
+            login.mutate({ username, password });
             navigate("/")
         } catch (err: any) {
             setError(err.message || "Login failed");
-        } finally {
-            setLoading(false);
         }
     }
 
@@ -91,9 +87,9 @@ export function LoginForm({
                             <Field>
                                 <Button
                                     type="submit"
-                                    disabled={loading}
+                                    disabled={login.isPending}
                                 >{
-                                        loading ? "Logging in..." : "Login"
+                                        login.isPending ? "Logging in..." : "Login"
                                     }</Button>
                                 { /*
                                 <Button variant="outline" type="button">

front/src/pages/Video.tsx

@@ -1,30 +1,27 @@
-import { apiFetch } from "@/api/auth";
 import { Button } from "@/components/ui/button";
-import { useEffect, useState } from "react";
+import { useCreateClip } from "@/hooks/video/useCreateClip";
+import { useRefreshFiles } from "@/hooks/video/useRefreshFiles";
 
 export function Video() {
 
-    const refresh = async () => {
-        await apiFetch(`/protected/refreshfiles`, {
-            method: "POST",
-        });
-    }
-
-    const create = async () => {
-        await apiFetch(`/protected/createclip`, {
-            method: "POST",
-        });
-    }
+    const createClip = useCreateClip()
+    const refreshImages = useRefreshFiles()
 
     return (
         <div className="flex flex-1 flex-col gap-4 py-16">
             <div>
                 <Button
-                    onClick={() => { refresh() }}
-                >Refresh</Button>
+                    disabled={refreshImages.isPending}
+                    onClick={() => { refreshImages.mutate() }}
+                >{
+                        refreshImages.isPending ? "Refreshing..." : "Refresh"
+                    }</Button>
                 <Button
-                    onClick={() => { create() }}
-                >Create Clip</Button>
+                    disabled={createClip.isPending}
+                    onClick={() => { createClip.mutate() }}
+                >{
+                        createClip.isPending ? "creating" : "Create Clip"
+                    }</Button>
             </div>
             <video controls width="600">
                 <source

front/src/providers/AuthProvider.tsx

@@ -1,86 +0,0 @@
-import {
-    createContext,
-    useContext,
-    useEffect,
-    useState
-} from "react";
-
-type User = {
-    username: string;
-    dn?: string;
-};
-
-type AuthContextType = {
-    user: User | null;
-    token: string | null;
-    isAuthenticated: boolean;
-    login: (username: string, password: string) => Promise<void>;
-    logout: () => void;
-};
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-    const [user, setUser] = useState<User | null>(null);
-    const [token, setToken] = useState<string | null>(null);
-
-    // restore session
-    useEffect(() => {
-        const savedUser = localStorage.getItem("user");
-
-        if (savedUser) {
-            setUser(JSON.parse(savedUser));
-        }
-    }, []);
-
-    async function login(username: string, password: string) {
-        const res = await fetch(`${import.meta.env.VITE_API_URL}/auth/login`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ username, password }),
-            credentials: "include",
-        });
-
-        if (!res.ok) {
-            throw new Error("Invalid credentials");
-        }
-
-        const data = await res.json();
-
-        setToken(data.token);
-        setUser(data.user);
-
-        localStorage.setItem("user", JSON.stringify(data.user));
-    }
-
-    function logout() {
-        setUser(null);
-        setToken(null);
-
-        localStorage.removeItem("user");
-    }
-
-    return (
-        <AuthContext.Provider
-            value={{
-                user,
-                token,
-                login,
-                logout,
-                isAuthenticated: !!token
-            }}
-        >
-            {children}
-        </AuthContext.Provider>
-    );
-}
-
-export function useAuth() {
-    const ctx = useContext(AuthContext);
-
-    if (!ctx) {
-        throw new Error("useAuth must be used inside AuthProvider");
-    }
-
-    return ctx;
-}