Refactor voice page and hooks to use React Query for data fetching

- Updated VoicePage component to utilize useVoiceConnect, useVoiceDisconnect, and useMicTransmit mutations.
- Replaced local state management with React Query's useQuery for voice status, guilds, and channels.
- Removed custom useAsync hook and replaced it with useQuery in useConfig, useStats, useUsers, useChannels, and useMessages hooks.
- Simplified useRecordings and useSpeakers hooks to leverage React Query for data fetching and mutations.
- Removed deprecated use-async hook and related code.
- Enhanced error handling and loading states across various hooks.

services/frontend/src/hooks/use-voice.ts

@@ -1,3 +1,4 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useState } from "react";
 
 import { voiceApi } from "@/lib/api";
@@ -11,37 +12,15 @@ type WsHook = {
   ) => () => void;
 };
 
-interface UseVoiceStatusReturn {
-  voiceStatus: VoiceStatus | null;
-  refresh: () => void;
+export function useVoiceStatus() {
+  return useQuery<VoiceStatus>({
+    queryKey: ["voice-status"],
+    queryFn: () => voiceApi.getStatus(),
+    retry: false,
+  });
 }
 
-export function useVoiceStatus(): UseVoiceStatusReturn {
-  const [voiceStatus, setVoiceStatus] = useState<VoiceStatus | null>(null);
-
-  const refresh = useCallback(async () => {
-    try {
-      const status = await voiceApi.getStatus();
-      setVoiceStatus(status);
-    } catch (err) {
-      console.error("useVoiceStatus:", err);
-    }
-  }, []);
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  return { voiceStatus, refresh };
-}
-
-interface UseVoiceChannelsReturn {
-  channels: Array<{ id: string; name: string }>;
-  loading: boolean;
-  fetch: (guildId: string) => void;
-}
-
-export function useVoiceChannels(): UseVoiceChannelsReturn {
+export function useVoiceChannels() {
   const [channels, setChannels] = useState<Array<{ id: string; name: string }>>(
     [],
   );
@@ -63,12 +42,7 @@ export function useVoiceChannels(): UseVoiceChannelsReturn {
   return { channels, loading, fetch };
 }
 
-interface UseSpeakersReturn {
-  speakers: ActiveSpeaker[];
-  subscribe: (ws: WsHook) => () => void;
-}
-
-export function useSpeakers(): UseSpeakersReturn {
+export function useSpeakers() {
   const [speakers, setSpeakers] = useState<ActiveSpeaker[]>([]);
 
   const subscribe = useCallback((ws: WsHook) => {
@@ -92,3 +66,34 @@ export function useSpeakers(): UseSpeakersReturn {
 
   return { speakers, subscribe };
 }
+
+export function useVoiceConnect() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      guildId,
+      channelId,
+    }: {
+      guildId: string;
+      channelId: string;
+    }) => voiceApi.connect(guildId, channelId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["voice-status"] }),
+  });
+}
+
+export function useVoiceDisconnect() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: () => voiceApi.disconnect(),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["voice-status"] }),
+  });
+}
+
+export function useMicTransmit() {
+  return useMutation({
+    mutationFn: (active: boolean) =>
+      voiceApi.sendCommand(
+        active ? "voice:transmit:start" : "voice:transmit:stop",
+      ),
+  });
+}