CODEWITHSUNDEEP
javascriptreactjsaxiosinterceptor
8-Bit Borges
8-Bit Borges

Reputation: 10043

ReactJS - axios interceptor onSubmit

Structure:

ApiService.js
components/
          TrackComponent.jsx

TrackComponent.jsx

I have this form in my React in render() that triggers an event that hits one endpoint:

<form onSubmit={ (event) => this.handleEditPlaylist(event) }>
 <div className="field">
   <input
     name="artist"
     className="input is-dark is-large"
     type="text"
   />
  </div>
</form>

handle function:

handleEditPlaylist(event) {
    event.preventDefault();
    const formType = this.props.formType
    var headers = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    const {userId} = this.props
    const data = {
      value: this.state.formData.value,
      spotify_token: this.props.spotifyToken
    };
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/handle_edit_playlist/${this.state.artist}/${userId}`;

    axios.post(url, data, {headers: headers})
      .then((res) => {
        console.log(data);
        if(data){this.clearForm();}
      })
      .catch((err) => {
    });

    axios.get(url, { 
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
      }).then((res) => {
          console.log(res.data);
          this.setState({
            seeds: res.data.data[0].seeds,
            artist: res.data.data[0].artist,
          })
      })
  };

This works.

Api instance inside component

Now, I have this axios interceptor that must me instantiated in my component above, in order to handle access tokens, which have two endpoints.

import Axios from 'axios';

class ApiService {
  constructor() {
    this.axios = Axios.create();
    this.axios.interceptors.response.use(null, this.authInterceptor.bind(this));

    this.get = this.axios.get.bind(this.axios);
    this.post = this.axios.post.bind(this.axios);
  }

  async authorize() {
    console.log('Async in authorize')
    const { accessToken } = await this.axios.post('/get_token/1', {});
    this.setAccessToken(accessToken);
    return accessToken; // return it to the component that invoked it to store in some state
  }

  async getTrack(userId, spotifyToken, artist) { // <---------------------------
    console.log('getAroma in ApiService', userId, spotifyToken, artist)
    return this.axios.get(
      `${process.env.REACT_APP_WEB_SERVICE_URL}/get-tracks/${artist}/${userId}/${spotifyToken}`
    );
  }

  async updateAccessToken(userId) {
    const { accessToken } = await this.axios.post(`/refresh-token/1`, {});
    this.setAccessToken(accessToken);
  }

  (...)

export const apiService = new ApiService(); // this is a single instance of the service, each import of this file will get it

I would like to have the same onSubmit event above trigger the interceptor instantiation call as well. On its own, I could do like so:

import {apiService} from '../ApiService';

async getTrack(event) {
    if (this.props.isAuthenticated) {
      const {userId, spotifyToken} = this.props;
      const {artist} = this.state.artist
      const aromaticTracks = await apiService.getTracks(userId, spotifyToken, artist);
      this.setState({newTracks});
    } else {
      this.setState({newTracks: []});
    }
  }

If I insert this async getTrack in handleEditPlaylist, right after form is submitted, like so:

(...)

axios.post(url, data, {headers: headers})
      .then((res) => {
        this.getTrack(); // <----------- HERE
        console.log(data);
        if(data){this.clearForm();}
      })
(...)

I get 'undefined' for form submitted values (artist) in async getTrack console.log('getTrack in ApiService', userId, spotifyToken, artist), but print the value submitted in console.log(data) right bellow..

How do I properly handle this interceptor onSubmit?

Upvotes: 1

Views: 107

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282160

The only issue in your code is because you are trying to destructure a value from state which you are already accessing 

async getTrack(event) {
    if (this.props.isAuthenticated) {
      const {userId, spotifyToken} = this.props;
      const {artist} = this.state; // this needs to be this.state and not this.state.artist
      const aromaticTracks = await apiService.getTracks(userId, spotifyToken, artist);
      this.setState({newTracks});
    } else {
      this.setState({newTracks: []});
    }
  }

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Read the documentation for object destructuring

Upvotes: 1

Related Questions