@croct/plug-react 0.8.1 → 0.9.0

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?.(); }, []);
+}