@khanacademy/wonder-blocks-data 2.3.1 → 3.0.0

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

@@ -1,10 +1,9 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
+import {render} from "@testing-library/react";
 
 import InterceptContext from "../intercept-context.js";
 import InterceptData from "../intercept-data.js";
-import InterceptCache from "../intercept-cache.js";
 
 import type {IRequestHandler} from "../../util/types.js";
 
@@ -13,31 +12,22 @@ describe("InterceptData", () => {
         jest.resetAllMocks();
     });
 
-    it.each([
-        ["with only fulfillRequest method", {fulfillRequest: jest.fn()}],
-        [
-            "with only shouldRefreshCache method",
-            {shouldRefreshCache: jest.fn()},
-        ],
-        [
-            "with both fulfillRequest and shouldRefreshCache methods",
-            {fulfillRequest: jest.fn(), shouldRefreshCache: jest.fn()},
-        ],
-    ])("should update context %s", (_, props) => {
+    it("should update context with fulfillRequest method", () => {
         // Arrange
         const fakeHandler: IRequestHandler<string, string> = {
             fulfillRequest: () => Promise.resolve("data"),
             getKey: (o) => o,
-            shouldRefreshCache: () => false,
             type: "MY_HANDLER",
-            cache: null,
             hydrate: true,
         };
-        props.handler = fakeHandler;
+        const props = {
+            handler: fakeHandler,
+            fulfillRequest: jest.fn(),
+        };
         const captureContextFn = jest.fn();
 
         // Act
-        mount(
+        render(
             <InterceptData {...props}>
                 <InterceptContext.Consumer>
                     {captureContextFn}
@@ -49,8 +39,7 @@ describe("InterceptData", () => {
         expect(captureContextFn).toHaveBeenCalledWith(
             expect.objectContaining({
                 MY_HANDLER: {
-                    fulfillRequest: props.fulfillRequest || null,
-                    shouldRefreshCache: props.shouldRefreshCache || null,
+                    fulfillRequest: props.fulfillRequest,
                 },
             }),
         );
@@ -61,28 +50,23 @@ describe("InterceptData", () => {
         const fakeHandler: IRequestHandler<string, string> = {
             fulfillRequest: () => Promise.resolve("data"),
             getKey: (o) => o,
-            shouldRefreshCache: () => false,
             type: "MY_HANDLER",
             cache: null,
             hydrate: true,
         };
         const fulfillRequest1Fn = jest.fn();
-        const shouldRefreshCache1Fn = jest.fn();
         const fulfillRequest2Fn = jest.fn();
-        const shouldRefreshCache2Fn = jest.fn();
         const captureContextFn = jest.fn();
 
         // Act
-        mount(
+        render(
             <InterceptData
                 handler={fakeHandler}
                 fulfillRequest={fulfillRequest1Fn}
-                shouldRefreshCache={shouldRefreshCache1Fn}
             >
                 <InterceptData
                     handler={fakeHandler}
                     fulfillRequest={fulfillRequest2Fn}
-                    shouldRefreshCache={shouldRefreshCache2Fn}
                 >
                     <InterceptContext.Consumer>
                         {captureContextFn}
@@ -96,47 +80,6 @@ describe("InterceptData", () => {
             expect.objectContaining({
                 MY_HANDLER: {
                     fulfillRequest: fulfillRequest2Fn,
-                    shouldRefreshCache: shouldRefreshCache2Fn,
-                },
-            }),
-        );
-    });
-
-    it("should not change InterceptCache methods on existing interceptor", () => {
-        // Arrange
-        const fakeHandler: IRequestHandler<string, string> = {
-            fulfillRequest: () => Promise.resolve("data"),
-            getKey: (o) => o,
-            shouldRefreshCache: () => false,
-            type: "MY_HANDLER",
-            cache: null,
-            hydrate: true,
-        };
-        const fulfillRequestFn = jest.fn();
-        const getEntryFn = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        mount(
-            <InterceptCache handler={fakeHandler} getEntry={getEntryFn}>
-                <InterceptData
-                    handler={fakeHandler}
-                    fulfillRequest={fulfillRequestFn}
-                >
-                    <InterceptContext.Consumer>
-                        {captureContextFn}
-                    </InterceptContext.Consumer>
-                </InterceptData>
-            </InterceptCache>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                MY_HANDLER: {
-                    fulfillRequest: fulfillRequestFn,
-                    shouldRefreshCache: null,
-                    getEntry: getEntryFn,
                 },
             }),
         );

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

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {mount, shallow} from "enzyme";
+import {render, screen} from "@testing-library/react";
 
 import TrackData from "../track-data.js";
 import {RequestTracker, TrackerContext} from "../../util/request-tracking.js";
@@ -16,7 +16,7 @@ describe("TrackData", () => {
         jest.spyOn(Server, "isServerSide").mockReturnValue(false);
 
         // Act
-        const underTest = () => shallow(<TrackData>SOME CHILDREN</TrackData>);
+        const underTest = () => render(<TrackData>SOME CHILDREN</TrackData>);
 
         // Assert
         expect(underTest).toThrowErrorMatchingInlineSnapshot(
@@ -29,10 +29,11 @@ describe("TrackData", () => {
         jest.spyOn(Server, "isServerSide").mockReturnValue(true);
 
         // Act
-        const result = shallow(<TrackData>SOME CHILDREN</TrackData>);
+        render(<TrackData>SOME CHILDREN</TrackData>);
+        const result = screen.getByText("SOME CHILDREN");
 
         // Assert
-        expect(result).toHaveHTML("SOME CHILDREN");
+        expect(result).toBeInTheDocument();
     });
 
     it("should provide tracker function for tracking context", async () => {
@@ -41,7 +42,7 @@ describe("TrackData", () => {
 
         // Act
         const result = await new Promise((resolve, reject) => {
-            mount(
+            render(
                 <TrackData>
                     <TrackerContext.Consumer>
                         {(fn) => resolve(fn)}

package/src/components/data.js

@@ -1,18 +1,9 @@
 // @flow
 import * as React from "react";
 
-import {ResponseCache} from "../util/response-cache.js";
-import InternalData from "./internal-data.js";
+import {useData} from "../hooks/use-data.js";
 
-import InterceptContext from "./intercept-context.js";
-
-import type {
-    CacheEntry,
-    Interceptor,
-    Result,
-    IRequestHandler,
-    ValidData,
-} from "../util/types.js";
+import type {Result, IRequestHandler, ValidData} from "../util/types.js";
 
 type Props<
     /**
@@ -54,111 +45,10 @@ type Props<
  * requirements can be placed in a React application in a manner that will
  * support server-side rendering and efficient caching.
  */
-export default class Data<TOptions, TData: ValidData> extends React.Component<
-    Props<TOptions, TData>,
-> {
-    _getHandlerFromInterceptor(
-        interceptor: ?Interceptor,
-    ): IRequestHandler<TOptions, TData> {
-        const {handler} = this.props;
-        if (!interceptor) {
-            return handler;
-        }
-
-        const {fulfillRequest, shouldRefreshCache} = interceptor;
-        const fulfillRequestFn = fulfillRequest
-            ? (options: TOptions): Promise<TData> => {
-                  const interceptedResult = fulfillRequest(options);
-                  return interceptedResult != null
-                      ? interceptedResult
-                      : handler.fulfillRequest(options);
-              }
-            : (options) => handler.fulfillRequest(options);
-        const shouldRefreshCacheFn = shouldRefreshCache
-            ? (
-                  options: TOptions,
-                  cacheEntry: ?$ReadOnly<CacheEntry<TData>>,
-              ): boolean => {
-                  const interceptedResult = shouldRefreshCache(
-                      options,
-                      cacheEntry,
-                  );
-                  return interceptedResult != null
-                      ? interceptedResult
-                      : handler.shouldRefreshCache(options, cacheEntry);
-              }
-            : (options, cacheEntry) =>
-                  handler.shouldRefreshCache(options, cacheEntry);
-
-        return {
-            fulfillRequest: fulfillRequestFn,
-            shouldRefreshCache: shouldRefreshCacheFn,
-            getKey: (options) => handler.getKey(options),
-            type: handler.type,
-            cache: handler.cache,
-            hydrate: handler.hydrate,
-        };
-    }
-
-    _getCacheLookupFnFromInterceptor(
-        interceptor: ?Interceptor,
-    ): $PropertyType<ResponseCache, "getEntry"> {
-        const getEntry = interceptor && interceptor.getEntry;
-        if (!getEntry) {
-            return ResponseCache.Default.getEntry;
-        }
-
-        return <TOptions, TData: ValidData>(
-            handler: IRequestHandler<TOptions, TData>,
-            options: TOptions,
-        ): ?$ReadOnly<CacheEntry<TData>> => {
-            // 1. Lookup the current cache value.
-            const cacheEntry = ResponseCache.Default.getEntry<TOptions, TData>(
-                handler,
-                options,
-            );
-
-            // 2. See if our interceptor wants to override it.
-            const interceptedData = getEntry(options, cacheEntry);
-
-            // 3. Return the appropriate response.
-            return interceptedData != null ? interceptedData : cacheEntry;
-        };
-    }
-
-    render(): React.Node {
-        return (
-            <InterceptContext.Consumer>
-                {(value) => {
-                    const handlerType = this.props.handler.type;
-                    const interceptor = value[handlerType];
-                    const handler = this._getHandlerFromInterceptor(
-                        interceptor,
-                    );
-                    const getEntry = this._getCacheLookupFnFromInterceptor(
-                        interceptor,
-                    );
-
-                    /**
-                     * Need to share our types with InternalData so Flow
-                     * doesn't need to infer them and find mismatches.
-                     * However, just deriving a new component creates issues
-                     * where InternalData starts rerendering too often.
-                     * Couldn't track down why, so suppressing the error
-                     * instead.
-                     */
-                    return (
-                        <InternalData
-                            // $FlowIgnore[incompatible-type-arg]
-                            handler={handler}
-                            options={this.props.options}
-                            getEntry={getEntry}
-                        >
-                            {(result) => this.props.children(result)}
-                        </InternalData>
-                    );
-                }}
-            </InterceptContext.Consumer>
-        );
-    }
-}
+const Data = <TOptions, TData: ValidData>(
+    props: Props<TOptions, TData>,
+): React.Node => {
+    const data = useData(props.handler, props.options);
+    return props.children(data);
+};
+export default Data;

package/src/components/data.md

@@ -3,34 +3,36 @@ most folks will use. It describes a data requirement in terms of a handler, and
 some options. Handlers must implement the
 `IRequestHandler` interface.
 
-Among other things, the handler is responsible for fulfilling the request when
-asked to do so.
+The handler is responsible for fulfilling the request when asked to do so.
 
-#### Caching
+#### Server-side Rendering and Hydration
 
-The Wonder Blocks Data framework utilizes a core internal in-memory cache for
-supporting server-side rendering (SSR) and client-side provision of data
-obtained during SSR to support hydration of the SSR result.
+The Wonder Blocks Data framework uses an in-memory cache for supporting
+server-side rendering (SSR) and hydration.
 
-In addition to this internal cache, a custom cache can be provided by a request
-handler. Custom caches allow for different client-side caching
-strategies (such as using local storage instead of memory). Any custom cache
-provided is ignored during SSR.
+##### Server-side behavior
 
-When retrieving data from cache, the framework will ask the custom cache for its
-entry. If the custom cache returns an entry, that is used. If the custom cache
-returns `null`, the framework will look for a corresponding in-memory entry with
-which the framework has been initialzied, and if there, store the entry in the
-custom cache and then return it.
+###### Cache miss
 
-`removeFromCache` and `removeAllFromCache` methods are also provided for
-removing values from the in-memory and custom caches.
+When the `Data` component does not get data or an error from the cache and it
+is rendering server-side, it tells our request tracking that it wants data, and
+it renders in its `loading` state. It will always render in this state if there
+is no cached response.
 
-#### Client-side behavior
+###### Cache hit
 
-##### Cache Miss
+When the `Data` component gets data or an error from the cache and it is
+rendering server-side, it will render as loaded, with that data or error,
+as it would client-side. In this situation, it does not track the request it
+would have made, as it already has the data and doesn't need to.
 
-When the cache does not yet contain the data, the data must be requested.
+
+##### Client-side behavior
+
+###### Cache miss
+
+When the hydration cache does not contain the data, the data will be requested.
+While the request is pending, the data is rendered in the loading state.
 In this example, we use a 3 second delayed promise to simulate the request.
 We start out without any data and so the request is made. Upon receipt of that
 data or an error, we re-render.
@@ -103,21 +105,16 @@ const invalid = new MyInvalidHandler();
 </View>
 ```
 
-##### Cache Hit
-
-If the cache already contains data or an error for our request, then the `Data`
-component will render it immediately. The cache data is placed there either
-by prior successful requests as in the above Cache Miss example, or via calling
-`initializeCache` before any requests have been made. A cache hit may also
-occur due to the use of the `InterceptCache` component.
+###### Cache hit
 
-For the example below, we called `initializeData` data in our examples for
-that method. That way we'd have data ready for us here!
+If the hydration cache already contains data or an error for our request, then
+the `Data` component will render it immediately. The hydration cache is
+populated using the `initializeCache` method before rendering.
 
 ```jsx
 import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {InterceptCache, Data, RequestHandler} from "@khanacademy/wonder-blocks-data";
+import {Data, RequestHandler, initializeCache} from "@khanacademy/wonder-blocks-data";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -135,24 +132,21 @@ class MyHandler extends RequestHandler {
             "If you're seeing this error, the examples are broken and data isn't in the cache that should be.",
         );
     }
-
-    shouldRefreshCache(options, cachedEntry) {
-        /**
-         * For our purposes, the cache never needs a refresh.
-         */
-        return false;
-    }
 }
 
 const handler = new MyHandler();
-const getEntryInterceptor = function(options) {
-    if (options === "DATA") {
-        return  { data: "I'm DATA from the cache" };
+initializeCache({
+    CACHE_HIT_HANDLER: {
+        DATA: {
+            data: "I'm DATA from the hydration cache"
+        },
+        ERROR: {
+            error: "I'm an ERROR from hydration cache"
+        }
     }
-    return {error: "I'm an ERROR from the cache" };
-};
+});
 
-<InterceptCache handler={handler} getEntry={getEntryInterceptor}>
+<View>
     <View>
         <Body>This cache has data!</Body>
         <Data handler={handler} options={"DATA"}>
@@ -182,21 +176,5 @@ const getEntryInterceptor = function(options) {
             }}
         </Data>
     </View>
-</InterceptCache>
+</View>
 ```
-
-#### Server-side behavior
-
-##### Cache miss
-
-When the `Data` component does not get data or an error from the cache and it
-is rendering server-side, it tells our request tracking that it wants data, and
-it renders in its `loading` state. It will always render in this state if there
-is no cached response.
-
-##### Cache hit
-
-When the `Data` component gets data or an error from the cache and it is
-rendering server-side, it will render as loaded, with that data or error,
-as it would client-side. In this situation, it does not track the request it
-would have made, as it already has the data and doesn't need to.

package/src/components/intercept-context.js

@@ -8,8 +8,7 @@ import type {InterceptContextData} from "../util/types.js";
  *
  * INTERNAL USE ONLY
  */
-const InterceptContext: React.Context<InterceptContextData> = React.createContext<InterceptContextData>(
-    {},
-);
+const InterceptContext: React.Context<InterceptContextData> =
+    React.createContext<InterceptContextData>({});
 
 export default InterceptContext;

package/src/components/intercept-data.js

@@ -7,10 +7,9 @@ import type {
     ValidData,
     IRequestHandler,
     InterceptFulfillRequestFn,
-    InterceptShouldRefreshCacheFn,
 } from "../util/types.js";
 
-type BaseProps<TOptions, TData> = {|
+type Props<TOptions, TData> = {|
     /**
      * A handler of the type to be intercepted.
      */
@@ -24,9 +23,7 @@ type BaseProps<TOptions, TData> = {|
      * one).
      */
     children: React.Node,
-|};
 
-type FulfillRequestProps<TOptions, TData> = {|
     /**
      * Called to fulfill a request.
      * If this returns null, the request will be fulfilled by the
@@ -35,38 +32,11 @@ type FulfillRequestProps<TOptions, TData> = {|
     fulfillRequest: InterceptFulfillRequestFn<TOptions, TData>,
 |};
 
-type ShouldRefreshCacheProps<TOptions, TData> = {|
-    /**
-     * Called to determine if the cache should be refreshed.
-     * If this returns null, the handler being intercepted will be asked if
-     * the cache should be refreshed.
-     */
-    shouldRefreshCache: InterceptShouldRefreshCacheFn<TOptions, TData>,
-|};
-
-type Props<TOptions, TData> =
-    | {|
-          ...BaseProps<TOptions, TData>,
-          ...FulfillRequestProps<TOptions, TData>,
-          ...ShouldRefreshCacheProps<TOptions, TData>,
-      |}
-    | {|
-          ...BaseProps<TOptions, TData>,
-          ...FulfillRequestProps<TOptions, TData>,
-      |}
-    | {|
-          ...BaseProps<TOptions, TData>,
-          ...ShouldRefreshCacheProps<TOptions, TData>,
-      |};
-
 /**
  * This component provides a mechanism to intercept the data requests for the
  * type of a given handler and provide alternative results. This is mostly
  * useful for testing.
  *
- * Results from this interceptor will end up in the cache. If you
- * wish to only override the cache, use `InterceptCache` instead.
- *
  * 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
@@ -89,9 +59,7 @@ export default class InterceptData<
                     const handlerType = this.props.handler.type;
                     const interceptor = {
                         ...value[handlerType],
-                        fulfillRequest: this.props.fulfillRequest || null,
-                        shouldRefreshCache:
-                            this.props.shouldRefreshCache || null,
+                        fulfillRequest: this.props.fulfillRequest,
                     };
                     const newValue = {
                         ...value,

package/src/components/intercept-data.md

@@ -1,17 +1,14 @@
-Sometimes, you may want to generate tests that check the loading state and
-subsequent loaded state are working correctly for your uses of `Data`.
-So, rather than manipulating cache usage with `InterceptCache` you can
-manipulate request fulfillment and cache refresh using the `InterceptData`
-component.
+When you want to generate tests that check the loading state and
+subsequent loaded state are working correctly for your uses of `Data` you can
+use the `InterceptData` component.
 
-This component takes five props; children to be rendered, the handler of the
-type of data requests that are to be intercepted, and either a `fulfillRequest`
-method, a `shouldRefreshCache` method, or both.
+This component takes four props; children to be rendered, the handler of the
+type of data requests that are to be intercepted, and a `fulfillRequest`.
 
 Note that this component is expected to be used only within test cases and
 usually only as a single instance. In flight requests for a given handler
 type can be shared and as such, using `InterceptData` alongside non-intercepted
-`Data` components with the same handler type can have undetermined outcomes.
+`Data` components with the same handler type can have indeterminate outcomes.
 
 The `fulfillRequest` intercept function has the form:
 
@@ -19,7 +16,7 @@ The `fulfillRequest` intercept function has the form:
 (options: TOptions) => ?Promise<TData>;
 ```
 
-If this method is omitted or returns `null`, the default behavior occurs. This
+If this method returns `null`, the default behavior occurs. This
 means that a request will be made for data via the handler assigned to the
 `Data` component being intercepted.
 
@@ -66,98 +63,3 @@ const fulfillRequestInterceptor = function(options) {
     </View>
 </InterceptData>
 ```
-
-The `shouldRefreshCache` intercept function has the form:
-
-```js static
-(options: TOptions, cachedEntry: ?$ReadOnly<CacheEntry<TData>>) => ?boolean;
-```
-
-If this method is omitted or returns `null`, the default behavior occurs. This
-means that if `cacheEntry` has a value, that will be used; otherwise, the
-`shouldRefreshCache` method of the handler assigned to the `Data` component
-being intercepted will be invoked.
-
-```jsx
-import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
-import {InterceptData, Data, RequestHandler} from "@khanacademy/wonder-blocks-data";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-
-class MyHandler extends RequestHandler {
-    constructor() {
-        super("INTERCEPT_DATA_HANDLER2");
-        let _counter = 0;
-        this.fulfillRequest = function(options) {
-            return Promise.resolve(`DATA ${_counter++}`);
-        }
-    }
-
-    shouldRefreshData(options) {
-        return false;
-    }
-}
-
-const handler = new MyHandler();
-const shouldRefreshCacheInterceptor = function(options) {
-    if (options === "DATA") {
-        return true;
-    }
-    return null;
-};
-
-class SchedulableExample extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            stamp: Date.now(),
-        };
-    }
-
-    componentDidMount() {
-        this.props.schedule.interval(() => this.setState({
-            stamp: Date.now(),
-        }), 1000);
-    }
-
-    render() {
-        /**
-         * The key on the View is what causes the re-render.
-         *
-         * The re-render causes the `Data` component to render again.
-         * That causes it to check if it should refresh the cache.
-         * and that in turn causes a new data request that updates the value
-         * being rendered.
-         *
-         * Without the key to cause the re-render, no additional request would
-         * be made.
-         */
-        return (
-            <InterceptData handler={handler} shouldRefreshCache={shouldRefreshCacheInterceptor}>
-                <View key={this.state.stamp}>
-                    <Body>This re-renders once a second. On the render, the cache is refreshed and so we see an update.</Body>
-                    <Data handler={handler} options={"DATA"}>
-                        {({loading, data}) => {
-                            if (loading) {
-                                return "If you see this, the example is broken!";
-                            }
-
-                            return (
-                                <BodyMonospace>{data}</BodyMonospace>
-                            );
-                        }}
-                    </Data>
-                </View>
-            </InterceptData>
-        );
-    }
-}
-
-const Example = withActionScheduler(SchedulableExample);
-
-<Example />
-
-```