From 5e8482a87444cb0858f814c3acd2e20606336463 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Sun, 10 Mar 2024 17:53:56 +0530
Subject: [PATCH] :art: Improved

---
 lib/client/helpers/socket/useWatch.tsx          | 17 +++++++++++------
 lib/client/hooks/use-log.ts                     |  2 +-
 .../$environment+/new-app/app-compute.tsx       | 17 ++++++++++++++---
 .../infra+/$cluster+/nodepools/route.tsx        |  5 +++--
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/lib/client/helpers/socket/useWatch.tsx b/lib/client/helpers/socket/useWatch.tsx
index 0b80d9176..067c896dd 100644
--- a/lib/client/helpers/socket/useWatch.tsx
+++ b/lib/client/helpers/socket/useWatch.tsx
@@ -1,6 +1,7 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { ISocketResp, useSubscribe } from './context';
 import { useReload } from '../reloader';
+import useDebounce from '../../hooks/use-debounce';
 
 export const useSocketWatch = (
   onUpdate: (v: ISocketResp<any>[]) => void,
@@ -27,11 +28,15 @@ export const useSocketWatch = (
     []
   );
 
-  useEffect(() => {
-    if (subscribed) {
-      onUpdate(responses);
-    }
-  }, [responses]);
+  useDebounce(
+    () => {
+      if (subscribed) {
+        onUpdate(responses);
+      }
+    },
+    1000,
+    [responses]
+  );
 };
 
 export const useWatchReload = (topic: string | string[]) => {
diff --git a/lib/client/hooks/use-log.ts b/lib/client/hooks/use-log.ts
index 1ef19196c..35a5718b6 100644
--- a/lib/client/hooks/use-log.ts
+++ b/lib/client/hooks/use-log.ts
@@ -2,6 +2,6 @@ import { useEffect } from 'react';
 
 export const useLog = (data: any) => {
   useEffect(() => {
-    console.trace(data);
+    console.log(data);
   }, [data]);
 };
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 882630027..fe88d98d0 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -14,8 +14,9 @@ import { useMapper } from '~/components/utils';
 import { registryHost } from '~/lib/configs/base-url.cjs';
 import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
-import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout';
+import { useLog } from '~/root/lib/client/hooks/use-log';
 import { plans } from './datas';
+import { IProjectContext } from '../../_layout';
 
 const valueRender = ({
   label,
@@ -49,7 +50,7 @@ const AppCompute = () => {
     getImageTag,
   } = useAppState();
   const api = useConsoleApi();
-  const { cluster } = useOutletContext<IAppContext>();
+  const { cluster } = useOutletContext<IProjectContext>();
 
   const {
     data,
@@ -64,9 +65,19 @@ const AppCompute = () => {
     isLoading: nodepoolLoading,
     error: nodepoolLoadingError,
   } = useCustomSwr('/nodepools', async () => {
-    return api.listNodePools({ clusterName: parseName(cluster) });
+    return api.listNodePools({
+      clusterName: parseName(cluster),
+      pagination: {
+        first: 100,
+        orderBy: 'updateTime',
+        sortDirection: 'DESC',
+      },
+    });
   });
 
+  useLog(nodepoolData);
+  useLog(nodepoolLoadingError);
+
   const { values, errors, handleChange, isLoading, submit } = useForm({
     initialValues: {
       imageUrl: app.spec.containers[activeContIndex]?.image || '',
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx
index 4397ca6f5..b91286b8f 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/route.tsx
@@ -12,10 +12,10 @@ import {
 } from '~/console/server/utils/auth-utils';
 import { IRemixCtx } from '~/root/lib/types/common';
 import { getPagination, getSearch } from '~/console/server/utils/common';
+import fake from '~/root/fake-data-generator/fake';
 import HandleNodePool from './handle-nodepool';
 import Tools from './tools';
 import NodepoolResources from './nodepool-resources';
-import fake from "~/root/fake-data-generator/fake";
 
 export const loader = async (ctx: IRemixCtx) => {
   ensureAccountSet(ctx);
@@ -49,7 +49,8 @@ const Nodepools = () => {
       <LoadingComp
         data={promise}
         skeletonData={{
-          nodePoolData: fake.ConsoleListNodePoolsQuery.infra_listNodePools as any,
+          nodePoolData: fake.ConsoleListNodePoolsQuery
+            .infra_listNodePools as any,
         }}
       >
         {({ nodePoolData }) => {