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-dashboard.ts

@@ -1,173 +1,48 @@
-import { useCallback, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { dashboardApi } from "@/lib/api";
 import type {
-  DashboardChannel,
   DashboardChannelDetail,
   DashboardStats,
-  DashboardUser,
   DashboardUserDetail,
 } from "@/lib/types";
 
-// ── Stats ───────────────────────────────────────
-
-interface UseStatsReturn {
-  stats: DashboardStats | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
+export function useStats() {
+  return useQuery<DashboardStats>({
+    queryKey: ["dashboard-stats"],
+    queryFn: () => dashboardApi.getStats(),
+  });
 }
 
-export function useStats(): UseStatsReturn {
-  const [stats, setStats] = useState<DashboardStats | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetch = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await dashboardApi.getStats();
-      setStats(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load stats");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-
-  return { stats, loading, error, refetch: fetch };
+export function useUsers(search?: string) {
+  return useQuery({
+    queryKey: ["dashboard-users", search ?? ""],
+    queryFn: () => dashboardApi.listUsers(20, undefined, search),
+    select: (data) => data.data,
+  });
 }
 
-// ── Users ───────────────────────────────────────
-
-interface UseUsersReturn {
-  users: DashboardUser[];
-  loading: boolean;
-  search: string;
-  setSearch: (q: string) => void;
-  refetch: () => void;
+export function useChannels(guildId: string, search?: string) {
+  return useQuery({
+    queryKey: ["dashboard-channels", guildId, search ?? ""],
+    queryFn: () => dashboardApi.listChannels(20, search, guildId || undefined),
+    select: (data) => data.data,
+    enabled: !!guildId,
+  });
 }
 
-export function useUsers(): UseUsersReturn {
-  const [users, setUsers] = useState<DashboardUser[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
-
-  const fetch = useCallback(async (q?: string) => {
-    setLoading(true);
-    try {
-      const result = await dashboardApi.listUsers(20, undefined, q);
-      setUsers(result.data);
-    } catch (err) {
-      console.error("useUsers:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const fetchWithSearch = useCallback(() => {
-    fetch(search || undefined);
-  }, [fetch, search]);
-
-  return {
-    users,
-    loading,
-    search,
-    setSearch,
-    refetch: fetchWithSearch,
-  };
+export function useUserDetail(userId: string | null) {
+  return useQuery<DashboardUserDetail>({
+    queryKey: ["dashboard-user", userId],
+    queryFn: () => dashboardApi.getUserDetail(userId!),
+    enabled: !!userId,
+  });
 }
 
-// ── Channels ────────────────────────────────────
-
-interface UseChannelsReturn {
-  channels: DashboardChannel[];
-  loading: boolean;
-  search: string;
-  setSearch: (q: string) => void;
-  refetch: () => void;
-}
-
-export function useChannels(guildId: string): UseChannelsReturn {
-  const [channels, setChannels] = useState<DashboardChannel[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
-
-  const fetch = useCallback(
-    async (q?: string) => {
-      setLoading(true);
-      try {
-        const result = await dashboardApi.listChannels(
-          20,
-          q,
-          guildId || undefined,
-        );
-        setChannels(result.data);
-      } catch (err) {
-        console.error("useChannels:", err);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [guildId],
-  );
-
-  const fetchWithSearch = useCallback(() => {
-    fetch(search || undefined);
-  }, [fetch, search]);
-
-  return {
-    channels,
-    loading,
-    search,
-    setSearch,
-    refetch: fetchWithSearch,
-  };
-}
-
-// ── User Detail ─────────────────────────────────
-
-export function useUserDetail() {
-  const [user, setUser] = useState<DashboardUserDetail | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const fetch = useCallback(async (userId: string) => {
-    setLoading(true);
-    try {
-      const detail = await dashboardApi.getUserDetail(userId);
-      setUser(detail);
-    } catch (err) {
-      console.error("useUserDetail:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  return { user, loading, fetch };
-}
-
-// ── Channel Detail ──────────────────────────────
-
-export function useChannelDetail() {
-  const [channel, setChannel] = useState<DashboardChannelDetail | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const fetch = useCallback(async (channelId: string) => {
-    setLoading(true);
-    try {
-      const detail = await dashboardApi.getChannelDetail(channelId);
-      setChannel(detail);
-    } catch (err) {
-      console.error("useChannelDetail:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  return { channel, loading, fetch };
+export function useChannelDetail(channelId: string | null) {
+  return useQuery<DashboardChannelDetail>({
+    queryKey: ["dashboard-channel", channelId],
+    queryFn: () => dashboardApi.getChannelDetail(channelId!),
+    enabled: !!channelId,
+  });
 }