How To Use Spotify's API With React

so i heard your request today we're going to learn how to use spotify's api with javascript specifically with react let's get started what's going on guys i am back another day another video so i read your previous comments on my last javascript video how to use spotify's api with javascript it was requested that i make a similar video but using react so this video will be how to use spotify's api with react very unique right we'll be calling spotify's api with react which is still javascript but it's react so yeah now unlike my last video i won't go through the process of creating a mock-up because the end results will be exactly the same the only difference is that everything will be done using react versus with vanilla javascript now both projects are available on github and i'll supply the link below in the description as you're watching the video please leave a comment let me know if the tutorial is working for you and or maybe you have a different approach i like to hear that too also it would be great if you please share this video and share the channel but that's enough talking so let's get to work i've already gone through the process of running my npm npx commands i run the standard mpx create react app command that said i removed some of the boilerplate files that get generated so that you can get the essence of how to create the app from scratch you can use whatever http client you want but i'm going to use axios so i installed that package just like the last video i'm using bootstrap for styling so you'll want to install that package as well additionally you'll also need to install jquery and popper js to utilize bootstrap's javascript components in your app also notice that i'm importing the bootstrap css as my first dependency in my index.js file first thing we'll do is import react in our app.js file because we're going to be rendering this component to the dial again we're doing this project in react hooks so we'll only be using functional components if you like class components well sorry we'll create a functional component called app where we'll return some basic jsx the look for jsx is very similar to html jsx essentially tells react what the ui should look like we're going to render some test data just to ensure everything is running correctly we're going to import the app component into our index.js file as this file will mount our app we run npm start and our message displays correctly here's our mock-up even though i said i wasn't going to do a mock-up but i'm not creating it in front of you so it's already made but yeah our mock-up is going to have two drop downs a submit button a clickable list box and a detail section for the track now even though this is a small app and we won't have a bunch of sections with it it's still good to make child components in places where we can reuse functionality that said since the drop down functionality will be similar we'll create a component to handle that we'll create a component to handle our list box functionality as well as a component to handle our detail functionality a functional component is just a javascript function that accepts props as an argument and returns a react element so what i'm going to do is i'm going to go ahead and code and then i'll explain afterwards what i did my just like any javascript function we can create various objects or variables inside so we'll create an array of objects that will pass to our jsx we'll use the standard javascript array map method to iterate through the array and create a select option per name value pair notice how this method call is placed inside the curly braces in react curly braces are used to evaluate javascript expressions they can contain anything from method calls to calculations if you notice we use the index supply from the array map method as a key for each option obviously there's no key property on a standard html option element keys are needed whenever you want to render list to the dom they basically help identify elements in the list we then import our drop down into our app.js file [Music] let's make sure this works and it does cool right now we're populating our drop down from inside of our dropdown component that will change when we access the spotify api we'll actually receive the data as a prop from the app component we'll go ahead and update the app component to pass data to the dropdown component you'll notice that we created an array of objects in the app component we added a property called options to the drop down component inside the dropdown component react automatically passes us an object called props that contain the properties we declared on the dropdown component from within the app.js file we can then access those properties in our jsx eventually we'll want to trigger an event more specifically an api call whenever the change of it fires on the drop down we'll need to have a reference to the drop down selected value we can maintain and access that selected value using state and react react state allows you to basically manage information from within a component and seeing how this is a react hooks video will be utilizing the u state hook try saying that five times fast to utilize the u-state hook we first need to import it in the u-state hook is a name export so we'll need to place the exact name inside of curly braces use state is a function that returns exactly two elements the first element is a snapshot of the current state meaning it's either the initial state or the updated state after the component re-renders the second element is a function that allows you to update the current state using javascript rated structuring we can access the current state and the function returned from the used hook also be sure to initialize the state we'll call our update state method whenever the change event fires on the drop down and we'll store our drop down selected value just to show that we are successfully storing our selected value we'll render it inside of a p tag that looks pretty good our component is now using state to manage its own data we'll go ahead and add our button but we'll write further code for that later we'll place an empty function into the onsubmit so we don't get compile errors so i'd imagine if you're watching this video it's a good chance that you saw my first javascript video how to use spotify's api with javascript in that particular video i explained how we're going to connect to spotify we'll use the client app credentials authorization flow now what do you know we're going to use the same flow for this video so i'll go ahead and give you a minute go ahead and jump to that video to get those details that was a joke i wouldn't make you watch a whole nother video just so i can get more views i wouldn't do that yeah just kidding i wouldn't do that yeah so let's go over the information now we're going to go ahead and review our api calls so with this particular flow we're going to be using a spotify supply token to send to the various api endpoints when you first register your app with spotify they'll give you a client id and a client secret our first api call will be to actually receive the token which requires that we send that client id and that client secret in an http post request so during our page load we'll call the api to retrieve a token once that token is received we'll immediately make another api call to receive a list of categories we'll use those categories to populate our genre drop down list after we select the genre we'll call the api again to get a list of playlists for that genre finally after we get our playlist or after we select the playlist we'll click the submit button and we'll go out and retrieve a list of tracks for that playlist and that'll be the last of the api calls now all the data we receive from spotify will be stored and or manipulated so we'll be using the use state hook to handle that as i stated previously i'm going to use axios to handle our http request after the token is returned we'll store it in state technically we could call the api directly in the function body but that would actually be problematic let's see what happens when we do that notice how our app component kept rendering this actually makes sense because when we call the u-state function it will trigger a re-render of the component which then causes re-execution of all the code inside the component which means we keep calling the token api basically an infinite loop that is obviously bad we can fix this situation by utilizing the use effect hook by default use effect will fire after the html form render has finished loading and it will fire after every re-render the advantage of use effect is that we can also dictate when it fires by providing what react refers to as a dependency in react a dependency will tell the use effect function to fire if the dependency is changed the use of effect function receives a function and a set of dependencies by way of an array that will dictate when it should fire if we provide an empty array we'll tail react to only file the use effect hook one time as you can see our component is rendering correctly our first render occurs during page load followed by another runner that's triggered when we initialize the use stay hooked use effect executes and we call the ustay update function once we receive the token in turn it causes everything to re-render which is why we see four log statements you'll also notice that we receive a warning stating that use effect is missing dependencies client id and client secret those are considered dependencies because while they are declared outside these effect function we are using inside of it now the set token function was declared outside however because it's a use state function react treats it differently to where it never really changes and in turn doesn't have to be considered a dependency eventually we'll go ahead and add our client id and client secret as dependencies although they'll never really change after we get the token we'll pull a list of genres that will be passed to our drop down again we'll start all of our api data and state you can initialize the state value to basically anything the genres will be an array so that's what we'll initialize our state to we make a git call to the categories api endpoint and supply the acquired token in the http header notice that the header type is authorization and we are supplying a bearer token we update our options property to receive genre stored in state notice how we didn't have to change anything in our drop down all the previous functionality still works which is made possible because the drop down component only houses functionality within its own scope it simply receives data and makes use of it currently we were having the drop down managers on state so when we make a selection the selected value renders itself inside the p tag what we want to do is retrieve playlists for a given genre we could add a use effect hook directly inside of our component have it fire when the genre is selected and store the api playlist inside the drop down state but if we were to go that route the app component would essentially need to ask the drop down component for the drop down state so that it could access the return playlist and pass into the playlist drop down on the app component i know that was a lot so i hope that made sense now while this is possible it's not ideal because code can become difficult to understand and the probability of bugs increases what's better is to have the app component store the entire app state handle the api calls and limit the drop down functionality to simple rendering data and or receiving props this concept is called lifting state up we'll now need to have state manage the selected genre in addition to the array of genres the selected state will now be set by passing an app component method down to the drop down component as a prop we'll also pass the selected value as a prop we create a change of it handler inside the dropdown component that receives an event and calls the method received from nav component we will also remove all the state-related calls in turn this is now referred to as a stateless component now that the selected genre is stored we'll make another api call to put a list of playlists for the selected genre we'll populate our playlist drop down and we'll use code very similar to what we did for populating the genre drop down let's take a look crap it doesn't work so let's see what's going wrong we'll take a look at the dev tools we'll go to the network tab and we'll click on our request to view the response specified id does not exist it's complaining about the genre id that we are passing to the playlist api call ah here's the issue we were previously using a value as the option value of our drop down but there's no key in the api results that call value it should be called id cool looks good real quick forgot to set the change event on the playlist drop down make sure you don't forget that now we want to get a list of tracks for the selected playlist but this time we'll use a button click event to trigger the api call when we click the button we'll call the api to pull a list of tracks and populate a list box component that the user can click on we'll create a new component to hold the tracks now i hope that you guys are getting just a little bit more comfortable with functional components right because if not that means i suck [Music] so hopefully i don't suck we'll pass our tracks data as props to our list box let's check it out so that looks pretty good well actually visually it looks like crap because we actually haven't added styles yet but i'll do that later on but the key is that functionality is working correctly so that's most important lastly we want the user to be able to click on the list box item and view track details for that item what's cool is that we really don't need to call the spotify api in order to view track details that information was also included when we pulled the list of tracks in our previous api call we still need to manipulate and save track data so we create a state variable for that as well when we click on the list box item we get the selected track id because we set that to be the id of the actual button we then use the spread operator on our track state variable to create a new list of tracks after which we use the filter method to find the track containing the track id matching that of our button id lastly we store the track information inside of our track detail state variable now we'll create one more component to hold the detail information by the way i forgot to update the list box component to call the click event method it received from the app component so be sure to do that or you will freak out hey we've introduced somewhat quote-unquote new syntax here when we created our detail component we're passing our track object to the track detail component but we're using the spread operator with it in turn the properties or key value pairs of the track object are extracted for us this allows us to use object destructuring in our component where we can access the actual property name directly pretty cool right i'd say this came together pretty nicely even though it looks like crap right now i'm going to go ahead and add the styling so this can look halfway decent you can stick around and watch although that kind of sounds inappropriate or you can skip ahead but whatever you do please don't leave it won't take me long so i'll be right back don't be afraid don't be afraid uh um so we actually finished our app the styles have been added it looks pretty good it's actually working which is most important and it was completely done in react so i hope that this video was helpful i hope it was better than the last tutorial i did because i should be getting better please feel free to leave comments on the video let me know your thoughts let me know if there's another tutorial you'd like me to do until next time i appreciate you guys for stopping by please continue to like subscribe comment hit that notification bell icon all that jazz and i will see you on next time

Channel: Avery Wicks

Views: 17,339

Keywords: Spotify's API, how to use spotify's api with javascript, how to use spotify's api with react, how to use spotify's api, learn spotify api, react hooks, use state hook, using spotify api with javascript, using spotify api with react, spotify, spotify api, api with react, api, functional components, javascript function, javascript array destructuring, useState hook, software development, coding, coding in javacript, coding in react, React development, coding for beginners, react

Id: fVcz-1rVQcs

Length: 21min 38sec (1298 seconds)

Published: Mon Oct 19 2020