@khanacademy/wonder-blocks-data 4.0.0 → 5.0.0

package/src/hooks/use-server-effect.js

@@ -22,7 +22,7 @@ import type {CachedResponse, ValidCacheData} from "../util/types.js";
  * The asynchronous action is never invoked on the client-side.
  */
 export const useServerEffect = <TData: ValidCacheData>(
-    id: string,
+    requestId: string,
     handler: () => Promise<?TData>,
     hydrate: boolean = true,
 ): ?CachedResponse<TData> => {
@@ -31,14 +31,14 @@ export const useServerEffect = <TData: ValidCacheData>(
     // This works in both hydration and SSR because the very first call to
     // this will have cached data in those cases as it will be present on the
     // initial render - and subsequent renders on the client it will be null.
-    const cachedResult = SsrCache.Default.getEntry<TData>(id);
+    const cachedResult = SsrCache.Default.getEntry<TData>(requestId);
 
     // We only track data requests when we are server-side and we don't
     // already have a result, as given by the cachedData (which is also the
     // initial value for the result state).
     const maybeTrack = useContext(TrackerContext);
     if (cachedResult == null && Server.isServerSide()) {
-        maybeTrack?.(id, handler, hydrate);
+        maybeTrack?.(requestId, handler, hydrate);
     }
 
     return cachedResult;

package/src/index.js

@@ -47,8 +47,9 @@ export const removeAllFromCache = (
 
 export {default as TrackData} from "./components/track-data.js";
 export {default as Data} from "./components/data.js";
-export {default as InterceptData} from "./components/intercept-data.js";
+export {default as InterceptRequests} from "./components/intercept-requests.js";
 export {useServerEffect} from "./hooks/use-server-effect.js";
+export {useRequestInterception} from "./hooks/use-request-interception.js";
 export {useSharedCache, clearSharedCache} from "./hooks/use-shared-cache.js";
 export {ScopedInMemoryCache} from "./util/scoped-in-memory-cache.js";
 

package/src/components/__tests__/intercept-data.test.js

@@ -1,63 +0,0 @@
-// @flow
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import InterceptContext from "../intercept-context.js";
-import InterceptData from "../intercept-data.js";
-
-describe("InterceptData", () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it("should update context with fulfillRequest method", () => {
-        // Arrange
-        const fakeHandler = () => Promise.resolve("data");
-        const props = {
-            handler: fakeHandler,
-            requestId: "ID",
-        };
-        const captureContextFn = jest.fn();
-
-        // Act
-        render(
-            <InterceptData {...props}>
-                <InterceptContext.Consumer>
-                    {captureContextFn}
-                </InterceptContext.Consumer>
-            </InterceptData>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                ID: props.handler,
-            }),
-        );
-    });
-
-    it("should override parent InterceptData", () => {
-        // Arrange
-        const fulfillRequest1Fn = jest.fn();
-        const fulfillRequest2Fn = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        render(
-            <InterceptData handler={fulfillRequest1Fn} requestId="ID">
-                <InterceptData handler={fulfillRequest2Fn} requestId="ID">
-                    <InterceptContext.Consumer>
-                        {captureContextFn}
-                    </InterceptContext.Consumer>
-                </InterceptData>
-            </InterceptData>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                ID: fulfillRequest2Fn,
-            }),
-        );
-    });
-});

package/src/components/intercept-data.js

@@ -1,66 +0,0 @@
-// @flow
-import * as React from "react";
-
-import InterceptContext from "./intercept-context.js";
-
-import type {ValidCacheData} from "../util/types.js";
-
-type Props<TData: ValidCacheData> = {|
-    /**
-     * The ID of the request to intercept.
-     */
-    requestId: string,
-
-    /**
-     * Called to intercept and fulfill the request.
-     * If this returns null, the request will be fulfilled by the
-     * handler of the original request being intercepted.
-     */
-    handler: () => ?Promise<?TData>,
-
-    /**
-     * The children to render within this component. Any requests by `Data`
-     * components that use same ID as this component will be intercepted.
-     * (unless another `InterceptData` component overrides this one).
-     */
-    children: React.Node,
-|};
-
-/**
- * This component provides a mechanism to intercept data requests.
- * This is for use in testing.
- *
- * This component is not recommended for use in production code as it
- * can prevent predictable functioning of the Wonder Blocks Data framework.
- * One possible side-effect is that inflight requests from the interceptor could
- * be picked up by `Data` component requests from outside the children of this
- * component.
- *
- * These components do not chain. If a different `InterceptData` instance is
- * rendered within this one that intercepts the same id, then that
- * new instance will replace this interceptor for its children. All methods
- * will be replaced.
- */
-const InterceptData = <TData: ValidCacheData>({
-    requestId,
-    handler,
-    children,
-}: Props<TData>): React.Node => {
-    const interceptMap = React.useContext(InterceptContext);
-
-    const updatedInterceptMap = React.useMemo(
-        () => ({
-            ...interceptMap,
-            [requestId]: handler,
-        }),
-        [interceptMap, requestId, handler],
-    );
-
-    return (
-        <InterceptContext.Provider value={updatedInterceptMap}>
-            {children}
-        </InterceptContext.Provider>
-    );
-};
-
-export default InterceptData;