Lyric Search App With React & Context API [3] - Search

Key Takeaways

[Music] what's going on guys welcome to part three of our lyric finder application so in the last video we took care of the lyrics page so if we click on View lyrics it should send out a request to the musiXmatch API and send us back somewhat of the lyrics not the whole thing because it's just the free account but we should get all this data back for that page now what we need to do is add the search component okay because I mean this the application as it is now it's pretty stupid because it's just these 10 songs and that's it we want to be able to search for songs to get the lyrics from so let's see we're gonna first just kind of build the component out the form and all that stuff so let's go into components and into tracks and create a new file and we'll call it search jas okay so this is this search j/s is actually going to be a class based component so I'm gonna use my vs code extension and do our CC tab and we'll keep it at search we're just going to move the export default down to the bottom here and we're gonna export search which is the name of the class okay now this this is a form right so it only has one field now when you work with forms and react most of the time you're going to want each field to have its own its own piece of state so let's add some state here and we're gonna have track title okay that's going to be the the input and then the name of this this state so whatever we type in all right and then the render now we're gonna we're going to be using context for this right because what we're doing is let's actually go back to the finished one is once we we search here it's gonna queer going to have a function that that calls right we're going to send a request to the API to search for a list of tracks that match whatever we put in here and then we want to replace these tracks with those tracks okay so we have to manipulate our global state that has the tracklist to have the new tracks in order to do that we need to basically connect the search component to the context and we do that using a consumer just like we did with the tracks okay and like I said before it I think of it kind of like connect if you've ever used Redux whenever you're going to use your global state in Redux you bring in connect well when you're using context API you bring in a consumer from from your context okay we're also going to be using Axios so I'll just get that out of the way and import that as well okay and then we want to import just like we did in tracks we want to import consumer and that's gonna be from our context file which we can get to by just dot dot slash and context right so no we want to dot dot slashes there we go okay so now that we've brought in the consumer in order to do anything with it we need to return the consumer down here okay just like we did in tracks if we look at tracks you can see we returned consumer and then we also had this value now we're not we're not bringing in the tracklist from here but we are gonna have a method in our state called dispatch to basically dispatch an action to our context so we do in fact need this value okay so we're gonna set it up just like we did here by saying return why isn't my mouth working so we're gonna say return consumer let's say consumer and this is going to take in this takes in nothing I don't know why I keep thinking it does all right so consumer and then we put in our curly braces with value and we go like that okay so again this value is going to include the entire state because that's how we set it up in context J s right here it's going to include the entire state and I'm gonna add to that in a minute but I just want to kind of get this the search UI the component UI showing before we do anything so let's yeah let's return here and we're gonna return a card let's say div class card it's also will also do card body and let's do an mb yeah what was at margin bottom 4 and also a padding for p4 I don't care what anyone says I love bootstrap I know that some people like to [ __ ] on it because you got to do everything custom but classes like this I just they make things so much easier so unless your UI your design is really really important that I don't I don't see why not to use bootstrap you know and of course this application looks very bootstrap II but we could style it much differently and I do have a bootstrap course on udemy where we create some themes that aren't so bootstrap II alright so in here let's see we want to have an h1 I'm gonna give it the class of display - 4 and we also want to Center it so text the center and this is going to say actually gonna have an icon so let's do an I tagged FAS and then FA - music it's our icon next to it we're gonna have search for a song okay and then under the h1 let's put a paragraph with the class of lead so just make it a little more prominent a little bigger we also want to text center it and in here I'm just gonna put get the lyrics for any song okay so let's just save this for now I just want to get this displaying now remember this is gonna go in the index component because the router if we look at our routes the home route points to the index component so that's what's showing up so let's go to index and let's bring in our search okay we already brought in tracks let's bring in search okay and then we'll go down here and we'll put the search right above the tracks okay just like that and just see that's not it there it is okay so at least the search is showing we didn't put the form in yet but that's fine at least this is showing in the index so let's go back to search and continue index should be all set so we can close that up so under the paragraph here we want to put our form we don't need an action and in our form let's put a form group class and we'll have an input field here and this is going to have a class of form control and let's do form - control - LG for large okay so that'll format it let's see input type text good we want to put a placeholder so placeholder let's say song title dot dot I'm just gonna have pretty or format this alright so placeholder let's do a name so the name is gonna be track title okay and you want the name to be the same as the state for this input so this track title should match this name and I'll show you why in a second what do you probably know but value we're gonna set to the state so this dot state dot track title okay and then actually let me just let me just show you something real quick that most of you know if you've dealt with react but if I go and I try to type in here I can't okay it's not letting me because this is what's called a controlled component so the state is linked to the input of this so we need to actually have an event listener for a change event and on change meaning when we type in it that fires off an on change event and then we need to set the state to whatever is typed in here okay so whenever you hit a key that should reach that should set the state to whatever you put in okay or whatever is in this input so in order to do that we need to add an on change event and we're going to set it to a function called this dot on change okay so let's take care of this first so we'll go up here and we'll say on change now and I explain this in my react course a little more but if you want to actually I'll just show you let's do on change and this will take in an event parameter okay and then let's do let's change the state so this dot state I'm sorry this dots set state okay so we want to set the state we want to set the track title and we want to set it to the value of that's being typed in which we can get from a target dot value okay whatever we type in is going to come in as this so we're setting the track title to whatever's typed in so let's see what happens if we just leave it as as is okay so we're gonna open up our console here and don't mind that that little warning right there and if I start to type we get can't read property set state of undefined so what that means is that this set state it can't read this of undefined so it's saying this is undefined now what you could do is you could bind this you could go down here and you could say dot bind and you can pass in this and save and now if we go back cannot read property value of undefined he dot target odd value what am I missing here [Music] this thought said state he'd target dog value on change what the [ __ ] track title oh i misspelled target sorry about that happens but now it works alright now if you don't want to have to do bind this for all of your inputs all you have to do get rid of that and all you have to do is change this to an arrow function by simply putting equals and then an arrow okay if we do that it'll work okay and it doesn't give us that that error now another thing that I want to change here is instead of saying track title I mean this works we're setting this track title but what if we had a bunch of input forms here we wouldn't want to have to do a separate on change for each one and then have the name of the and have the you know the state value or the state key I should say here so what we can do is just make sure that your state key for that input matches the name like I said earlier and then you can simply go like this you could put in some brackets and you can say e dot target dot name okay and what that's gonna do is it's gonna look at that name field what did I mess up here so it's gonna look at that name field and it's going to use that so it'll still be track title but it'll get it from the name but that way even if we had other inputs we could still use this same on change and it would just take whatever that name of that that input is so let's save this and go back and make sure we can still type in here good and if we want to take a look at the react tools which we haven't done in a while let's see so we'll go to our search component which is in the router it's in here index and search all right so to take a look at the state so track title is whatever is in here and every time we type as I delete you can see that that state changes okay so every single keystroke is changing the state of track title okay so let's finish up the UI here whoops and let's let's add the button because we haven't done that yet so I'm sure that most of you guys that are following along probably already know this stuff about react but just in case you know for the ones that don't so let's see we want to add a button which is gonna go where it's gonna go under the form group so it's a button let's give it a couple classes BTN BTN - primary give this thing some color BTN - LG make it large so a large input large button let's make it a block level element so it goes all the way across and let's do an margin bottom five okay and we want to do type submit' so that it actually submits the form and then we'll say get track lyrics and I believe that should do it let's take a look here what's this Axios is defined but never used so that's because we haven't used it yet all right so let's take a look there we go looks good alright so now what we can do is start to work on typing something in and making our the request to musiXmatch which if we go to the documentation you'll see track dot search okay so that's why can I open it there we go so that's what we want to work with and you can choose different parameters to add as well this is the end point and it'll give us a track list just like the chart track that we use to get the top ten okay so we just want to replace our state our contact state our provider state I should say with that okay so we're going to need to run that on the form submit so we're gonna need a function on our form so let's say on submit and then we'll say this dot form submit actually let's make it more specific let's call it find track okay because that's what we're doing is we're finding tracks all right yeah so fine track and let's go up here and create that so find track and we're gonna make it an arrow function okay we want to add just add an event parameter now since it's a form submit we want to prevent the default from happening okay we don't want the form to actually submit to a file so edad prevent default we'll do that then we want to make our request so I'm gonna copy the request from the context I'm just going to copy this whole thing and let's paste that in okay so the endpoint let's see we don't want chart dot tracks we don't want that we want to search so we're gonna do search dot track know what is it track search so you know what let's just get rid of everything except the API key and then we'll just grab it from the documentation so I don't screw anything up so right here let's see track dot search and then you have a queue a query queue artist except we're not doing the artist we're doing the track so up here you can see cue track is one of the parameters the song title you can also search by artist artists there's a lot you can do with this API you could build a pretty a pretty extensive application and it might be worth it to actually pay and build some kind of really cool production app so let's see um even though we're using truck cue track instead of cue artists I'm still going to just copy this as this is there searching for Justin Beaver hard-coded so they have horrible taste in music but that's okay most people do these days so let's go ahead and paste that in right there okay so we get track dot search and we want instead of cue artists we want cue track because we're not searching artists and then instead of Justin Bieber we want this to be a dynamic value so I want to put in that syntax now to get this the track this is actually what's in State right track title so it's whatever is in the in the input whatever we type in so all we have to do is simply say this dot state dot track title alright now let's see the rest of this page sighs I want to do ten I want ten results page one that's fine s track rating de Scruton descending I think that's like how close it matches or something like that I'm not exactly sure but we'll keep it as is and then that should be it okay so then down here let's get rid of that and let's just console.log and see what we get so let's see res dot data see what that gives us okay save that and let's search for let's actually go to our console and we'll search for the end forgiven and get tracks ok we get something back let's check out the message the body and we get an array of ten values and they're all the tracks that match the unforgiven okay so now's the hard part now is the hard part to explain because we need to basically like I said replace these tracks with these 10 tracks that we're getting back from our search so we're gonna have to change the content I'm sorry the context J s file a little bit we're actually gonna have a little reducer so if you if you've used redux before this will look pretty familiar if you took my react course this will look pretty familiar but we're gonna go into context J s okay and let's see how do I want to do this so our state remember our state gets passed down to any consumer which in our case is the tracks component and the search component I want to add a value of dispatch okay so dispatch is actually we're gonna set this up to be an arrow arrow function we're gonna say action whoops action arrow and then say this dot set the state and then we want to set state to a reducer function and then pass in the state and the action okay so this is going to allow us to have a reducer where we can call this dispatch from any consumer component to manipulate the state okay and do what we want in our case we want to replace the 10 tracks with whatever we search okay so now that we've done that let's go up above we'll go above the class of the provider class and let's create a reducer okay and this is where do this is going to be an arrow that takes in state an action okay just like right here we're just creating this this method right here so let's say state action and then we want to set that and just like in redux we're going to evaluate the action type okay we're actually gonna send along a type so to do that we'll put in a switch and this should look very very familiar if you know Redux and you don't know the context API so we're gonna say switch I almost I've been creating a Python course so I almost just did that so let's do switch action dot type ok so the action is going to be an object with a type and we're going to evaluate that and we're gonna say case ok so if the case is search underscore tracks oops it's a plus sign if the case is search tracks then we want to return our object and we'll use the spread operator to get whatever is in the state but then we also want to change the tracklist this is where we're actually changing the tracklist to be whatever is in the action dot payload ok the response we get back in the search component we want to send as the payload ok and then let's see we'll also change the heading to a string of search results we'll just hard code that ok let's see so after that we just want to default default is just going to return state what did I do wrong I get some kind of syntax error because of that ok so save so now from our search component we want to call this dispatch ok and we want to send along in action with the type of search tracks ok we also want to send along a payload which will be the response we get and set that to tracklist and also change the heading ok so I think we should be good here and yeah so remember dispatch will get sent along right here because we're sending the value is going to include the entire state which includes that method why is this a different color so I missed something up here stay dispatch action should work should be good okay so let's go back to search so we already we should have access to dispatch inside of this value in fact why don't we do this why don't we console dot log value and see what that gives us okay when the page loads so this is what it gives us let's look here and we have our tracklist our initial tracklist our heading and you see our dispatch function okay it's doesn't it's not going to tell us much it's a function it's not you know it's not data so we know that we have access to the dispatch okay so let's go back I can actually close up the final project here so let's go back to our search component and now that we know we have that dispatch available to us where do we want to run this okay we want to run this when we submit the form because we want to submit the form make the request get the response and then dispatch that back to the reducer okay this reducer here right here so we need to pass that valid that dispatch from the value into the fine track function so the way that we can do that is go down to our I should say up to the form right here on submit fine track and we want to pass in dispatch from this value all right so let's see yeah let's actually let's use some destructuring here and just let's pull out dispatch from that value okay I hope you guys understand what's going on here okay this is coming from our global state which has the dispatch I'm pulling the dispatch out from the value and then I want to pass it into the forum fine track function so that we can use it so the pass it in we're gonna say dot bind we're gonna pass in this first and then dispatch okay and then up here for fine track we want to pass in dispatch as our first parameter and then the event wrap parenthesis around that and now we should actually have access to the dispatch function inside of fine track okay so now when we get our results I don't want to console.log it what I want to do is call dispatch and dispatch is going to take in an object which as I said is gonna have a type of search underscore tracks and it has to have a payload and that payload is gonna be that response kay it's not going to just be res dot data but we want the actual tracks which is going to be in message dot body dot track underscore list okay so that's the payload we're sending to the reducer in the context okay so once we submit the form it should send out get our response from musiXmatch get the ten tracks and send that as a payload okay and that should be received right here and then we're setting the tracklist which is the tracklist in the global state right here to the new tracks that have been searched we're also changing the heading to search results alright so hopefully that works I think that I think I got everything so we'll give it a shot so let's go ahead and say the unforgiven and get tracks and there we go it works alright cool so oh one thing I want to do is clear this out after we search so we'll just kind of reset the state so if we go to search j/s and let's see so fine track we make our request make our dispatch and then let's go down here and let's say this dot set state and we'll set the whoops we'll set the track title to nothing all right see if that works so the unforgiven all right so that clears out good search for something else was there searched for Thunder okay we get imagine dragons ECDC some other people I haven't never heard of if we click view lyrics should take us to the lyrics page which today is just taking much longer and there we go alright guys so our application is complete I hope you liked this series and this this little project as far as deployment and just like any other react app maybe github pages maybe I'll do I think I'm actually going to do a tutorial on github pages because it's it's a service that's just so easy to use to host front-end websites and applications and a lot of people don't know how to use it and there's actually a command line tool called gh-pages that makes it really easy but that's it guys hopefully you liked it if you did please leave a like and I will see you next time