Implement active client on status

src/components/IndividualClientPage.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { ErrorResponse, NodeStatusResponse, System } from '@/types';
+import { ActiveClient, ErrorResponse, NodeStatusResponse, System } from '@/types';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Label } from '@/components/ui/label';
@@ -37,6 +37,9 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
   const [isLeaveDiscordDialogOpen, setIsLeaveDiscordDialogOpen] = useState<boolean>(false);
   const [leaveGuildId, setLeaveGuildId] = useState<string>('');
 
+  // Active Client States
+  const [activeClient, setActiveClient] = useState<ActiveClient | null>(null);
+
 
   const fetchClientStatus = async () => {
     if (!token) {
@@ -51,6 +54,7 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
       if (response.ok) {
         const data: NodeStatusResponse = await response.json();
         console.log(data)
+        setActiveClient(data.active_client);
         setCurrentClientDiscordStatus(data.status.discord_status);
         setCurrentClientOp25Status(data.status.op25_status)
       } else {
@@ -58,10 +62,10 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
         setCurrentClientOp25Status('Failed to fetch status');
       }
     } catch (err: any) {
-        if (err.message === 'Unauthorized: Session expired or invalid token.') {
-            setLoading(false); // already handled by authAwareFetch
-            return;
-        }
+      if (err.message === 'Unauthorized: Session expired or invalid token.') {
+        setLoading(false); // already handled by authAwareFetch
+        return;
+      }
       setCurrentClientDiscordStatus('Error fetching status');
       setCurrentClientOp25Status('Error fetching status');
     } finally {
@@ -92,14 +96,14 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
         setError(errorMsg);
       }
     } catch (err: any) {
-        if (err.message === 'Unauthorized: Session expired or invalid token.') {
-            setLoading(false); // already handled by authAwareFetch
-            return;
-        }
+      if (err.message === 'Unauthorized: Session expired or invalid token.') {
+        setLoading(false); // already handled by authAwareFetch
+        return;
+      }
       setError('Failed to fetch systems. Check server connection or console.');
       console.error(err);
     } finally {
-        setLoading(false);
+      setLoading(false);
     }
   };
 
@@ -109,8 +113,8 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
       fetchClientStatus();
       fetchSystems();
     } else {
-        setLoading(false);
-        setError('Please log in to manage this client.');
+      setLoading(false);
+      setError('Please log in to manage this client.');
     }
   }, [clientId, token, logoutUser]); // Added logoutUser to dependencies to avoid lint warnings
 
@@ -181,10 +185,10 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
         setError(`Failed to ${action} client "${clientId}": ${errorData.message || (typeof errorData.detail === 'string' ? errorData.detail : JSON.stringify(errorData.detail)) || response.statusText}`);
       }
     } catch (err: any) {
-        if (err.message === 'Unauthorized: Session expired or invalid token.') {
-            setLoading(false); // already handled by authAwareFetch
-            return;
-        }
+      if (err.message === 'Unauthorized: Session expired or invalid token.') {
+        setLoading(false); // already handled by authAwareFetch
+        return;
+      }
       setError(`Network error during ${action} client: ${err.message}`);
       console.error(err);
     } finally {
@@ -215,7 +219,7 @@ const IndividualClientPage: React.FC<IndividualClientPageProps> = ({ clientId, t
   return (
     <Card className="w-full max-w-md mx-auto mt-8">
       <CardHeader>
-        <CardTitle>Manage Client: {clientId}</CardTitle>
+        <CardTitle>Manage Client: {activeClient?.nickname} - {clientId}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         {error && <p className="text-red-500 text-sm">{error}</p>}

src/types/index.ts

@@ -49,14 +49,15 @@ export enum DemodTypes {
   }
 
   export interface NodeStatusResponse {
+    active_client: ActiveClient;
     status: {
       op25_status: string;
       discord_status: string;
-    }
+    };
   }
 
   export interface ActiveClient {
-    active_token: string;
+    active_token: DiscordId;
     nickname: string;
     client_id: string;
   }