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

- Resolves #17

Reviewed-on: #24

frontend/src/pages/Profile.tsx

@@ -1,19 +1,14 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Eye, EyeOff, Copy, Check } from "lucide-react";
 import Box from "../components/Box.tsx";
-import { getUser } from "../utils/api/users.ts";
-import type { User } from "../utils/types.ts";
+import { useAuth } from "../auth/useAuth.ts";
 import { formatLocalDate } from "../utils/utils.ts";
 
 const Profile = () => {
-    const [user, setUser] = useState<User | null>(null);
+    const { user } = useAuth();
     const [keyVisible, setKeyVisible] = useState(false);
     const [copied, setCopied] = useState(false);
 
-    useEffect(() => {
-        getUser().then(setUser).catch(console.error);
-    }, []);
-
     const handleCopy = () => {
         if (!user?.streamKey) return;
         navigator.clipboard.writeText(user.streamKey);

frontend/src/pages/StreamControl.tsx

@@ -3,12 +3,12 @@ import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lu
 import clsx from "clsx";
 import Box from "../components/Box.tsx";
 import PrimaryButton from "../components/buttons/PrimaryButton.tsx";
-import { getUser } from "../utils/api/users.ts";
+import { useAuth } from "../auth/useAuth.ts";
 import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts";
 import { getMarkers, createMarker, deleteMarker } from "../utils/api/markers.ts";
 import { saveSectionByMarkers, clipSection } from "../utils/api/media.ts";
 import { getJob } from "../utils/api/jobs.ts";
-import type { User, StreamStatus, StreamHistoryItem, Marker, JobResponse } from "../utils/types.ts";
+import type { StreamStatus, StreamHistoryItem, Marker, JobResponse } from "../utils/types.ts";
 import { formatTime, formatLocalDate, stringToDate } from "../utils/utils.ts";
 
 const inputClass = "border border-hairline bg-fields rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-muted transition-colors";
@@ -60,7 +60,7 @@ const JobStatus = ({ job }: { job: TrackedJob }) => {
 };
 
 const StreamControl = () => {
-    const [user, setUser] = useState<User | null>(null);
+    const { user } = useAuth();
     const [streamStatus, setStreamStatus] = useState<StreamStatus | null>(null);
     const [streamDetails, setStreamDetails] = useState<StreamHistoryItem | null>(null);
     const [now, setNow] = useState(Date.now());
@@ -85,10 +85,6 @@ const StreamControl = () => {
 
     const isStreaming = streamStatus?.isStreaming ?? false;
 
-    useEffect(() => {
-        getUser().then(setUser).catch(() => setUser(null));
-    }, []);
-
     useEffect(() => {
         if (!user) return;
         const poll = () => getCurrentStream().then(setStreamStatus).catch(() => {});