Implemented useAsync in the app structure for cleaner code

src/app/overview/page.tsx

@@ -29,36 +29,29 @@ import { getDocker } from "@/lib/dockship/docker";
 import { getApplications } from "@/lib/dockship/application";
 import { cn } from "@/lib/utils";
 import { getDeployments } from "@/lib/dockship/deploy";
+import { useAsync, useAsyncInterval } from "@/hooks/use-async";
 
 export default function OverviewPage() {
-  const [nodes, setNodes] = useState<(NodeLiveData & Node)[]>([]);
-  const [dockerNodes, setDockerNodes] = useState<Docker[]>([]);
-  const [apps, setApplications] = useState<Application[]>([]);
-  const [deployments, setDeployments] = useState<Deployment[]>([]);
-
-  useEffect(() => {
-    const fetchNodes = async () => {
-      const nodes = await getLiveNodes();
-      setNodes(nodes);
-      setDockerNodes(await getDocker(nodes));
-      setApplications(await getApplications());
-      setDeployments((await getDeployments()).filter((d) => d !== null));
-    };
-    fetchNodes();
-    const interval = setInterval(fetchNodes, 3000);
-
-    return () => clearInterval(interval);
-  }, []);
+  const { value: nodes } = useAsyncInterval([], getLiveNodes, 3000);
+  const { value: dockerNodes } = useAsync([], async () => getDocker(nodes), [
+    nodes,
+  ]);
+  const { value: applications } = useAsyncInterval([], getApplications, 3000);
+  const { value: deployments } = useAsyncInterval(
+    [],
+    async () => (await getDeployments()).filter((d) => d !== null),
+    3000
+  );
 
   const appNameByContainer = useMemo(() => {
     const map = new Map<string, string>();
-    for (const app of apps) {
+    for (const app of applications) {
       for (const container of app.deployments) {
         map.set(container, app.name);
       }
     }
     return map;
-  }, [apps]);
+  }, [applications]);
 
   return (
     <DashboardLayout title="Overview" subtitle="System status and metrics">
@@ -66,9 +59,9 @@ export default function OverviewPage() {
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <StatCard
           title="Applications"
-          value={apps.length}
+          value={applications.length}
           subtitle={`${
-            apps.filter((app) => app.deployments.length > 0).length
+            applications.filter((app) => app.deployments.length > 0).length
           } Deployed`}
           icon={<Box className="w-4 h-4" />}
         />
@@ -118,12 +111,12 @@ export default function OverviewPage() {
               </div>
 
               {/* Rows */}
-              {apps.slice(-5).length === 0 ? (
+              {applications.slice(-5).length === 0 ? (
                 <div className="py-6 text-sm text-muted-foreground text-center">
                   No applications yet
                 </div>
               ) : (
-                apps.slice(-5).map((app) => (
+                applications.slice(-5).map((app) => (
                   <div
                     key={app.id}
                     className="