refactor: restructure clients module for better maintainability

Signed-off-by: hexiaodai <[email protected]>

src/app.tsx

@@ -1,13 +1,13 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { App, ConfigProvider, Select } from 'antd'
 import { PageContainer, ProLayout } from '@ant-design/pro-components'
 import { NavLink, useLocation } from 'react-router-dom'
 import { LayoutSettings } from '@/layout-config'
 import { NamespaceProvider, useNamespace } from '@/common/context'
-import { ResourceType } from '@/clients/ts/types/types'
-import { useListResources } from './hooks/use-resource'
+import { Namespace, watchNamespaces } from './clients/namespace'
 import AppRouter from '@/router'
 import styles from '@/styles/app.module.less'
+import useUnmount from './hooks/use-unmount'
 
 export default () => {
   const location = useLocation()
@@ -16,7 +16,19 @@ export default () => {
 
   const [collapsed, setCollapsed] = useState(false)
 
-  const { resources: namespaces } = useListResources(ResourceType.NAMESPACE)
+  const [namespaces, setNamespaces] = useState<Namespace[]>()
+
+  const abortCtrl = useRef<AbortController>()
+
+  useEffect(() => {
+    abortCtrl.current?.abort()
+    abortCtrl.current = new AbortController()
+    watchNamespaces(setNamespaces, abortCtrl.current.signal, undefined, undefined, undefined)
+  }, [])
+
+  useUnmount(() => {
+    abortCtrl.current?.abort()
+  })
 
   return (
     <ConfigProvider
@@ -49,7 +61,7 @@ export default () => {
                 onChange={(value) => setNamespace(value)}
                 options={[
                   { value: '', label: '全部工作空间' },
-                  ...namespaces.map((ns: any) => ({
+                  ...(namespaces ?? []).map((ns: any) => ({
                     value: ns.metadata.name,
                     label: ns.metadata.name
                   }))