From 323fa207af2dde379fdf1ff84e7a3ab35d904480 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Sun, 26 Jul 2026 16:46:53 +0700
Subject: [PATCH] refactor: streamline data fetching in various hooks and
 components

---
 services/frontend/src/app/(dashboard)/dashboard/page.tsx  | 2 --
 services/frontend/src/app/(dashboard)/media/page.tsx      | 4 ----
 services/frontend/src/app/(dashboard)/recordings/page.tsx | 6 +-----
 services/frontend/src/hooks/use-dashboard.ts              | 6 +++++-
 services/frontend/src/hooks/use-media.ts                  | 6 +++++-
 services/frontend/src/hooks/use-messages.ts               | 5 +++++
 services/frontend/src/hooks/use-recordings.ts             | 6 +++++-
 services/frontend/src/hooks/use-voice.ts                  | 6 +++++-
 8 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/services/frontend/src/app/(dashboard)/dashboard/page.tsx b/services/frontend/src/app/(dashboard)/dashboard/page.tsx
index e8ea065..85ae875 100644
--- a/services/frontend/src/app/(dashboard)/dashboard/page.tsx
+++ b/services/frontend/src/app/(dashboard)/dashboard/page.tsx
@@ -121,8 +121,6 @@ export default function DashboardPage() {
 function StatsSection() {
   const { stats, loading, error, refetch } = useStats();
 
-  if (error) return <ErrorState message={error} onRetry={refetch} />;
-
   if (loading || !stats) {
     return (
       <div className="space-y-5 animate-fade-in-up">
diff --git a/services/frontend/src/app/(dashboard)/media/page.tsx b/services/frontend/src/app/(dashboard)/media/page.tsx
index d01d181..9897663 100644
--- a/services/frontend/src/app/(dashboard)/media/page.tsx
+++ b/services/frontend/src/app/(dashboard)/media/page.tsx
@@ -16,10 +16,6 @@ export default function MediaPage() {
   const { mediaState, refresh, queue, skip, stop, setVolume } = useMediaState();
   const [queueUrl, setQueueUrl] = useState("");
 
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
   // WS subscription for real-time media state
   useEffect(() => {
     const unsub = ws.on("media_state", () => refresh());
diff --git a/services/frontend/src/app/(dashboard)/recordings/page.tsx b/services/frontend/src/app/(dashboard)/recordings/page.tsx
index a5124d5..6db9cc2 100644
--- a/services/frontend/src/app/(dashboard)/recordings/page.tsx
+++ b/services/frontend/src/app/(dashboard)/recordings/page.tsx
@@ -13,11 +13,7 @@ import { useWebSocket } from "@/lib/ws/context";
 
 export default function RecordingsPage() {
   const ws = useWebSocket();
-  const { recordings, loading, refresh, remove, prepend } = useRecordings();
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
+  const { recordings, loading, remove, prepend } = useRecordings();
 
   // WS subscription for real-time updates
   useEffect(() => {
diff --git a/services/frontend/src/hooks/use-dashboard.ts b/services/frontend/src/hooks/use-dashboard.ts
index a2b9446..5106687 100644
--- a/services/frontend/src/hooks/use-dashboard.ts
+++ b/services/frontend/src/hooks/use-dashboard.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { dashboardApi } from "@/lib/api";
 import type {
@@ -36,6 +36,10 @@ export function useStats(): UseStatsReturn {
     }
   }, []);
 
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
   return { stats, loading, error, refetch: fetch };
 }
 
diff --git a/services/frontend/src/hooks/use-media.ts b/services/frontend/src/hooks/use-media.ts
index 05c0cae..8e40668 100644
--- a/services/frontend/src/hooks/use-media.ts
+++ b/services/frontend/src/hooks/use-media.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { voiceApi } from "@/lib/api";
 import type { MediaState } from "@/lib/types";
@@ -69,6 +69,10 @@ export function useMediaState(): UseMediaStateReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return { mediaState, refresh, queue, skip, stop, setVolume };
 }
 
diff --git a/services/frontend/src/hooks/use-messages.ts b/services/frontend/src/hooks/use-messages.ts
index 7fd3d67..9124cd7 100644
--- a/services/frontend/src/hooks/use-messages.ts
+++ b/services/frontend/src/hooks/use-messages.ts
@@ -77,6 +77,11 @@ export function useMessages(
     }
   }, [cursor, loadingMore, guildId, channelId]);
 
+  // Auto-fetch when guildId/channelId changes
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
   const prepend = useCallback((msg: MessageRecord) => {
     setMessages((prev) => [msg, ...prev]);
   }, []);
diff --git a/services/frontend/src/hooks/use-recordings.ts b/services/frontend/src/hooks/use-recordings.ts
index a5d59f3..8c1dd47 100644
--- a/services/frontend/src/hooks/use-recordings.ts
+++ b/services/frontend/src/hooks/use-recordings.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { recordingsApi } from "@/lib/api";
 import type { VoiceRecording } from "@/lib/types";
@@ -35,6 +35,10 @@ export function useRecordings(): UseRecordingsReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   const remove = useCallback(async (id: string) => {
     try {
       await recordingsApi.delete(id);
diff --git a/services/frontend/src/hooks/use-voice.ts b/services/frontend/src/hooks/use-voice.ts
index a756d36..d43db02 100644
--- a/services/frontend/src/hooks/use-voice.ts
+++ b/services/frontend/src/hooks/use-voice.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { voiceApi } from "@/lib/api";
 import type { ActiveSpeaker, VoiceStatus } from "@/lib/types";
@@ -28,6 +28,10 @@ export function useVoiceStatus(): UseVoiceStatusReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return { voiceStatus, refresh };
 }