rewrite FetchingProvider with Hooks

Author: oliverlaz

src/lib/FetchingProvider.js

@@ -1,112 +1,101 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-
 import { Provider } from './MessageSourceContext';
 
 const identity = x => x;
 
-export class FetchingProvider extends Component {
-  state = {
-    translations: {},
-    fetching: false,
-  };
-
-  mounted = false;
-
-  static propTypes = {
-    /**
-     * The URL which serves the text messages.
-     * Required.
-     */
-    url: PropTypes.string.isRequired,
-
-    /**
-     * Makes the rendering of the sub-tree synchronous.
-     * The components will not render until fetching of the text messages finish.
-     *
-     * Defaults to true.
-     */
-    blocking: PropTypes.bool,
-
-    /**
-     * A function which can transform the response received from GET /props.url
-     * to a suitable format:
-     *
-     * Example:
-     * function transform(response) {
-     *   return response.textMessages;
-     * }
-     */
-    transform: PropTypes.func,
-
-    /**
-     * Invoked when fetching of text messages starts.
-     */
-    onFetchingStart: PropTypes.func,
-
-    /**
-     * Invoked when fetching of text messages finishes.
-     */
-    onFetchingEnd: PropTypes.func,
-
-    /**
-     * Invoked when fetching fails.
-     */
-    onFetchingError: PropTypes.func,
-
-    /**
-     * Children.
-     */
-    children: PropTypes.node,
-  };
-
-  static defaultProps = {
-    blocking: true,
-    transform: identity,
-    onFetchingStart: identity,
-    onFetchingEnd: identity,
-    onFetchingError: identity,
-  };
-
-  componentDidMount() {
-    this.mounted = true;
-    this.fetchResources();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.url !== prevProps.url) {
-      this.fetchResources();
-    }
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  fetchResources = () => {
-    const { url, transform, onFetchingStart, onFetchingEnd, onFetchingError } = this.props;
-
-    this.setState({ fetching: true }, onFetchingStart);
+const initialState = {
+  translations: {},
+  isFetching: false,
+};
+
+/**
+ * A special <Provider /> which can load translations from remote URL
+ * via a `GET` request and pass them down the component tree.
+ */
+export function FetchingProvider(props) {
+  const { url, blocking, children, transform, onFetchingStart, onFetchingEnd, onFetchingError } = props;
+  const [{ translations, isFetching }, setState] = React.useState(initialState);
+
+  React.useEffect(() => {
+    let isStillMounted = true;
+
+    setState(state => ({ ...state, isFetching: true }));
+    onFetchingStart();
+
     fetch(url)
       .then(r => r.json())
       .then(response => {
-        if (this.mounted) {
-          this.setState(
-            {
-              translations: transform(response),
-              fetching: false,
-            },
-            onFetchingEnd,
-          );
+        if (isStillMounted) {
+          setState({
+            translations: transform(response),
+            isFetching: false,
+          });
+          onFetchingEnd();
         }
       })
       .catch(onFetchingError);
-  };
-
-  render() {
-    const { blocking, children } = this.props;
-    const { translations, fetching } = this.state;
-    const shouldRenderSubtree = !blocking || (blocking && !fetching);
-    return <Provider value={translations}>{shouldRenderSubtree ? children : null}</Provider>;
-  }
+
+    return () => {
+      isStillMounted = false;
+    };
+  }, [url]); // re-fetch only when url changes
+
+  const shouldRenderSubtree = !blocking || (blocking && !isFetching);
+  return <Provider value={translations}>{shouldRenderSubtree ? children : null}</Provider>;
 }
+
+FetchingProvider.propTypes = {
+  /**
+   * The URL which serves the text messages.
+   * Required.
+   */
+  url: PropTypes.string.isRequired,
+
+  /**
+   * Makes the rendering of the sub-tree synchronous.
+   * The components will not render until fetching of the text messages finish.
+   *
+   * Defaults to true.
+   */
+  blocking: PropTypes.bool,
+
+  /**
+   * A function which can transform the response received from GET /props.url
+   * to a suitable format:
+   *
+   * Example:
+   * function transform(response) {
+   *   return response.textMessages;
+   * }
+   */
+  transform: PropTypes.func,
+
+  /**
+   * Invoked when fetching of text messages starts.
+   */
+  onFetchingStart: PropTypes.func,
+
+  /**
+   * Invoked when fetching of text messages finishes.
+   */
+  onFetchingEnd: PropTypes.func,
+
+  /**
+   * Invoked when fetching fails.
+   */
+  onFetchingError: PropTypes.func,
+
+  /**
+   * Children.
+   */
+  children: PropTypes.node,
+};
+
+FetchingProvider.defaultProps = {
+  blocking: true,
+  transform: identity,
+  onFetchingStart: identity,
+  onFetchingEnd: identity,
+  onFetchingError: identity,
+};

src/lib/FetchingProvider.test.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import * as RTL from 'react-testing-library';
 import { FetchingProvider } from './FetchingProvider';
-import { withMessages } from './messageSource';
+import { useMessageSource } from './useMessageSource';
 
 describe('FetchingProvider', () => {
-  const Spy = withMessages(props => props.getMessage('hello.world'));
+  const Spy = () => {
+    const { getMessage } = useMessageSource();
+    return getMessage('hello.world');
+  };
 
   beforeEach(() => {
     // mock impl of fetch() API
@@ -48,10 +51,17 @@ describe('FetchingProvider', () => {
   });
 
   it('fetches text resources when url prop changes', async () => {
+    const transform = jest.fn(x => x);
+    const onFetchingStart = jest.fn();
+    const onFetchingEnd = jest.fn();
     function TestComponent(props) {
       return (
-        // eslint-disable-next-line react/prop-types
-        <FetchingProvider url={props.url}>
+        <FetchingProvider
+          url={props.url} // eslint-disable-line react/prop-types
+          transform={transform}
+          onFetchingStart={onFetchingStart}
+          onFetchingEnd={onFetchingEnd}
+        >
           <Spy />
         </FetchingProvider>
       );
@@ -62,7 +72,12 @@ describe('FetchingProvider', () => {
 
     rerender(<TestComponent url="http://any.uri/texts?lang=de" />);
 
+    await RTL.waitForElement(() => getByText('Hello world'));
+
     expect(global.fetch).toHaveBeenCalledTimes(2);
+    expect(transform).toHaveBeenCalledTimes(2);
+    expect(onFetchingStart).toHaveBeenCalledTimes(2);
+    expect(onFetchingEnd).toHaveBeenCalledTimes(2);
   });
 
   it('invokes onFetchingError lifecycle on network failure', async () => {