Fix ClientContext

Author: mythz

src/components/AutoQueryGrid.tsx

@@ -8,6 +8,7 @@ import { a, grid } from './css'
 import { asOptions, asStrings, copyText, getTypeName, parseJson, pushState, uniqueIgnoreCase } from '@/use/utils'
 import { canAccess, useAuth } from '@/use/auth'
 import { Sole } from '@/use/config'
+import { ClientContext } from '@/use/context'
 import EnsureAccess from './EnsureAccess'
 import EnsureAccessDialog from './EnsureAccessDialog'
 import FilterColumn from './grids/FilterColumn'
@@ -44,13 +45,15 @@ export interface AutoQueryGridRef {
     total: number
 }
 
-interface AutoQueryGridComponentProps extends AutoQueryGridProps {
-    // Event handlers
+// Event handlers and callbacks
+interface AutoQueryGridCallbacks {
     onHeaderSelected?: (name: string, e: React.MouseEvent) => void
     onRowSelected?: (item: any, ev: React.MouseEvent) => void
     onNav?: (args: any) => void
+}
 
-    // Slot/children props
+// Slot/children props
+interface AutoQueryGridSlots {
     children?: ReactNode
     toolbar?: ReactNode
     toolbarButtons?: (props: { toolbarButtonClass: string }) => ReactNode
@@ -95,8 +98,8 @@ interface AutoQueryGridComponentProps extends AutoQueryGridProps {
     headerSlots?: Record<string, (props: any) => ReactNode>
 }
 
-// Context for the client
-const ClientContext = React.createContext<JsonServiceClient | null>(null)
+// Combined props for internal use
+type AutoQueryGridComponentProps = AutoQueryGridProps & AutoQueryGridCallbacks & AutoQueryGridSlots
 
 export const AutoQueryGrid = forwardRef<AutoQueryGridRef, AutoQueryGridComponentProps>((props, ref) => {
     const {
@@ -1075,6 +1078,3 @@ export const AutoQueryGrid = forwardRef<AutoQueryGridRef, AutoQueryGridComponent
 AutoQueryGrid.displayName = 'AutoQueryGrid'
 
 export default AutoQueryGrid
-
-// Export context for use by parent components
-export { ClientContext }

src/demo/App.tsx

@@ -13,15 +13,22 @@ import ModalDialog from '../components/ModalDialog'
 import SlideOver from '../components/SlideOver'
 import DataGrid from '../components/DataGrid'
 import AutoForm from '../components/AutoForm'
+import AutoQueryGrid from '../components/AutoQueryGrid'
+// In production, import from '@servicestack/react':
+// import { AutoQueryGrid, ClientContext } from '@servicestack/react'
+import { ClientContext } from '../use/context'
 import { tracks, RoomType } from './data'
-import { ApiResult, EmptyResponse, IReturn, ResponseStatus } from '@servicestack/client'
+import { ApiResult, EmptyResponse, IReturn, ResponseStatus, JsonServiceClient } from '@servicestack/client'
 import { setMetadata } from '../use/metadata'
 import { Sole } from '../use/config'
 import metadataJson from './metadata.json'
 import PrimaryButton from '../components/PrimaryButton'
 
 setMetadata(metadataJson)
 
+// Create a JsonServiceClient instance for AutoQueryGrid
+const client = new JsonServiceClient('https://blazor-gallery.jamstacks.net')
+
 class Forecast {
   public date?: string;
   public temperatureC?: number;
@@ -147,6 +154,7 @@ export default function App() {
 
   return (
     <>
+      <ClientContext.Provider value={client}>
       <div className="absolute top-2 right-2">
         <DarkModeToggle />
       </div>
@@ -404,7 +412,6 @@ export default function App() {
       {/* Contextual Validation Test Section */}
       <div className="max-w-4xl mx-auto p-8">
         <h2 className="text-2xl font-bold mb-6">AutoForm Contextual Validation Test</h2>
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
           <p className="mb-4 text-gray-600 dark:text-gray-400">
             This form demonstrates contextual validation. When you submit, it will return field-specific errors
             that are automatically displayed on the corresponding inputs via ApiStateContext.
@@ -449,8 +456,19 @@ export default function App() {
                 : new ApiResult({ response: new EmptyResponse() })
             }}
           />
+      </div>
+
+     {/* AutoQuery Bookings Test */}
+      <div className="max-w-4xl mx-auto p-8">
+        <h2 className="text-2xl font-bold mb-6">AutoQuery Bookings Test</h2>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <p className="mb-4 text-gray-600 dark:text-gray-400">
+          </p>
+          <AutoQueryGrid type="Booking" />
         </div>
       </div>
+
+      </ClientContext.Provider>
     </>
   )
 }

src/index.ts

@@ -6,15 +6,15 @@ import { useAuth } from './use/auth'
 import { useFiles } from './use/files'
 import { useMetadata } from './use/metadata'
 import { useFormatters } from './use/formatters'
-import { useApiState } from './use/context'
+import { useApiState, ClientContext, ApiStateContext } from './use/context'
 import * as css from './components/css'
 
 // Export component types
 export * from './components/types'
 export * from './types'
 
 // Export hooks and utilities
-export { useUtils, useConfig, useClient, useAuth, useMetadata, useFiles, useFormatters, useApiState, css }
+export { useUtils, useConfig, useClient, useAuth, useMetadata, useFiles, useFormatters, useApiState, ClientContext, ApiStateContext, css }
 
 // Import components (this will be excluded from type generation)
 

src/types.ts

@@ -65,6 +65,7 @@ export type ApiState = {
     unRefs: <T extends Record<string, any>>(o: T) => T
     setError: ({ message, errorCode, fieldName, errors }: IResponseStatus) => ResponseStatus
     addFieldError: ({ fieldName, message, errorCode }: IResponseError) => void
+    clearErrors(): void
     loading: boolean
     error: ResponseStatus | undefined
     api: <TResponse>(request: IReturn<TResponse> | ApiRequest, args?: any, method?: string) => Promise<ApiResult<TResponse>>

src/use/client.ts

@@ -13,6 +13,7 @@ export function useClient(use?: JsonServiceClient) {
     const [response, setResponse] = useState<any>()
     const contextClient = useContext(ClientContext)
     const client = use ?? contextClient!
+    const clearErrors = () => setError(undefined)
 
     /** Set error state with summary or field validation error */
     function setErrorState({ message, errorCode, fieldName, errors }: IResponseStatus) {
@@ -122,6 +123,7 @@ export function useClient(use?: JsonServiceClient) {
     const ctx: ApiState = {
         setError: setErrorState,
         addFieldError,
+        clearErrors,
         loading,
         error,
         api,