Decouple query states out of context provider

- Catalog/Registry
- Config
- MCP Clients
- Image loading

Author: colinmcneil

src/extension/ui/src/App.tsx

@@ -5,12 +5,12 @@ import { CatalogItemWithName } from './types/catalog';
 import { Close } from '@mui/icons-material';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
-import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
-import { ConfigProvider } from './context/ConfigContext';
-import { MCPClientProvider, useMCPClientContext } from './context/MCPClientContext';
-import { RequiredImagesProvider, useRequiredImagesContext } from './context/RequiredImageContext';
 import ConfigurationModal from './components/tile/Modal';
 import LoadingState from './components/LoadingState';
+import { useCatalogAll } from './hooks/useCatalog';
+import { useRequiredImages } from './hooks/useRequiredImages';
+import { useMCPClient } from './hooks/useMCPClient';
+import { useConfig } from './hooks/useConfig';
 
 export const client = createDockerDesktopClient();
 
@@ -22,44 +22,40 @@ const DEFAULT_SETTINGS = {
 export function App() {
   const [settings, setSettings] = useState<{ showModal: boolean, pollIntervalSeconds: number }>(localStorage.getItem('settings') ? JSON.parse(localStorage.getItem('settings') || '{}') : DEFAULT_SETTINGS);
   const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
-  // Wrap the entire application with our providers
-  return (
-    <ConfigProvider client={client}>
-      <RequiredImagesProvider client={client}>
-        <CatalogProvider client={client}>
-          <MCPClientProvider client={client}>
-            <AppContent
-              settings={settings}
-              setSettings={setSettings}
-              configuringItem={configuringItem}
-              setConfiguringItem={setConfiguringItem}
-            />
-          </MCPClientProvider>
-        </CatalogProvider>
-      </RequiredImagesProvider>
-    </ConfigProvider>
-  );
-}
 
-interface AppContentProps {
-  settings: { showModal: boolean, pollIntervalSeconds: number };
-  setSettings: React.Dispatch<React.SetStateAction<{ showModal: boolean, pollIntervalSeconds: number }>>;
-  configuringItem: CatalogItemWithName | null;
-  setConfiguringItem: React.Dispatch<React.SetStateAction<CatalogItemWithName | null>>;
-}
+  // Use hooks directly in the component
+  const catalogAll = useCatalogAll(client);
+  const requiredImages = useRequiredImages(client);
+  const mcpClient = useMCPClient(client);
+  const config = useConfig(client);
+
+  // Create a context-like combined props object to pass to children
+  const appProps = {
+    // Catalog related props
+    ...catalogAll,
+
+    // Required images props
+    ...requiredImages,
+
+    // MCP Client props
+    ...mcpClient,
 
-function AppContent({ settings, setSettings, setConfiguringItem }: AppContentProps) {
-  const { secretsLoading, catalogLoading, registryLoading } = useCatalogContext();
-  const { isLoading: imagesLoading } = useRequiredImagesContext();
+    // Config props
+    ...config
+  };
 
-  const isLoading = secretsLoading || catalogLoading || registryLoading || imagesLoading;
+  const isLoading = catalogAll.secretsLoading ||
+    catalogAll.catalogLoading ||
+    catalogAll.registryLoading ||
+    requiredImages.isLoading;
 
   return (
     <>
       {isLoading ? (
-        <LoadingState />
+        <LoadingState appProps={appProps} />
       ) : (
         <CatalogGrid
+          appProps={appProps}
           setConfiguringItem={setConfiguringItem}
           showSettings={() => setSettings({ ...settings, showModal: true })}
         />

src/extension/ui/src/components/CatalogGrid.tsx

@@ -1,14 +1,12 @@
 import React, { Suspense, useEffect, useState } from 'react';
 import { IconButton, Alert, AlertTitle, Stack, Button, Typography, FormGroup, FormControlLabel, Dialog, DialogTitle, DialogContent, Checkbox, Badge, TextField, Tabs, Tab, CircularProgress, Box, Menu, Divider, Switch, MenuItem } from '@mui/material';
 import { SwapVert, FolderOpenRounded } from '@mui/icons-material';
-import { useCatalogContext } from '../context/CatalogContext';
-import { useMCPClientContext } from '../context/MCPClientContext';
-import { useConfigContext } from '../context/ConfigContext';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
 import YourClients from './tabs/YourClients';
 import { CatalogItemWithName } from '../types/catalog';
 import { CATALOG_LAYOUT_SX } from '../Constants';
+import { MCPClientState } from '../MCPClients';
 
 const ToolCatalog = React.lazy(() => import('./tabs/ToolCatalog'));
 const YourEnvironment = React.lazy(() => import('./tabs/YourEnvironment'));
@@ -17,6 +15,7 @@ const YourEnvironment = React.lazy(() => import('./tabs/YourEnvironment'));
 const client = createDockerDesktopClient();
 
 interface CatalogGridProps {
+    appProps: any; // We'll use this to pass all our hook data
     showSettings: () => void;
     setConfiguringItem: (item: CatalogItemWithName) => void;
 }
@@ -32,26 +31,22 @@ const parseDDVersion = (ddVersion: string) => {
 const NEVER_SHOW_AGAIN_KEY = 'registry-sync-never-show-again';
 
 export const CatalogGrid: React.FC<CatalogGridProps> = ({
+    appProps,
     setConfiguringItem,
 }) => {
+    // Extract all the values we need from appProps
     const {
         catalogItems,
         registryItems,
         canRegister,
         registerCatalogItem,
         unregisterCatalogItem,
         tryUpdateSecrets,
-        secrets
-    } = useCatalogContext();
-
-    const {
+        secrets,
         mcpClientStates,
-        isLoading: mcpLoading
-    } = useMCPClientContext();
-
-    const {
+        isLoading: mcpLoading,
         config
-    } = useConfigContext();
+    } = appProps;
 
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
     const [search, setSearch] = useState<string>('');
@@ -91,7 +86,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     }
 
     const hasOutOfCatalog = catalogItems.length > 0 && Object.keys(registryItems).length > 0 && !Object.keys(registryItems).every((i) =>
-        catalogItems.some((c) => c.name === i)
+        catalogItems.some((c: CatalogItemWithName) => c.name === i)
     )
 
     const sortedCatalogItems = sort !== 'date-desc' ? [...catalogItems].sort((a, b) => {
@@ -111,7 +106,11 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         </>
     }
 
-    const noConfiguredClients = !mcpLoading && !Object.values(mcpClientStates || {}).some(state => state.exists && state.configured);
+    // Check if there are any configured clients
+    const noConfiguredClients = !mcpLoading && mcpClientStates ?
+        !Object.values(mcpClientStates as Record<string, MCPClientState>).some(state =>
+            state.exists && state.configured
+        ) : false;
 
     return (
         <>
@@ -186,12 +185,6 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                                 }} disableRipple>
                                     ⏰ Most Recent
                                 </MenuItem>
-                                {/* <MenuItem onClick={() => setOpenMenus({ ...openMenus, 'demo-customized-menu': { anchorEl: null, open: false } })} disableRipple>
-                            ️‍🔥 Trending
-                        </MenuItem>
-                        <MenuItem onClick={() => setOpenMenus({ ...openMenus, 'demo-customized-menu': { anchorEl: null, open: false } })} disableRipple>
-                            ⬇️ Most Downloads
-                        </MenuItem> */}
                                 <Divider sx={{ my: 0.5 }} />
                                 <MenuItem sx={{ fontWeight: sort === 'name-asc' ? 'bold' : 'normal' }} onClick={() => {
                                     setOpenMenus({ ...openMenus, 'demo-customized-menu': { anchorEl: null, open: false } })
@@ -228,34 +221,14 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                             config={config || {}}
                         />
                     )}
-                    {/* {tab === 1 && (
-                    <YourTools
-                        registryItems={registryItems}
-                        search={search}
-                        catalogItems={sortedCatalogItems}
-                        unregister={unregisterCatalogItem}
-                        onSecretChange={tryLoadSecrets}
-                        secrets={secrets}
-                        setConfiguringItem={setConfiguringItem}
-                        canRegister={canRegister}
-                        ddVersion={ddVersion}
-                        config={config || {}}
-                    />
-                )} */}
-                    {tab === 2 && ddVersion && (
-                        <YourEnvironment
-                            secrets={secrets}
-                            ddVersion={ddVersion}
-                            config={config || {}}
-                        />
-                    )}
                     {tab === 1 && (
                         <YourClients
-                            client={client}
+                            appProps={appProps}
+                            ddVersion={ddVersion}
                         />
                     )}
                 </Suspense>
             </Stack>
         </>
     );
-};
+}