More styling for linter, more better code

usentrycoach.client/src/ChatClient/ChatControl.tsx

@@ -1,10 +1,14 @@
 import {useState, useRef, useEffect} from 'react';
+import useLoginToken from "../Hooks/useLoginToken.tsx";
+import { z } from 'zod';
 
-function SessionActive({stopSession} : {stopSession: () => void}) {
+function SessionActive({stopSession} : {stopSession: () => void})
+{
     return <button onClick={stopSession}>Stop session</button>
 }
 
-function SessionStopped({startSession} : {startSession: () => void}) {
+function SessionStopped({startSession} : {startSession: () => void})
+{
     return <button onClick={startSession}>Start session</button>
 }
 
@@ -15,26 +19,37 @@ function SessionControl( { isSessionActive, startSession, stopSession }: { isSes
         : <SessionStopped startSession={startSession}/>);
 }
 
-interface OpenAiToken {
-    ephemeralToken: string;
-    expiresAt: number;
-}
+const EphemeralTokenResponse = z.object({
+    ephemeralToken: z.string(),
+    expiresAt: z.number(),
+});
+
+export function ChatControl() 
+{
+    const { token } = useLoginToken();
 
-export function ChatControl() {
     const [isSessionActive, setSessionActive] = useState<boolean>(false);
     const [dataChannel, setDataChannel] = useState<RTCDataChannel | null>(null);
     const audioElement = useRef<HTMLAudioElement>(null);
     const peerConnection = useRef<RTCPeerConnection>(null);
 
-    async function StartSession() {
+    async function StartSession() 
+    {
         // Get a session token for OpenAI Realtime API
-        const response = await fetch('ephemeral_token');
-        if (!response.ok) {
+        const response = await fetch('ephemeral_token', {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${token}asdasd`
+            },
+        });
+        if (!response.ok) 
+        {
             throw new Error(response.statusText);
         }
 
-        const data: OpenAiToken = await response.json();
-        const ephemeralToken = data.ephemeralToken;
+        const responseJson:unknown = await response.json();
+        const parsedToken = EphemeralTokenResponse.parse(responseJson);
+        const ephemeralToken = parsedToken.ephemeralToken;
 
         // Create a peer connection
         const pc = new RTCPeerConnection();
@@ -42,7 +57,8 @@ export function ChatControl() {
         // Set up to play remote audio from the model
         audioElement.current = document.createElement("audio");
         audioElement.current.autoplay = true;
-        pc.ontrack = (e) => {
+        pc.ontrack = (e) => 
+        {
             if (audioElement.current !== null)
             {
                 audioElement.current.srcObject = e.streams[0];
@@ -82,8 +98,10 @@ export function ChatControl() {
         peerConnection.current = pc;
     }
 
-    function stopSession() {
-        if (dataChannel) {
+    function stopSession() 
+    {
+        if (dataChannel) 
+        {
             dataChannel.close();
             setDataChannel(null);
         }
@@ -97,13 +115,16 @@ export function ChatControl() {
         setSessionActive(false);
     }
 
-    useEffect(() => {
-        if (dataChannel) {
-            dataChannel.addEventListener("open", () => {
+    useEffect(() => 
+    {
+        if (dataChannel) 
+        {
+            dataChannel.addEventListener("open", () => 
+            {
                 setSessionActive(true);
             });
         }
     }, [dataChannel])
 
-    return <SessionControl isSessionActive={isSessionActive} startSession={StartSession} stopSession={stopSession}/>;
+    return <SessionControl isSessionActive={isSessionActive} startSession={() => void StartSession()} stopSession={stopSession}/>;
 }