From 63f77d8d9ac0c71f1cc714f3fd28e7434e5cca81 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Tue, 22 Jul 2025 21:58:42 +0200
Subject: [PATCH] Replace instances hook with context

---
 ui/src/App.tsx                                |  2 +-
 ui/src/components/InstanceList.tsx            |  2 +-
 .../InstancesContext.tsx}                     | 36 +++++++++++++++----
 ui/src/main.tsx                               |  5 ++-
 4 files changed, 35 insertions(+), 10 deletions(-)
 rename ui/src/{hooks/useInstances.ts => contexts/InstancesContext.tsx} (79%)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 28f52de..8017847 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -3,7 +3,7 @@ import Header from '@/components/Header'
 import InstanceList from '@/components/InstanceList'
 import InstanceModal from '@/components/InstanceModal'
 import { CreateInstanceOptions, Instance } from '@/types/instance'
-import { useInstances } from '@/hooks/useInstances'
+import { useInstances } from '@/contexts/InstancesContext'
 
 function App() {
   const [isModalOpen, setIsModalOpen] = useState(false)
diff --git a/ui/src/components/InstanceList.tsx b/ui/src/components/InstanceList.tsx
index 0aff605..1a5e0e5 100644
--- a/ui/src/components/InstanceList.tsx
+++ b/ui/src/components/InstanceList.tsx
@@ -1,4 +1,4 @@
-import { useInstances } from '@/hooks/useInstances'
+import { useInstances } from '@/contexts/InstancesContext'
 import InstanceCard from '@/components/InstanceCard'
 import { Instance } from '@/types/instance'
 
diff --git a/ui/src/hooks/useInstances.ts b/ui/src/contexts/InstancesContext.tsx
similarity index 79%
rename from ui/src/hooks/useInstances.ts
rename to ui/src/contexts/InstancesContext.tsx
index 751ef34..6a13139 100644
--- a/ui/src/hooks/useInstances.ts
+++ b/ui/src/contexts/InstancesContext.tsx
@@ -1,14 +1,14 @@
-import { useState, useEffect, useCallback } from 'react'
+import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react'
 import { CreateInstanceOptions, Instance } from '@/types/instance'
 import { instancesApi } from '@/lib/api'
 
-interface UseInstancesState {
+interface InstancesContextState {
   instances: Instance[]
   loading: boolean
   error: string | null
 }
 
-interface UseInstancesActions {
+interface InstancesContextActions {
   fetchInstances: () => Promise<void>
   createInstance: (name: string, options: CreateInstanceOptions) => Promise<void>
   updateInstance: (name: string, options: CreateInstanceOptions) => Promise<void>
@@ -19,7 +19,15 @@ interface UseInstancesActions {
   clearError: () => void
 }
 
-export const useInstances = (): UseInstancesState & UseInstancesActions => {
+type InstancesContextType = InstancesContextState & InstancesContextActions
+
+const InstancesContext = createContext<InstancesContextType | undefined>(undefined)
+
+interface InstancesProviderProps {
+  children: ReactNode
+}
+
+export const InstancesProvider = ({ children }: InstancesProviderProps) => {
   const [instances, setInstances] = useState<Instance[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -44,7 +52,7 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
   const createInstance = useCallback(async (name: string, options: CreateInstanceOptions) => {
     try {
       setError(null)
-      await instancesApi.create( name, options )
+      await instancesApi.create(name, options)
       // Refresh the list to include the new instance
       await fetchInstances()
     } catch (err) {
@@ -112,7 +120,7 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
     fetchInstances()
   }, [fetchInstances])
 
-  return {
+  const value: InstancesContextType = {
     // State
     instances,
     loading,
@@ -127,4 +135,18 @@ export const useInstances = (): UseInstancesState & UseInstancesActions => {
     deleteInstance,
     clearError,
   }
-}
\ No newline at end of file
+
+  return (
+    <InstancesContext.Provider value={value}>
+      {children}
+    </InstancesContext.Provider>
+  )
+}
+
+export const useInstances = (): InstancesContextType => {
+  const context = useContext(InstancesContext)
+  if (context === undefined) {
+    throw new Error('useInstances must be used within an InstancesProvider')
+  }
+  return context
+}
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index 2fbbbc1..ec2cd1d 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { InstancesProvider } from './contexts/InstancesContext'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <InstancesProvider>
+      <App />
+    </InstancesProvider>
   </React.StrictMode>,
 )
\ No newline at end of file