|
1 | | -import React, { Component } from 'react'; |
| 1 | +import React, { useState, useEffect } from 'react'; |
2 | 2 | import renderQueue from 'util/renderQueue'; |
3 | 3 |
|
4 | | -const hocFactory = propName => WrappedComponent => |
5 | | - class PromiseWrapper extends Component { |
6 | | - constructor(props) { |
7 | | - super(props); |
8 | | - this.state = { loading: !!props[propName] }; |
9 | | - } |
10 | | - |
11 | | - componentDidMount() { |
12 | | - if (this.props[propName]) { |
13 | | - this.handlePromise(this.props[propName]); |
14 | | - } |
15 | | - } |
| 4 | +const hocFactory = (propName) => (WrappedComponent) => (props) => { |
| 5 | + const [state, setState] = useState({ |
| 6 | + loading: !!props[propName], |
| 7 | + value: null, |
| 8 | + error: null, |
| 9 | + }); |
16 | 10 |
|
17 | | - componentWillReceiveProps(nextProps) { |
18 | | - if (nextProps[propName] && nextProps[propName] !== this.props[propName]) { |
19 | | - this.setState({ loading: true }); |
20 | | - this.handlePromise(nextProps[propName]); |
21 | | - } |
22 | | - } |
23 | | - |
24 | | - componentWillUnmount() { |
25 | | - this.promise = null; |
26 | | - } |
| 11 | + useEffect(() => { |
| 12 | + let isMounted = true; |
| 13 | + const promise = props[propName]; |
27 | 14 |
|
28 | | - handlePromise(promise) { |
29 | | - this.promise = promise; |
| 15 | + if (promise) { |
| 16 | + setState((prevState) => ({ ...prevState, loading: true })); |
30 | 17 | renderQueue.add(promise); |
| 18 | + |
31 | 19 | promise |
32 | | - .then(value => { |
33 | | - const callback = () => renderQueue.remove(promise); |
34 | | - if (this.promise !== promise) { |
35 | | - callback(); |
36 | | - } else { |
37 | | - this.setState({ value, loading: false }, callback); |
| 20 | + .then((value) => { |
| 21 | + if (isMounted) { |
| 22 | + setState({ value, loading: false, error: null }); |
| 23 | + renderQueue.remove(promise); |
38 | 24 | } |
39 | 25 | }) |
40 | | - .catch(error => { |
41 | | - const callback = () => renderQueue.remove(promise, { error }); |
42 | | - if (this.promise !== promise) { |
43 | | - callback(); |
44 | | - } else { |
45 | | - this.setState({ error, loading: false }, callback); |
| 26 | + .catch((error) => { |
| 27 | + if (isMounted) { |
| 28 | + setState({ error, loading: false }); |
| 29 | + renderQueue.remove(promise, { error }); |
46 | 30 | } |
47 | 31 | }); |
48 | 32 | } |
49 | 33 |
|
50 | | - render() { |
51 | | - if (this.state.loading || this.state.error) { |
52 | | - return null; |
53 | | - } |
54 | | - const props = { ...this.props, [propName]: this.state.value }; |
55 | | - return <WrappedComponent {...props} />; |
56 | | - } |
57 | | - }; |
| 34 | + return () => { |
| 35 | + isMounted = false; |
| 36 | + renderQueue.remove(promise); |
| 37 | + }; |
| 38 | + }, [props[propName]]); |
| 39 | + |
| 40 | + const { loading, error, value } = state; |
| 41 | + |
| 42 | + if (loading || error) { |
| 43 | + return null; |
| 44 | + } |
| 45 | + |
| 46 | + const newProps = { ...props, [propName]: value }; |
| 47 | + return <WrappedComponent {...newProps} />; |
| 48 | +}; |
58 | 49 |
|
59 | 50 | export default hocFactory; |
0 commit comments