@cratis/arc.react 18.4.3 → 18.6.0

package/identity/IdentityProvider.tsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
+import { Constructor } from '@cratis/fundamentals';
 import { IIdentity } from '@cratis/arc/identity';
 import { IdentityProvider as RootIdentityProvider } from '@cratis/arc/identity';
 import { GetHttpHeaders } from '@cratis/arc';
@@ -20,16 +21,26 @@ const defaultIdentityContext: IIdentity = {
     }
 };
 
-export const IdentityProviderContext = React.createContext<IIdentity>(defaultIdentityContext);
+type IdentityContextValue = {
+    identity: IIdentity;
+    detailsConstructor?: Constructor;
+};
+
+const defaultContextValue: IdentityContextValue = {
+    identity: defaultIdentityContext
+};
+
+export const IdentityProviderContext = React.createContext<IdentityContextValue>(defaultContextValue);
 
 export interface IdentityProviderProps {
     children?: JSX.Element | JSX.Element[],
-    httpHeadersCallback?: GetHttpHeaders
+    httpHeadersCallback?: GetHttpHeaders,
+    detailsType?: Constructor
 }
 
 export const IdentityProvider = (props: IdentityProviderProps) => {
     const arc = useContext(ArcContext);
-    const [context, setContext] = useState<IIdentity>(defaultIdentityContext);
+    const [context, setContext] = useState<IdentityContextValue>(defaultContextValue);
 
     const wrapRefresh = (identity: IIdentity): IIdentity => {
         const originalRefresh = identity.refresh.bind(identity);
@@ -39,7 +50,10 @@ export const IdentityProvider = (props: IdentityProviderProps) => {
                 return new Promise<IIdentity>(resolve => {
                     originalRefresh().then(newIdentity => {
                         const wrappedIdentity = wrapRefresh(newIdentity);
-                        setContext(wrappedIdentity);
+                        setContext({
+                            identity: wrappedIdentity,
+                            detailsConstructor: props.detailsType
+                        });
                         resolve(wrappedIdentity);
                     });
                 });
@@ -51,9 +65,12 @@ export const IdentityProvider = (props: IdentityProviderProps) => {
         RootIdentityProvider.setHttpHeadersCallback(props.httpHeadersCallback!);
         RootIdentityProvider.setApiBasePath(arc.apiBasePath ?? '');
         RootIdentityProvider.setOrigin(arc.origin ?? '');
-        RootIdentityProvider.getCurrent().then(identity => {
+        RootIdentityProvider.getCurrent(props.detailsType).then(identity => {
             const wrappedIdentity = wrapRefresh(identity);
-            setContext(wrappedIdentity);
+            setContext({
+                identity: wrappedIdentity,
+                detailsConstructor: props.detailsType
+            });
         });
     }, []);
 

package/identity/for_IdentityProvider/when_refreshing_identity.ts

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 import { IdentityProvider } from '../IdentityProvider';
 import { useIdentity } from '../useIdentity';
 import { IIdentity } from '@cratis/arc/identity';
-import sinon from 'sinon';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
 
 describe('when refreshing identity', async () => {
     let capturedIdentity: IIdentity | null = null;
@@ -22,7 +22,8 @@ describe('when refreshing identity', async () => {
         return React.createElement('div', null, 'Test');
     };
 
-    const mockFetch = sinon.stub(global, 'fetch');
+    const fetchHelper = createFetchHelper();
+    const mockFetch = fetchHelper.stubFetch();
     mockFetch.onFirstCall().resolves({
         json: async () => ({
             id: 'initial-id',
@@ -55,5 +56,5 @@ describe('when refreshing identity', async () => {
     it('should have new id', () => newId.should.equal('new-id'));
     it('should have new name', () => newName.should.equal('Updated User'));
 
-    mockFetch.restore();
+    fetchHelper.restore();
 });

package/identity/useIdentity.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
+import { Constructor } from '@cratis/fundamentals';
 import { IdentityProviderContext } from './IdentityProvider';
 import { IIdentity } from '@cratis/arc/identity';
 
@@ -10,10 +11,33 @@ import { IIdentity } from '@cratis/arc/identity';
  * @param defaultDetails Optional default details to use if the context is not set.
  * @returns An identity context.
  */
-export function useIdentity<TDetails = object>(defaultDetails?: TDetails | undefined | null): IIdentity<TDetails> {
-    const context = React.useContext(IdentityProviderContext) as IIdentity<TDetails>;
-    if (context.isSet === false && defaultDetails !== undefined) {
-        context.details = defaultDetails!;
+export function useIdentity<TDetails = object>(defaultDetails?: TDetails | undefined | null): IIdentity<TDetails>;
+
+/**
+ * Hook to get the identity context with type-safe deserialization.
+ * @param type Constructor for the details type to enable type-safe deserialization.
+ * @param defaultDetails Optional default details to use if the context is not set.
+ * @returns An identity context.
+ */
+export function useIdentity<TDetails = object>(type: Constructor<TDetails>, defaultDetails?: TDetails | undefined | null): IIdentity<TDetails>;
+
+export function useIdentity<TDetails = object>(
+    typeOrDefaultDetails?: Constructor<TDetails> | TDetails | undefined | null,
+    defaultDetails?: TDetails | undefined | null
+): IIdentity<TDetails> {
+    const contextValue = React.useContext(IdentityProviderContext);
+    const identity = contextValue.identity as IIdentity<TDetails>;
+    
+    // Determine if first argument is a Constructor or default details
+    // Constructors are functions, but regular functions would be unusual here.
+    // We rely on the type system and developer intent - if a function is passed, 
+    // it's expected to be a constructor class.
+    const isConstructor = typeof typeOrDefaultDetails === 'function';
+    const actualDefaultDetails = isConstructor ? defaultDetails : typeOrDefaultDetails;
+    
+    if (identity.isSet === false && actualDefaultDetails !== undefined) {
+        identity.details = actualDefaultDetails!;
     }
-    return context;
+    
+    return identity;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/arc.react",
-    "version": "18.4.3",
+    "version": "18.6.0",
     "description": "",
     "author": "Cratis",
     "license": "MIT",
@@ -59,7 +59,7 @@
         "up": "yarn g:up"
     },
     "dependencies": {
-        "@cratis/arc": "18.4.3",
+        "@cratis/arc": "18.6.0",
         "tsyringe": "^4.10.0"
     },
     "peerDependencies": {

package/queries/for_useObservableQuery/FakeObservableQuery.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ObservableQueryFor, QueryResult, ObservableQuerySubscription, OnNextResult } from '@cratis/arc/queries';
+import { ParameterDescriptor } from '@cratis/arc/reflection';
+
+export interface FakeObservableQueryResult {
+    id: string;
+    name: string;
+}
+
+export type SubscribeCallback = OnNextResult<QueryResult<FakeObservableQueryResult[]>>;
+
+export class FakeObservableQuery extends ObservableQueryFor<FakeObservableQueryResult[]> {
+    readonly route = '/api/fake-observable-query';
+    readonly parameterDescriptors: ParameterDescriptor[] = [];
+
+    get requiredRequestParameters(): string[] {
+        return [];
+    }
+
+    defaultValue: FakeObservableQueryResult[] = [];
+
+    constructor() {
+        super(Object, true);
+    }
+
+    static subscribeCallbacks: SubscribeCallback[] = [];
+    static subscriptionReturned: ObservableQuerySubscription<FakeObservableQueryResult[]>;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    subscribe(callback: SubscribeCallback, args?: object): ObservableQuerySubscription<FakeObservableQueryResult[]> {
+        FakeObservableQuery.subscribeCallbacks.push(callback);
+        FakeObservableQuery.subscriptionReturned = {
+            unsubscribe: () => {}
+        } as unknown as ObservableQuerySubscription<FakeObservableQueryResult[]>;
+        return FakeObservableQuery.subscriptionReturned;
+    }
+
+    static reset() {
+        FakeObservableQuery.subscribeCallbacks = [];
+    }
+}

package/queries/for_useObservableQuery/when_creating_instance.ts

@@ -0,0 +1,97 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import { useObservableQuery } from '../useObservableQuery';
+import { FakeObservableQuery } from './FakeObservableQuery';
+import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { QueryResult } from '@cratis/arc/queries';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+describe('when creating instance', () => {
+    let capturedIsPerformingInitial: boolean | null = null;
+    let capturedIsPerformingAfterResponse: boolean | null = null;
+    let renderCount = 0;
+
+    beforeEach(() => {
+        FakeObservableQuery.reset();
+        capturedIsPerformingInitial = null;
+        capturedIsPerformingAfterResponse = null;
+        renderCount = 0;
+    });
+
+    const config: ArcConfiguration = {
+        microservice: 'test-microservice',
+        apiBasePath: '/api',
+        origin: 'https://example.com',
+    };
+
+    it('should have isPerforming true initially before receiving data', async () => {
+        const TestComponent = () => {
+            const [result] = useObservableQuery(FakeObservableQuery);
+            renderCount++;
+
+            if (renderCount === 1) {
+                capturedIsPerformingInitial = result.isPerforming;
+            }
+
+            return React.createElement('div', null, 'Test');
+        };
+
+        render(
+            React.createElement(
+                ArcContext.Provider,
+                { value: config },
+                React.createElement(TestComponent)
+            )
+        );
+
+        capturedIsPerformingInitial!.should.be.true;
+    });
+
+    it('should have isPerforming false after receiving data', async () => {
+        const TestComponent = () => {
+            const [result] = useObservableQuery(FakeObservableQuery);
+            renderCount++;
+
+            if (renderCount === 1) {
+                capturedIsPerformingInitial = result.isPerforming;
+            } else if (renderCount === 2) {
+                capturedIsPerformingAfterResponse = result.isPerforming;
+            }
+
+            return React.createElement('div', null, 'Test');
+        };
+
+        render(
+            React.createElement(
+                ArcContext.Provider,
+                { value: config },
+                React.createElement(TestComponent)
+            )
+        );
+
+        // Simulate receiving data from WebSocket
+        const callback = FakeObservableQuery.subscribeCallbacks[0];
+        callback!.should.not.be.undefined;
+
+        await act(async () => {
+            callback(new QueryResult({
+                data: [{ id: '1', name: 'Test' }],
+                isSuccess: true,
+                isAuthorized: true,
+                isValid: true,
+                hasExceptions: false,
+                validationResults: [],
+                exceptionMessages: [],
+                exceptionStackTrace: '',
+                paging: { page: 0, size: 0, totalItems: 0, totalPages: 0 }
+            }, Array, true));
+        });
+
+        capturedIsPerformingInitial!.should.be.true;
+        capturedIsPerformingAfterResponse!.should.be.false;
+    });
+});

package/queries/for_useQuery/when_creating_instance.ts

@@ -7,11 +7,13 @@ import sinon from 'sinon';
 import { useQuery } from '../useQuery';
 import { FakeQuery } from './FakeQuery';
 import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 describe('when creating instance', () => {
     let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
     let queryInstance: FakeQuery | null = null;
 
     const captureInstance = (instance: FakeQuery) => {
@@ -19,13 +21,15 @@ describe('when creating instance', () => {
     };
 
     beforeEach(() => {
-        fetchStub = sinon.stub(global, 'fetch').resolves({
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
             json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
         } as Response);
     });
 
     afterEach(() => {
-        fetchStub.restore();
+        fetchHelper.restore();
     });
 
     const config: ArcConfiguration = {

package/queries/for_useQuery/when_creating_instance_with_sorting.ts

@@ -3,14 +3,14 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import sinon from 'sinon';
 import { useQuery } from '../useQuery';
 import { FakeQuery } from './FakeQuery';
 import { ArcContext, ArcConfiguration } from '../../ArcContext';
 import { Sorting } from '@cratis/arc/queries';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
 
 describe('when creating instance with sorting', () => {
-    let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
     let queryInstance: FakeQuery | null = null;
 
     const captureInstance = (instance: FakeQuery) => {
@@ -18,13 +18,15 @@ describe('when creating instance with sorting', () => {
     };
 
     beforeEach(() => {
-        fetchStub = sinon.stub(global, 'fetch').resolves({
+        fetchHelper = createFetchHelper();
+        const fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
             json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
         } as Response);
     });
 
     afterEach(() => {
-        fetchStub.restore();
+        fetchHelper.restore();
     });
 
     const config: ArcConfiguration = {

package/queries/for_useQuery/when_creating_instance_without_optional_context_values.ts

@@ -7,11 +7,13 @@ import sinon from 'sinon';
 import { useQuery } from '../useQuery';
 import { FakeQuery } from './FakeQuery';
 import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 describe('when creating instance without optional context values', () => {
     let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
     let queryInstance: FakeQuery | null = null;
 
     const captureInstance = (instance: FakeQuery) => {
@@ -19,13 +21,15 @@ describe('when creating instance without optional context values', () => {
     };
 
     beforeEach(() => {
-        fetchStub = sinon.stub(global, 'fetch').resolves({
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
             json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
         } as Response);
     });
 
     afterEach(() => {
-        fetchStub.restore();
+        fetchHelper.restore();
     });
 
     const config: ArcConfiguration = {

package/queries/for_useQueryWithPaging/when_creating_instance_with_paging.ts

@@ -8,11 +8,13 @@ import { useQueryWithPaging } from '../useQuery';
 import { FakeQuery } from '../for_useQuery/FakeQuery';
 import { ArcContext, ArcConfiguration } from '../../ArcContext';
 import { Paging } from '@cratis/arc/queries';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 describe('when creating instance with paging', () => {
     let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
     let queryInstance: FakeQuery | null = null;
 
     const captureInstance = (instance: FakeQuery) => {
@@ -20,13 +22,15 @@ describe('when creating instance with paging', () => {
     };
 
     beforeEach(() => {
-        fetchStub = sinon.stub(global, 'fetch').resolves({
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
             json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
         } as Response);
     });
 
     afterEach(() => {
-        fetchStub.restore();
+        fetchHelper.restore();
     });
 
     const config: ArcConfiguration = {

package/queries/useObservableQuery.ts

@@ -26,7 +26,7 @@ function useObservableQueryInternal<TDataType, TQuery extends IObservableQueryFo
         return instance;
     }, [currentPaging, currentSorting, arc.microservice, arc.apiBasePath, arc.origin]);
 
-    const [result, setResult] = useState<QueryResultWithState<TDataType>>(QueryResultWithState.empty(queryInstance.current.defaultValue));
+    const [result, setResult] = useState<QueryResultWithState<TDataType>>(QueryResultWithState.initial(queryInstance.current.defaultValue));
     const argumentsDependency = queryInstance.current.requiredRequestParameters.map(_ => args?.[_]);
 
     useEffect(() => {