React Lyric Search App (Context API)

Lyric Search App With React & Context API [2] – Lyrics Page

[Music] what's going on guys so welcome to part two of this project it is a couple hours later but we'll get right back to where

we were so we have our tracks we're fetching them from the API if I reload we'll get a little spinner until we get the response back and then it loads all of our tracks so I think the next part

that I want to do I think we should take care of the lyrics page before we get into like the search and we dispatch to the context so that we can update the tracks let's let's just do the lyrics

component which will have its own route so let's jump into vs code and in the components folder in the tracks folder I'm going to create a new file and I'm gonna call it lyrics dot J s so this

will be its own component and it'll also be the the page for the route and the route is gonna be if we look at the track component you can see I have it go to lyrics slash track slash and then the

track ID okay so what we'll do is just create our lyrics component real quick which is gonna be a class-based component okay I'm just going to export this down here I think there's a way

that you can do this with the the extension I use but I haven't really looked into it if anyone knows let me know you know to do the export down here so for now let's just put an h1 here

let's say lyrics and save and then let's go to our app J s and we already have our router setup so let's bring in the lyrics component that we just created so we'll go ahead and bring that in which

is in the tracks tracks folder lyrics and the component name is lyrics as well and then we're gonna add that as a route so right here let's create a new route and the path is gonna be that path

I showed you which is lyrics and you can make this whatever you want of course but I'm going to just say lyrics slash track slash and then we're gonna do : ID okay so it's gonna be the track ID and

then the component that's gonna be loaded is not track it's gonna be lyrics alright so that should do it for the rope let me just check that make sure that's right yeah looks right so we'll

save it and now if we go back to Chrome oops I just reload it again and we click view lyrics now we have our lyric component okay now from here what we need to do is we need to fetch the

lyrics and the information for this particular track and the tracks ID is actually in the URL so that's how we need to grab it and with reactor out of 4 it's really easy it's actually in the

props it's like props dot match dot params and then dot whatever the / am its in this case it's ID so we'll go back to our lyrics component and finish this up now this is going to have it's

actually going to have some state this component some component level state which is going to be the track and also is going to be the lyrics okay but we're actually going to make two requests from

this component because if we look at the API and we look at get lyrics and we look at what it gives us back it gives us the lyrics body and of course like I told you in the beginning it's not the

full lyrics unless you pay them a premium but there's no information about the actual track here like the track name the artist name anything like that what we're gonna have to do is make a

second request to this end point right here track get which will get us all of that stuff okay so that when we have the lyrics page it's like if we go to the final project here we go to the lyrics

page we can have like natural which is the song name by imagine dragons which is the artist name we can have this other stuff too so we have to make basically two requests yeah two requests

from this component so if you guys are confused on why I'm using track and lyrics in the components state rather than in the application level contact state of the provider class it's because

I only need this information I only need this data for this particular component okay that's really where you want to separate your compose level state from your application level

state if you only need it in this one places there's no point in putting it into context J s the reason I have the tracks here of a tracklist I should say is because I'm gonna need this to change

based on the search component okay same thing with the heading once the the once we search for something the heading should change as well and we're going to be doing that from another component

okay so that's why I'm keeping this in in the component state so let's set up our component did mount because that's where we want to make our request from okay so basically when this lyrics

component loads we want to use Axios so let's actually bring that in so we'll import Axios from Axios and then down here we're gonna do actually what we could do is go to our context j s where

we made our last request and just kind of copy this so this Axios get we get the response will grab the catch so all that stuff we'll just grab that and put that right in the component

in mount now we want to hit a different end point because this end point is for chart tracks yet we don't want that we want what we want to get is the lyrics for a particular track and if we go back

to see right here so track dot lyrics dot get and we look right here this is the end points so it's track dot lyrics dot get and then it has a parameter of the track ID so i'm going to copy this

now the track ID is actually in the URL right here so we can actually grab that pretty easily so let's just replace from here where it says chart tracks and we don't need any of these parameters

except for the API key at the end so you just want to keep the ampersand api so we'll get rid of that and then paste the new endpoint in which is track dot lyrics dot get track ID equal

and we want to replace this hard-coded track ID with an expression or a variable which is going to be this dot props dot match dots params dot ID okay and what this is going to do is it's

going to get the ID parameter from the URL and that's the track ID because if we look at our track component that's what we passed in right here lyrics / track / and then we passed in the track

ID okay so let's see why API key should be all set as for the response let's see we're gonna want to I will console.log it but let's also let's see let's set the state you know what let's just

console.log it for now I'm going to comment this out and let's just save this and let's load up the lyrics page for one of the tracks okay so let's see this should be it so we're gonna get it

twice but the first one actually let me see lyrics alright so this actually did give us the lyrics why is it loading twice so I think this is coming from a different place

oh this is the tracklist that were we're still logging this I'm actually gonna go to context Jas and I don't want to log that out anymore so right here I'm just gonna comment that out because it's

getting a little confusing so this is what's coming back from the request for lyrics okay so we get the lyrics body we get some other stuff here like lyrics copyright

if it's explicit stuff like that all right so that's the external ear ixnay what about the track data like the name the artist name stuff like that so what we need to do is make another request so

we could do a couple things we could use Axios all but I'm not gonna do that I'm just gonna go right under let's see we want to go inside then Oh first thing we want to do is set the state right so we

got that stuff back I'm in the wrong file and I yeah we want to go let me just close all this up so we want to be in lyrics j/s okay so we want to put what we get back into the lyrics object

okay and just to show you one more time what we get back we get message body lyrics and then we get basically just an object with all this stuff so we want this to go into our component state

right here so I'm going to uncomment this set state and we're going to set lyrics and we're gonna set it to res dot data dot message dot body dot lyrics and that'll put that in the state okay and

I'm not gonna console.log this anymore we just want to put it in the state and then after we set the state we're actually gonna make we're gonna return another axe Yost request to get the

track data so it's a return and then actually I'll just copy this Axios so return Axios get I'm just going to put this up here yes so we want to do that except now we

don't want the lyrics we want the track info which will come from let's see comes from track get I believe is that right track yeah track get right here track dog get and then the track ID so

we can simply just change instead of track lyrics not get we just want to do like that track dog get okay now since we're returning this from this dot then the way that this works is we can just

put another dot then to get the results of that second call okay so we'll say dot then result and let's console dot log and let's log res dot data and see if that works so now we should log the

track data so if we go back and we take a look in the body there it is track okay so now we have access to like the artist name and all that stuff now we want to put that in the other piece of

State okay or the other value of state which is track we already filled lyrics right here so we want to do the same with the track so I'm gonna copy this set state and we're gonna go right in

here we don't need this console.log anymore so I'm just going to paste this in we're gonna change this to track and we want message dot body dot track okay so now

we're setting both of these track and lyrics and then we can do what we want with them in the render now we have this dot state track in this dot state dot lyrics they should be full with whatever

we get from the response so I'm going to use a little D structuring to pull pull those out of the states so we can just use those variables so let's say Const try

and lyrics we want to pull out of this dot state okay now we're gonna have the same issue had with the tracks component where we have to have an if statement and just load a

spinner before we actually get the response because if I if I do a console.log here of track inside the render and we go back you'll see just ignore this line here but you'll see

that it's empty at first okay so if this is if this object is empty then we want to show the spinner and then when we get the response back which is all this stuff then we want to display it in the

in the Dom here so we're gonna have to do another if statement we're gonna have to take into account both track in lyrics so I'm going to get rid of the console.log I'm also going to get rid of

the return and we're gonna say if we're going to check basically four things here we want to check if both are undefined so if undefined and we should be doing or so double what the hell

these called pipe characters and lyrics is equal to undefined or now to test and see if this is an empty object we don't want to do track equals like that that's not going to work because this is this

is not the same as as what's as this okay because it's not like a native datatype it's an object they're all different even though by looking at them they look the same this isn't going to

work so one way we can test to see if it's an empty object is by checking to see if there's if the keys if there's no keys okay because an object it's just key value right just just sets of key

values so to do that we can use object dot keys and we'll pass in the object with checking which is track actually we don't want this whole part right here so what checking these

undefined and then we're saying or object keys track dot length because we can check the length if it's equal to zero then that means it's an empty object okay or

and then let's just copy this because we want to do the same thing for lyrics because lyrics is also an object we just want to change this to lyrics and I'll save that and prettier will format it

and that's what the if statement should look like so it's just checking whoops I forgot to add equals zero so it's just checking to make sure that it's not an empty object and also that they're both

defined so let's see we have our if here we also want else so if it is an empty object what do we want to do we want to return our spinner right so let's say return our spinner component which we

need to bring in so up here we'll say imports spinner from we want to go outside of the Trax folder into layout and then spinner okay so we'll bring that in and then

else let's just test it out first by returning an h1 and we'll just say data will just say data returned all right so let's check it out we get our spinner when we get the data there

we go data returned okay so now let's replace this data returned we're gonna just do some parentheses and we're going to put in a react fragment okay and let's see inside this react fragment

we're going to have a we're gonna have a card with all the data but I also want a go back button so we're gonna need the link from react router so let's do let's import from reactor outer dom and we

want to import link okay so now down here let's put in a link tag to okay to is just gonna go to slash and then I'm just gonna style it a little bit give it a class name or a couple class names so

BTN BTN dark and let's do BTN s SM for small and then MB for so Mars some margin on the bottom okay and then inside here we're gonna just say go back okay so now I have a go back button and

then underneath that we'll go ahead and put our card so let's put a class of card class name whatever and inside here we'll have a card header class and this is where it's gonna say the song name by

and then the artist name now remember we can get this to track info with our track in our state and I don't have to do this dot state track because I use D structuring right here to pull it out so

we have access to just this track and then we have access to all the data that it gives us so track name is one of those and then we'll just simply say bye and I'm actually going to do a span here

let's do a span with the class of text – secondary which will just make it a little lighter and then in here we'll put track dot and then artist artist underscore name all right so let's save

that and let's go back okay so you say bye Lauren Daigle if we reload you can see the spinner until the data comes back and then it loads it good whoops what I do okay so like did I do the card

header no the card header should actually be an h5 thought that looked a little weird so this should be an h5 this card had are not a div so h5 okay and then underneath that h5 let's put a

card body okay so in this card body is going to be the lyrics and I'm going to put this in a paragraph with the class of card – text and then to get the lyrics we have access to lyrics and then

it's going to be dot lyrics underscore body so if we save that there they are okay and again we're not going to see all of them because we're using the free account so under that I just want to put

an unordered list with some just some stuff like the what are we putting the album ID although that's not really helpful but just to put some some other stuff that's available the song genre

stuff like that so let's go under the right here so you L will do a list group class and let's slice let's do a mt3 so margin top three just to move it move the stuff above it up and then we'll do

an Li class of list item this is just bootstrap list item group I'm sorry list group item and in here the first one let's do an album ID I'm going to put this in a strong tag so

I'll say album ID and let's put a colon and then we can get this using track dot lb ID okay let's put another list group item so we'll just copy that down now this one is gonna be the song genre

which is kind of tricky to get to and I'll show you why if I go ahead and console dot log track let's take a look at the response okay so we have primary genres if we look in that we have an

array called music genre list if we look in that we have an object that has another object called music genre and in there we have music genre name okay so we have to get to this music genre name

so this is going to be quite you know quite deep in the data structure so we want to do track dot and we want to do primary underscore genres okay then we want to go into music genre list which

is an array okay so we want it's an array we want the first item so the zero index then we want the music underscore genre and then that's an object and inside that object we want the music

underscore genre underscore name okay let's change the label here so this should be song genre okay let's try that out and there we go Christian and gospel

alternative alright cool and we get rid of that console.log now which is right here okay so what else do I want to do I want to do explicit words now it's going to give us a 1 or a 0 so

we just need to do a little conditional so let's add a list group item and let's go ahead and put in an expression here so we want curly braces we're going to say if track dot explicit if track dot

explicit is equal to zero then we're using a ternary operator here then we want to help put the string of no else which we use a colon then we want to say yes okay and then the last thing we want

to put is the release date so I'm going to say actually I can just go ahead and copy this so we'll copy this down and let's see how we're going to do this we're gonna put oh I didn't did I put a

label for the explicit I didn't did I right here we're gonna put a strong tag and say explicit explicit words all right so right here let's do strong and this is going to be the release date

okay so release date and we can get that with track dot what is it first released first underscore release underscore date all right let's check all that out all right

alternative explicit words no all right now release date we're getting it but it's very ugly looking I just want it to be like the the the month/day/year so I'm actually going to install moment

which is a time formatting package and then react moment to work with it in react so I'm gonna just stop the server real quick and say npm install moment and also react – moment and the moment

is very handy tool and very easy to use as you'll see when you want to format dates and basically any way you want so we'll start our server backup yes all right so let's go back to vs code now we

need to bring in a moment from react moment so up here we'll say import from react moment and we want to bring in we're gonna call it moment like that and then down where we have the date okay so

download we have the release date we just want to wrap this which is the date inside of a tag of a moment like that okay and then I want to format this in a certain way so we're gonna add a format

property here and we're gonna set it to you can do whatever you want I'm going to do month month / day day / year year year year so for for character year alright let's see if that works we'll

save it go back there we go 7/16 / 2018 awesome so that's our lyrics page cool so let's see what do we have left to do of course to search so we need to create the whole search component and then we

need to create some way to manipulate the state that's in the context so basically talking about these tracks so that when we search for a song name this updates with the response so that's what

we're gonna do in the next video and I will see you then

In this part of the project we will create the lyrics page by making a request to the Musixmatch API. This is video 2 of 3

Code For This Project:
https://github.com/bradtraversy/lyricfinder

React Front To Back (Full Course):
https://www.udemy.com/react-front-to-back/?couponCode=TRAVERSYMEDIA

Musixmatch Developer Site:
https://developer.musixmatch.com/

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
https://www.facebook.com/traversymedia
Posts by traversymedia
https://www.instagram.com/traversymedia