@croct/plug-react 0.8.0 → 0.9.0

package/src/hooks/useEvaluation.ts

@@ -1,27 +1,17 @@
 import {JsonValue} from '@croct/plug/sdk/json';
 import {EvaluationOptions} from '@croct/sdk/facade/evaluatorFacade';
+import {useEffect, useState} from 'react';
 import {useLoader} from './useLoader';
 import {useCroct} from './useCroct';
 import {isSsr} from '../ssr-polyfills';
 import {hash} from '../hash';
 
-function cleanEvaluationOptions(options: EvaluationOptions): EvaluationOptions {
-    const result: EvaluationOptions = {};
-
-    for (const [key, value] of Object.entries(options) as Array<[keyof EvaluationOptions, any]>) {
-        if (value !== undefined) {
-            result[key] = value;
-        }
-    }
-
-    return result;
-}
-
 export type UseEvaluationOptions<I, F> = EvaluationOptions & {
     initial?: I,
     fallback?: F,
     cacheKey?: string,
     expiration?: number,
+    staleWhileLoading?: boolean,
 };
 
 type UseEvaluationHook = <T extends JsonValue, I = T, F = T>(
@@ -33,20 +23,58 @@ function useCsrEvaluation<T = JsonValue, I = T, F = T>(
     query: string,
     options: UseEvaluationOptions<I, F> = {},
 ): T | I | F {
-    const {cacheKey, fallback, initial, expiration, ...evaluationOptions} = options;
+    const {
+        cacheKey,
+        fallback,
+        expiration,
+        staleWhileLoading = false,
+        initial: initialValue,
+        ...evaluationOptions
+    } = options;
+
+    const [initial, setInitial] = useState<T | I | F | undefined>(initialValue);
     const croct = useCroct();
 
-    return useLoader<T | I | F>({
+    const result = useLoader<T | I | F>({
         cacheKey: hash(
             `useEvaluation:${cacheKey ?? ''}`
             + `:${query}`
-            + `:${JSON.stringify(options.attributes ?? '')}`,
+            + `:${JSON.stringify(options.attributes ?? {})}`,
         ),
         loader: () => croct.evaluate<T & JsonValue>(query, cleanEvaluationOptions(evaluationOptions)),
         initial: initial,
         fallback: fallback,
         expiration: expiration,
     });
+
+    useEffect(
+        () => {
+            if (staleWhileLoading) {
+                setInitial(current => {
+                    if (current !== result) {
+                        return result;
+                    }
+
+                    return current;
+                });
+            }
+        },
+        [result, staleWhileLoading],
+    );
+
+    return result;
+}
+
+function cleanEvaluationOptions(options: EvaluationOptions): EvaluationOptions {
+    const result: EvaluationOptions = {};
+
+    for (const [key, value] of Object.entries(options) as Array<[keyof EvaluationOptions, any]>) {
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+
+    return result;
 }
 
 function useSsrEvaluation<T = JsonValue, I = T, F = T>(

package/src/hooks/useLoader.test.ts

@@ -16,11 +16,8 @@ describe('useLoader', () => {
 
     beforeEach(() => {
         cacheKey.next();
-    });
-
-    afterEach(() => {
-        jest.clearAllTimers();
         jest.resetAllMocks();
+        jest.clearAllTimers();
     });
 
     // Needed to use fake timers and promises:
@@ -212,6 +209,96 @@ describe('useLoader', () => {
         expect(loader).toHaveBeenCalledTimes(1);
     });
 
+    it('should reload the value when the cache key changes without initial value', async () => {
+        jest.useFakeTimers();
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('foo')
+            .mockImplementationOnce(
+                () => new Promise(resolve => {
+                    setTimeout(() => resolve('bar'), 10);
+                }),
+            );
+
+        const {result, rerender} = renderHook<any, {initial: string}>(
+            props => useLoader({
+                cacheKey: cacheKey.current(),
+                loader: loader,
+                initial: props?.initial,
+            }),
+        );
+
+        await act(flushPromises);
+
+        rerender();
+
+        await waitFor(() => expect(result.current).toBe('foo'));
+
+        expect(loader).toHaveBeenCalledTimes(1);
+
+        cacheKey.next();
+
+        rerender({initial: 'loading'});
+
+        await waitFor(() => expect(result.current).toBe('loading'));
+
+        jest.advanceTimersByTime(10);
+
+        await waitFor(() => expect(result.current).toBe('bar'));
+
+        expect(loader).toHaveBeenCalledTimes(2);
+    });
+
+    it('should reload the value when the cache key changes with initial value', async () => {
+        jest.useFakeTimers();
+
+        const loader = jest.fn()
+            .mockImplementationOnce(
+                () => new Promise(resolve => {
+                    setTimeout(() => resolve('foo'), 10);
+                }),
+            )
+            .mockImplementationOnce(
+                () => new Promise(resolve => {
+                    setTimeout(() => resolve('bar'), 10);
+                }),
+            );
+
+        const {result, rerender} = renderHook<any, {initial: string}>(
+            props => useLoader({
+                cacheKey: cacheKey.current(),
+                initial: props?.initial ?? 'first content',
+                loader: loader,
+            }),
+        );
+
+        await act(flushPromises);
+
+        expect(result.current).toBe('first content');
+
+        jest.advanceTimersByTime(10);
+
+        await act(flushPromises);
+
+        await waitFor(() => expect(result.current).toBe('foo'));
+
+        expect(loader).toHaveBeenCalledTimes(1);
+
+        cacheKey.next();
+
+        rerender({initial: 'second content'});
+
+        await waitFor(() => expect(result.current).toBe('second content'));
+
+        jest.advanceTimersByTime(10);
+
+        await act(flushPromises);
+
+        await waitFor(() => expect(result.current).toBe('bar'));
+
+        expect(loader).toHaveBeenCalledTimes(2);
+    });
+
     it.each<[number, number|undefined]>(
         [
             // [Expected elapsed time, Expiration]

package/src/hooks/useLoader.ts

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {Cache, EntryOptions} from './Cache';
 
 const cache = new Cache(60 * 1000);
@@ -8,38 +8,60 @@ export type CacheOptions<R> = EntryOptions<R> & {
 };
 
 export function useLoader<R>({initial, ...options}: CacheOptions<R>): R {
-    const loadedValue: R|undefined = cache.get<R>(options.cacheKey)?.result;
+    const {cacheKey} = options;
+    const loadedValue: R|undefined = cache.get<R>(cacheKey)?.result;
     const [value, setValue] = useState(loadedValue !== undefined ? loadedValue : initial);
     const mountedRef = useRef(true);
-    const optionsRef = useRef(initial !== undefined ? options : undefined);
+    const initialRef = useRef(initial);
+    const previousCacheKey = useRef(cacheKey);
 
-    useEffect(
-        () => {
-            if (optionsRef.current !== undefined) {
-                try {
-                    setValue(cache.load(optionsRef.current));
-                } catch (result: unknown) {
-                    if (result instanceof Promise) {
-                        result.then((resolvedValue: R) => {
-                            if (mountedRef.current) {
-                                setValue(resolvedValue);
-                            }
-                        });
-
-                        return;
+    const load = useStableCallback(() => {
+        try {
+            setValue(cache.load(options));
+        } catch (result: unknown) {
+            if (result instanceof Promise) {
+                result.then((resolvedValue: R) => {
+                    if (mountedRef.current) {
+                        setValue(resolvedValue);
                     }
+                });
+
+                return;
+            }
+
+            setValue(undefined);
+        }
+    });
 
-                    setValue(undefined);
+    const reset = useStableCallback(() => {
+        const newLoadedValue: R|undefined = cache.get<R>(cacheKey)?.result;
+
+        setValue(newLoadedValue !== undefined ? newLoadedValue : initial);
+
+        load();
+    });
+
+    useEffect(
+        () => {
+            if (previousCacheKey.current !== cacheKey) {
+                reset();
+                previousCacheKey.current = cacheKey;
+            }
+        },
+        [reset, cacheKey],
+    );
 
-                    return;
-                }
+    useEffect(
+        () => {
+            if (initialRef.current !== undefined) {
+                load();
             }
 
             return () => {
                 mountedRef.current = false;
             };
         },
-        [],
+        [load],
     );
 
     if (value === undefined) {
@@ -48,3 +70,15 @@ export function useLoader<R>({initial, ...options}: CacheOptions<R>): R {
 
     return value;
 }
+
+type Callback = () => void;
+
+function useStableCallback(callback: Callback): Callback {
+    const ref = useRef<Callback>();
+
+    useEffect(() => {
+        ref.current = callback;
+    });
+
+    return useCallback(() => { ref.current?.(); }, []);
+}