Jamming Project step 80

React jamming project https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-challenge-project-jammming/projects/jammming-prj

Hello, I am having a tricky time getting through the React jamming exercise. Specifically step 80 is Chinese to me…
It would be great if someone could explain this step by step as the walk-through video just repeats the code, but doesn’t really explain anything?

Thanks a lot!
Hanne

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

The authorization flows can take a while to understand well but the code will make more and more sense after obtaining access to a couple of other APIs in a similar way (you will likely do similar ones in other tutorials/lessons). I would also read the section about Implicit Grant Flow in Spotify API docs:
https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow

For Jammming, keep in mind that there are 2 functions (search and savePlaylist) that access the Spotify API. They need to have an access token to connect and get info from Spotify. Therefore, in the beginning of these 2 functions they call the Spotify.getAccessToken function to get the token. This function first checks if we already have an valid token in the accessToken variable. If not, the function proceeds to getting the token (covered in Step 80).

If the access token and expiration time are in the URL, implement the following steps:

  • Set the access token value
    Saves the access-token from the URL into the accessToken variable (declared on the top level of Spotify component). Having this stored in the accessToken variable means that next time we do a search or save a play-list, if we have a valid token, the function will not need to try to get a new one.

  • Set a variable for expiration time
    Takes the expiration time (which Spotify provides in the URL) and store it in a variable so we can use it later to erase the accessToken variable at the correct time.

  • Set the access token to expire at the value for expiration time
    Use the setTimeout JS-function to run code after a delay in milliseconds. Sets accessToken to an empty string at expiresIn * 1000 (we multiply by 1000 to convert from seconds to milliseconds).

  • Clear the parameters from the URL, so the app doesn’t try grabbing the access token after it has expired
    Once the function has the token and expiration-time, it is no longer needed in the URL and will be old information. window.history.pushState is used to erase these paramteres from the URL.

Also, if you look at the getAccessToken function (after it’s complete). You may notice that it needs to be called twice. First time it redirects to Spotify and gets a token in the URL. Seconds time it will move this token from URL to the state of the app. For this reason, you may have a small bug where you need to search for an artist twice initially to get any songs in the response. There are a couple of ways to solve this. It’s perhaps helpful to realize this when looking at the design of the function which gets access token.

Thanks Mike! I’m diving in again and trying to get my head around it with your outline.