refactor: migrate hooks to kubernetesjs react

Author: pyramation

ui/app/providers.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { KubernetesProvider } from '@/contexts/KubernetesContext'
+import { KubernetesProvider } from '@kubernetesjs/react/context'
+import { NamespaceProvider } from '@/contexts/NamespaceContext'
 
 interface ProvidersProps {
   children: React.ReactNode
@@ -9,7 +10,9 @@ interface ProvidersProps {
 export function Providers({ children }: ProvidersProps) {
   return (
     <KubernetesProvider>
-      {children}
+      <NamespaceProvider>
+        {children}
+      </NamespaceProvider>
     </KubernetesProvider>
   )
 }

ui/components/dashboard-layout.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { NamespaceSwitcher } from '@/components/namespace-switcher'
-import { useKubernetes } from '@/hooks'
+import { useKubernetes } from '@kubernetesjs/react/context'
 import {
   Package,
   Server,

ui/components/namespace-switcher.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useKubernetes, useNamespaces } from '@/hooks'
+import { useNamespaces } from '@/hooks'
+import { usePreferredNamespace } from '@/contexts/NamespaceContext'
 import {
   Select,
   SelectContent,
@@ -13,7 +14,7 @@ import { RefreshCw } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 
 export function NamespaceSwitcher() {
-  const { namespace, setNamespace } = useKubernetes()
+  const { namespace, setNamespace } = usePreferredNamespace()
   const { data, isLoading, error, refetch } = useNamespaces()
 
   const namespaces = data?.items?.map(item => item.metadata?.name).filter(Boolean) || []

ui/components/resources/pods.tsx

@@ -17,7 +17,8 @@ import {
   XCircle
 } from 'lucide-react'
 import { type Pod as K8sPod } from 'kubernetesjs'
-import { usePods, useDeletePod, usePodLogs, useKubernetes } from '@/hooks'
+import { usePods, useDeletePod, usePodLogs } from '@/hooks'
+import { usePreferredNamespace } from '@/contexts/NamespaceContext'
 
 interface Pod {
   name: string
@@ -34,7 +35,7 @@ export function PodsView() {
   const [selectedPod, setSelectedPod] = useState<Pod | null>(null)
 
   // Use TanStack Query hooks
-  const { namespace } = useKubernetes()
+  const { namespace } = usePreferredNamespace()
   const { data, isLoading, error, refetch } = usePods()
   const deletePodMutation = useDeletePod()
 

ui/components/templates/template-dialog.tsx

@@ -15,7 +15,8 @@ import { Label } from '@/components/ui/label'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Loader2, CheckCircle, XCircle } from 'lucide-react'
 import { type Deployment, type Service } from 'kubernetesjs'
-import { useKubernetes } from '@/hooks'
+import { useKubernetes } from '@kubernetesjs/react/context'
+import { usePreferredNamespace } from '@/contexts/NamespaceContext'
 
 interface Template {
   id: string
@@ -36,7 +37,8 @@ interface TemplateDialogProps {
 }
 
 export function TemplateDialog({ template, open, onOpenChange }: TemplateDialogProps) {
-  const { client: k8sClient, namespace: contextNamespace } = useKubernetes()
+  const { client: k8sClient } = useKubernetes()
+  const { namespace: contextNamespace } = usePreferredNamespace()
 
   // Deploy template function
   const deployTemplate = async (params: {

ui/contexts/KubernetesContext.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+interface NamespaceContextValue {
+  namespace: string
+  setNamespace: (ns: string) => void
+}
+
+const NamespaceContext = createContext<NamespaceContextValue | undefined>(undefined)
+
+interface NamespaceProviderProps {
+  children: React.ReactNode
+  initialNamespace?: string
+}
+
+export function NamespaceProvider({ children, initialNamespace = 'default' }: NamespaceProviderProps) {
+  const [namespace, setNamespace] = useState<string>(initialNamespace)
+
+  return (
+    <NamespaceContext.Provider value={{ namespace, setNamespace }}>
+      {children}
+    </NamespaceContext.Provider>
+  )
+}
+
+export function usePreferredNamespace(): NamespaceContextValue {
+  const ctx = useContext(NamespaceContext)
+  if (!ctx) throw new Error('usePreferredNamespace must be used within a NamespaceProvider')
+  return ctx
+}

ui/contexts/NamespaceContext.tsx

@@ -9,4 +9,4 @@ export * from './useDaemonSets'
 export * from './useReplicaSets'
 
 // Re-export context hook
-export { useKubernetes } from '../contexts/KubernetesContext'
+export { useKubernetes } from '@kubernetesjs/react/context'