0

I want to make HOC with axios handler so i don't need to handling all possible feedback from response (404,200,401, response, etc)

here's my withFetchingAxios:

export default (Component)=> class extends React.PureComponent{

  constructor(props) {
    super(props);
    this.state = {
      response:null,
      error:'',
      isLoading:false
    };
    this.makeRequest = this.makeRequest.bind(this);
}

  async makeRequest({method='get', url, data=null, config=null}){
    console.log(method , url, data, config)
    try {
      this.setState({isLoading:true})
      AxiosInstance[method](url, JSON.parse(config), JSON.parse(data))
      .then((res) => {
        this.setState({response:res.data})
      })
      .catch((err) => {
        this.setState({error:err})
      })
      .finally(() => {
        this.setState({isLoading:false})
      });
    } catch (err) {
      console.log('err withFetchingAxios' , err)
      this.setState({error:err, isLoading:false})
    }
  }

  render(){
    if(this.state.isLoading){
      return(
        //show loader component
      )
    } // else if error show component error,
    return(
      <Component
        {...this.props}
        response={this.state.response}
        makeRequest={({method='get', url, data, config})=>this.makeRequest({method, url, data, config})}
      />
    )
  }
}

and i just used it in my other component like Home:

export default withFetchingAxios(class Home extends React.Component{

  /**
  * List function to handling component
  */

  componentDidMount(){
    this.props.makeRequest({url:'posts'})
  }

  /**
  * List function to render component
  */

  /**
  * End list function to render component
  */

  render() {
    return(
      //Home UI
    )
  }
})

but i got infinite loop from console.log in async makeRequest() function in HOC,

how do i avoid it and just let HOC call makeRequest() once?

i need to handle HOC to have an ability like:

  1. Call HOC when didmount if axios method is get
  2. Call HOC from onPress event if method is post
flix
  • 1,688
  • 3
  • 34
  • 64
  • 1
    what you got: 1) `Home` `componentDidMount` call `makeRequest` 2) HOC `this.state.isLoading` = `true` 3) HOC `if(this.state.isLoading){` - unmount `Home` component 4) the result of the request came 5) HOC `this.state.isLoading` = `false` 6) HOC `if(this.state.isLoading){` - mount `Home` component 7) `Home` again `componentDidMount` call `makeRequest` – Nikita Madeev Aug 11 '20 at 08:26
  • hhmm, should i add `shouldComponentUpdate()` to check `isLoading state` @NikitaMadeev? or is there any recommended way to handle it? – flix Aug 11 '20 at 08:32
  • 1
    You can transfer logic to display the loader to `Home` component or display loader without unmount component (example overlay) – Nikita Madeev Aug 11 '20 at 08:32
  • let me try to add Modal in HOC `` and handle loading/error from it, thank you @NikitaMadeev – flix Aug 11 '20 at 08:36
  • another option to transfer `componentDidMount` (with request logic) to `HOC` component – Nikita Madeev Aug 11 '20 at 08:36

0 Answers0