@khanacademy/wonder-blocks-data 3.1.1 → 4.0.0

package/src/hooks/use-data.js

@@ -1,143 +0,0 @@
-// @flow
-import {Server} from "@khanacademy/wonder-blocks-core";
-import {useState, useEffect, useContext, useRef} from "react";
-import {RequestFulfillment} from "../util/request-fulfillment.js";
-import InterceptContext from "../components/intercept-context.js";
-import {TrackerContext} from "../util/request-tracking.js";
-import {resultFromCacheEntry} from "../util/result-from-cache-entry.js";
-import {ResponseCache} from "../util/response-cache.js";
-
-import type {
-    Result,
-    IRequestHandler,
-    ValidData,
-    CacheEntry,
-} from "../util/types.js";
-
-export const useData = <TOptions, TData: ValidData>(
-    handler: IRequestHandler<TOptions, TData>,
-    options: TOptions,
-): Result<TData> => {
-    // If we're server-side or hydrating, we'll have a cached entry to use.
-    // So we get that and use it to initialize our state.
-    // 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 = ResponseCache.Default.getEntry<TOptions, TData>(
-        handler,
-        options,
-    );
-    const [result, setResult] = useState<?CacheEntry<TData>>(cachedResult);
-
-    // Lookup to see if there's an interceptor for the handler.
-    // If we have one, we need to replace the handler with one that
-    // uses the interceptor.
-    const interceptorMap = useContext(InterceptContext);
-    const interceptor = interceptorMap[handler.type];
-
-    // If we have an interceptor, we need to replace the handler with one that
-    // uses the interceptor. This helper function generates a new handler.
-    // We need this before we track the request as we want the interceptor
-    // to also work for tracked requests to simplify testing the server-side
-    // request fulfillment.
-    const getMaybeInterceptedHandler = () => {
-        if (interceptor == null) {
-            return handler;
-        }
-
-        const fulfillRequestFn = (options) =>
-            interceptor.fulfillRequest(options) ??
-            handler.fulfillRequest(options);
-        return {
-            fulfillRequest: fulfillRequestFn,
-            getKey: (options) => handler.getKey(options),
-            type: handler.type,
-            hydrate: handler.hydrate,
-        };
-    };
-
-    // 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 (result == null && Server.isServerSide()) {
-        maybeTrack?.(getMaybeInterceptedHandler(), options);
-    }
-
-    // We need to update our request when the handler changes or the key
-    // to the options change, so we keep track of those.
-    // However, even if we are hydrating from cache, we still need to make the
-    // request at least once, so we do not initialize these references.
-    const handlerRef = useRef();
-    const keyRef = useRef();
-    const interceptorRef = useRef();
-
-    // This effect will ensure that we fulfill the request as desired.
-    useEffect(() => {
-        // If we are server-side, then just skip the effect. We track requests
-        // during SSR and fulfill them outside of the React render cycle.
-        // NOTE: This shouldn't happen since effects would not run on the server
-        // but let's be defensive - I think it makes the code clearer.
-        /* istanbul ignore next */
-        if (Server.isServerSide()) {
-            return;
-        }
-
-        // Update our refs to the current handler and key.
-        handlerRef.current = handler;
-        keyRef.current = handler.getKey(options);
-        interceptorRef.current = interceptor;
-
-        // If we're not hydrating a result, we want to make sure we set our
-        // result to null so that we're in the loading state.
-        if (cachedResult == null) {
-            // Mark ourselves as loading.
-            setResult(null);
-        }
-
-        // We aren't server-side, so let's make the request.
-        // The request handler is in control of whether that request actually
-        // happens or not.
-        let cancel = false;
-        RequestFulfillment.Default.fulfill(
-            getMaybeInterceptedHandler(),
-            options,
-        )
-            .then((updateEntry) => {
-                if (cancel) {
-                    return;
-                }
-                setResult(updateEntry);
-                return;
-            })
-            .catch((e) => {
-                if (cancel) {
-                    return;
-                }
-                /**
-                 * We should never get here as errors in fulfillment are part
-                 * of the `then`, but if we do.
-                 */
-                // eslint-disable-next-line no-console
-                console.error(
-                    `Unexpected error occurred during data fulfillment: ${e}`,
-                );
-                setResult({
-                    data: null,
-                    error: typeof e === "string" ? e : e.message,
-                });
-                return;
-            });
-
-        return () => {
-            cancel = true;
-        };
-        // - handler.getKey is a proxy for options
-        // - We don't want to trigger on cachedResult changing, we're
-        //   just using that as a flag for render state if the other things
-        //   trigger this effect.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handler, handler.getKey(options), interceptor]);
-
-    return resultFromCacheEntry(result);
-};

package/src/util/__tests__/memory-cache.test.js

@@ -1,446 +0,0 @@
-// @flow
-import MemoryCache from "../memory-cache.js";
-
-import type {IRequestHandler} from "../types.js";
-
-describe("MemoryCache", () => {
-    afterEach(() => {
-        /**
-         * This is needed or the JSON.stringify mocks need to be
-         * mockImplementationOnce. This is because if the snapshots need
-         * to update, they write the inline snapshot and that appears to invoke
-         * prettier which in turn, calls JSON.stringify. And if that mock
-         * throws, then boom. No snapshot update and a big old confusing test
-         * failure.
-         */
-        jest.restoreAllMocks();
-    });
-
-    describe("#constructor", () => {
-        it("should throw if the cloning fails", () => {
-            // Arrange
-            jest.spyOn(JSON, "stringify").mockImplementation(() => {
-                throw new Error("BANG!");
-            });
-
-            // Act
-            const underTest = () =>
-                new MemoryCache({
-                    BAD: {
-                        BAD: {data: "FOOD"},
-                    },
-                });
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingInlineSnapshot(
-                `"An error occurred trying to initialize from a response cache snapshot: Error: BANG!"`,
-            );
-        });
-
-        it("should deep clone the passed source data", () => {
-            // Arrange
-            const sourceData = {
-                MY_HANDLER: {
-                    MY_KEY: {data: "THE_DATA"},
-                },
-            };
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const cache = new MemoryCache(sourceData);
-            // Try to mutate the cache.
-            sourceData["MY_HANDLER"]["MY_KEY"] = {data: "SOME_NEW_DATA"};
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toStrictEqual({data: "THE_DATA"});
-        });
-    });
-
-    describe("#store", () => {
-        it("should store the entry in the cache", () => {
-            // Arrange
-            const cache = new MemoryCache();
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            cache.store<string, string>(fakeHandler, "options", {data: "data"});
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toStrictEqual({data: "data"});
-        });
-
-        it("should replace the entry in the handler subcache", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {error: "Oh no!"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            cache.store<string, string>(fakeHandler, "options", {
-                data: "other_data",
-            });
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toStrictEqual({data: "other_data"});
-        });
-    });
-
-    describe("#retrieve", () => {
-        it("should return null if the handler subcache is absent", () => {
-            // Arrange
-            const cache = new MemoryCache();
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toBeNull();
-        });
-
-        it("should return null if the request key is absent from the subcache", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    SOME_OTHER_KEY: {data: "data we don't want"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toBeNull();
-        });
-
-        it("should return the entry if it exists", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toStrictEqual({data: "data!"});
-        });
-    });
-
-    describe("#remove", () => {
-        it("should return false if the handler subcache does not exist", () => {
-            // Arrange
-            const cache = new MemoryCache();
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.remove(fakeHandler, "options");
-
-            // Assert
-            expect(result).toBeFalsy();
-        });
-
-        it("should return false if the item does not exist in the subcache", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {},
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.remove(fakeHandler, "options");
-
-            // Assert
-            expect(result).toBeFalsy();
-        });
-
-        it("should return true if the entry was removed", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.remove(fakeHandler, "options");
-
-            // Assert
-            expect(result).toBeTruthy();
-        });
-
-        it("should remove the entry", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            cache.remove(fakeHandler, "options");
-            const result = cache.retrieve(fakeHandler, "options");
-
-            // Assert
-            expect(result).toBeNull();
-        });
-    });
-
-    describe("#removeAll", () => {
-        it("should return 0 if the handler subcache is absent", () => {
-            // Arrange
-            const cache = new MemoryCache();
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.removeAll(fakeHandler);
-
-            // Assert
-            expect(result).toBe(0);
-        });
-
-        it("should remove matching entries from handler subcache", () => {
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "2"},
-                    MY_KEY2: {data: "1"},
-                    MY_KEY3: {data: "2"},
-                },
-                OTHER_HANDLER: {
-                    MY_KEY: {data: "1"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            cache.removeAll(fakeHandler, (k, d) => d.data === "2");
-            const result = cache.cloneData();
-
-            // Assert
-            expect(result).toStrictEqual({
-                MY_HANDLER: {
-                    MY_KEY2: {data: "1"},
-                },
-                OTHER_HANDLER: {
-                    MY_KEY: {data: "1"},
-                },
-            });
-        });
-
-        it("should return the number of items that matched the predicate and were removed", () => {
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "a"},
-                    MY_KEY2: {data: "b"},
-                    MY_KEY3: {data: "a"},
-                },
-                OTHER_HANDLER: {
-                    MY_KEY: {data: "b"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.removeAll(
-                fakeHandler,
-                (k, d) => d.data === "a",
-            );
-
-            // Assert
-            expect(result).toBe(2);
-        });
-
-        it("should remove the entire handler subcache if no predicate", () => {
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                    MY_KEY2: {data: "data!"},
-                    MY_KEY3: {data: "data!"},
-                },
-                OTHER_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            cache.removeAll(fakeHandler);
-            const result = cache.cloneData();
-
-            // Assert
-            expect(result).toStrictEqual({
-                OTHER_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-        });
-
-        it("should return the number of items that were in the handler subcache if there was no predicate", () => {
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                    MY_KEY2: {data: "data!"},
-                    MY_KEY3: {data: "data!"},
-                },
-                OTHER_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            const fakeHandler: IRequestHandler<string, string> = {
-                getKey: () => "MY_KEY",
-                type: "MY_HANDLER",
-                fulfillRequest: jest.fn(),
-                hydrate: true,
-            };
-
-            // Act
-            const result = cache.removeAll(fakeHandler);
-
-            // Assert
-            expect(result).toBe(3);
-        });
-    });
-
-    describe("#cloneData", () => {
-        it("should return a copy of the cache data", () => {});
-
-        it("should throw if there is an error during cloning", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            jest.spyOn(JSON, "stringify").mockImplementation(() => {
-                throw new Error("BANG!");
-            });
-
-            // Act
-            const act = () => cache.cloneData();
-
-            // Assert
-            expect(act).toThrowErrorMatchingInlineSnapshot(
-                `"An error occurred while trying to clone the cache: Error: BANG!"`,
-            );
-        });
-    });
-
-    describe("@inUse", () => {
-        it("should return true if the cache contains data", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-
-            // Act
-            const result = cache.inUse;
-
-            // Assert
-            expect(result).toBeTruthy();
-        });
-
-        it("should return false if the cache is empty", () => {
-            // Arrange
-            const cache = new MemoryCache({
-                MY_HANDLER: {
-                    MY_KEY: {data: "data!"},
-                },
-            });
-            cache.removeAll(
-                ({
-                    type: "MY_HANDLER",
-                }: any),
-            );
-
-            // Act
-            const result = cache.inUse;
-
-            // Assert
-            expect(result).toBeFalsy();
-        });
-    });
-});