refactor(frontend): create centralised auth manager (#24)

- Resolves #17

Reviewed-on: #24

frontend/src/components/Sidebar.tsx

@@ -1,16 +1,17 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
 import { Plus, Film, Home, User as UserIcon, Video, Radio } from 'lucide-react';
-import type {User} from "../utils/types.ts";
+import { useAuth } from "../auth/useAuth.ts";
 
 type props = {
-    user: User | null;
     className?: string
 }
 
 const Divider = () => <hr className="w-full my-1.5 mx-2 border-hover" />;
 
-const Sidebar = ({user, className}: props) => {
+const Sidebar = ({className}: props) => {
+    const { user } = useAuth();
+
     return (
         <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
             <h2 className={"font-heading text-2xl mt-1"}>The VoD System</h2>

frontend/src/components/Topbar.tsx

@@ -1,21 +1,18 @@
 import { Menu, X } from 'lucide-react';
-import { login, logout } from "../utils/api/users.ts";
 import { Dropdown, DropdownItem } from "./Dropdown.tsx";
 import { GoogleLogin } from '@react-oauth/google';
 
-import type { User } from "../utils/types.ts";
 import type { CredentialResponse } from '@react-oauth/google';
 
 import MenuButton from "./buttons/MenuButton.tsx";
 import clsx from "clsx";
 import {useNavigate} from "react-router-dom";
+import { useAuth } from "../auth/useAuth.ts";
 
 
 type props = {
     sidebarToggled: boolean;
     setSidebarToggled: (toggled: boolean) => void;
-    user: User | null;
-    fetchUser: () => void;
     isStreaming: boolean;
     className?: string;
 }
@@ -23,12 +20,11 @@ type props = {
 const Topbar = ({
                     sidebarToggled,
                     setSidebarToggled,
-                    user,
-                    fetchUser,
                     isStreaming,
                     className}: props) => {
 
     const navigate = useNavigate();
+    const { user, login, logout } = useAuth();
 
     const handleLogin = (response: CredentialResponse) => {
         if (!response.credential) {
@@ -37,10 +33,6 @@ const Topbar = ({
         }
 
         login(response.credential)
-            .then(() => {
-                fetchUser();
-                navigate(0);
-            })
             .catch((error) => {
                 console.error("Login failed:", error);
             });
@@ -48,10 +40,7 @@ const Topbar = ({
 
     const handleLogout = () => {
         logout()
-            .then(() => {
-                fetchUser();
-                navigate("/");
-            })
+            .then(() => navigate("/"))
             .catch((error) => {
                 console.error("Logout failed:", error);
             });