 Hey, how's it going? It's December 15th 2018 We're on react holiday day 15, so I'm gonna take 14 I am going to get out of Zen mode, and I am going to fork it That gives us a new project No, so with a new RL you can follow along if you want My goal today let's change this to 15 Now my goal today is to kind of catch up in the previous videos I had encouraged you to take the Pokemon data and make your own Pokemon with it Now I hadn't actually taken the time to do that yet So I need to do that and I figured that today since it's video only no email It'd be a good day to do that. I'm that way. I'm not rigorous hating a bunch of stuff via text. I Thought maybe if you wanted to you just kind of follow along and see how I Do all this stuff so we're on day 15 and the goal is is that we want to change This Pokemon component the Pokemon detail right now. It is only doing it's only displaying the name So that's where we're gonna be working today. I'm gonna put this back into Zen mode Which just gives us a little bit more space And kind of recap what this component is doing So this component is the Pokemon detail it takes a Pokemon ID and that changes it to ID Locally for the scope of this component and then it creates a local Variable named Pokemon which reads from a resource now. We're using the this resource here and We have a create resource which we import from react cache now It's unstable currently. So that's why it's unstable. We're aliasing it to create resource for the scope of this module Okay, so we are using it as What does it create resource? I'm not what create resource does is that it takes an ID and We're and we're calling it with an ID. So it takes that ID It will then do a fetch it uses a template literal string to fetch that URL We start with one so it'll be Pokemon.co slash api slash v2 slash Pokemon one So that gets this dollar sign and curly braces interpolates it out when in these template literal backticks We then take that once that's Resolved we'll take that as JSON now. We're delaying this right now from the previous lesson for 1500 milliseconds and that was just to illustrate a point That if you um that you can separate the loading states of these things. So as I click around We we see this loading state, but this all stays in place. So I can actually take that out now So I'll take both of those out because um, I'd like to have this refresh as quickly as possible each change that we make Now once we have Pokemon And we've read that from the resource. We have access to all the data. So we're using Pokemon that name currently Now, um I had showed you also in a previous video that we can use this restless client built into chrome So I need to keep track of time. We're going to go for coffee in a little bit. Um, so, uh, we can use this restless restless client to actually explore this, um, api which is very cool. So, um Basically, I'm just using this URL that I've been given. So the poke api URL number one And I'm going to hit send and that's going to go and get all of the data So these are the headers that we get back. I'm not super worried about that What I want is the body. So we'll collapse the headers And to give us more room and actually hide that And we can collapse all these down to be just the root level elements Now, um, I thought it'd be kind of fun to have you something else as a model Instead of just trying to pull out all the stuff on my own So I thought I'd go to the official The pokemon company international pokemon.com slash us slash pokedex And then I clicked on Bulbasaur So I wanted to see what of these pieces of data that they show Are available, um to us via our api and see how many of those sections I can recreate So we're going to do that now. I'm I'm going to talk through the process But it might not be as heavy teaching as the other videos. It's just going to be kind of me Going through it So let's see what we got. So first there's like a slight description. So I want to see if that's in our In our api Forms games indices default Okay, so it looks like that's where the images are Um, so that'll be handy. I don't see a description. So that's fine. We don't need one um versions Doesn't look like that's in there. These will definitely be in there. So let's see. So we have height Um, and what I'm probably going to do is I'll probably create a section for this And um, so in our article we have the name I'm just going to divide everything up by section Okay, and then um, I'll have another section um See this might be like a It's not really a table um Let's maybe use like a definition list um I can never remember how this is supposed to be. It's like definition term. I think it is and Definition definition, which is just hysterical. It's such a weird api Um, so this is going to be what was it height weight gender So this will be pokemon Dot height Let's see height is seven. Do we have a weight yet 69? So We'll copy this change that to weight Okay, seven 69. Um, obviously these are different or measured differently than The data that they have. I don't know if I need to convert that or not, but we'll find find out. Um gender category and ability Let's see if we have those in our api um height Name, Bulbasaur species. Um, doesn't look like we have a gender at least not here. Um Category species. Nope the stats and abilities Okay, so overgrown. Oh, that's pretty cool Okay, so abilities are in here and this is an array of data Which means we have multiple abilities. Um, so, um, that's actually a good thing. So We'll see how will we do this? um I don't know if technically in a definition. Well, let's see. We'll do this. So first of all, so we'll do abilities And um, I don't know what the semantics are for definition terms if they can only be one or if you can have kind of Like a list like we have. Um, so right now we'll do abilities of Zero just to get the first one Um Abilities, so okay, so we have abilities and then inside of it We have an object with an ability and a name got it. Okay, so abilities of zero dot ability Dot name Cool. Um, so then if we change this to one, um, that would be overgrow Perfect. So we're just reaching the abilities array and then grabbing that data. So now, um, I'd like to And maybe we can put like an unordered list. I'm so bad with uh With with markup, but maybe we can put an unordered list inside of our definition list and um Change this so we'll call map on that and we'll take each um ability and we will return um A list item Which we will whoops Use the api that we had Which is the ability dot Name But because we have to call it through this object. It's going to be ability Ability dot name. Do I get that right? Yes. So now we see Uh chlorophyll and overgrow as an unordered list. Um, now that uh seems kind of funny So we can actually do something where we um can Destruct oh my gosh My fingers. Um, we can Structure ability off of this because we know that this is an object Um, so we can say okay, we know that ability is an object Can you give me just the ability? Property of that that object Um now when we do that we we have to put these parenz around it Um because you gotta um, so when you're using this kind of this function syntax You have to put these rent parenz around it now. We can delete this other ability Um So we're saying for each item, which we know is an ability object Grab the ability property and then use that for this Um, so we have name and url. Okay, so that's where like when you click this You're getting the extra data So I can check that out And see that this is information about chlorophyll. I think yeah, so ability 34 This pokemon seed is double here. Wait, let's see so overgrow power up grass type Moves when pokemon is in trouble um So wait, let's go It's a way to go back easily history Okay, cool Continue Um, so let's see if this text matches what we expected And pokemon has three one third Boy grass moves influx. Okay, cool. Yeah. I mean it's relatively the same Um, and then these are I guess divided up by language. So that's really nice Um history. Okay, so let's go back to our pokemon. We'll we'll uh Figure that all out all later Okay, so we've got the ability. Um, that is cool Um Awesome, uh, what's another thing? So that is that section or at least everything that we have in terms of the details for that that section In our api. Um, so let's take a look at type. Um, I assume that that is going to be available for us um We'll make a new section um Actually, what was this name? Okay. Yeah, so we'll say age two type and Yeah, so let's go back to our api. So type types cool. So there's two slots poison and grass perfect. Okay, so we got that um So we'll do unword list Just say yeah, so we'll do unword list Um, and again, uh, you're gonna see this a lot. I mean, I do this a lot in my work. So um I don't uh, let's see. What am I doing? pokemon types Dot map We're going to pull off Um for every object that we get in that array. We're going to pull off a type And then we will return a list item with type type dot name Close that list item up Um, and it's pissed at me about something Make sure that's how the api works. So type. Oh, it's a slot. No, wait. No, that's right types type Name types type name types map type type name Ah, I was Doing something funky there There we go Okay, I'll hit save and then I'll reformat. Um, just to get it looking right again. Okay, so cool So we have types now. Um, I just want to show you real quick if I tap this now. This is going to change Um change all the details. So this is going to work for for every pokemon that we have. Um, Okay, cool. So That's good. I know that it's not pretty. We'll we'll talk about styling in the in the coming week for certain Um weaknesses, let's see if that's what we got in our api Wait, so it's definitely not called weaknesses in our api Um, we have some moves. So that's interesting Stats, okay, so it looks like we don't have an api Or at least not that I can tell for weaknesses. So we'll skip that section um And we will go into stats um Which we do have so Let's dive into stats. We'll make a new section. I'm h2 stats um You know, I'm not sure what the final form of this will be but um You know, it actually kind of looks like a a table Uh, so why don't we why don't we do a table? um We'll see One thing that you have to remember in react, which is kind of funny is um, you have to put a tea body Um, I've we've had this experience in the past where if you don't put a tea body It'll put these elements not in the right place. So I don't know if that's Something that is able to be fixed. I think you just have to remember to put a tea body Um in there. So see I think it's tea head All these old apis are a little funky Um, actually, I guess it's actually Um in the footer So why don't we put that Okay, so um the way these work is that they work in rows with table data Um, so again, I'm just going to do the first one and then kind of see how I would uh make it actually Um Kind of codify it. So the first one. Let's look at our api. We have stats and um, so the first stat has a Let's see So they it looks like maybe just have the Looks a little different unfortunately So we need stats object base stat stat object name Um, so stat pokemon stats first item dot stat Nope Dot name Okay speed we got speed here. Okay, cool. So What we would do is we would likely put that up here and call map and For each stat object we would pull off stat Um table row table data table data Table row What I do wrong again with that that paran right there. Um, okay, so this is destructuring the object Um, I have a closing here Um What is that error then? What whoops state I do spell state a lot in react apps. Um, let's format that um, okay, so That's not actually what we want. I think I actually want that here table T Foot I think we still do table rows, but no table data So mdn's my go-to for all this stuff. So foot table row um table heading totals 2100 hmm I guess one table heading Let's try it Every once in a while you get to see me suffer and that's special for you um Oh, maybe no, nope. Yeah, we want just One row I keep thinking columns. We just want one row and then we want all of these There we go. There we go. Okay, cool. So now I have each of these in columns or yes Each is in their own column In this row perfect Um, now the question is how do we get that to match up? Uh in the body So we're gonna have a table I guess let's just copy and paste this and see what happens No here we would right. No, that's not right Really seen me struggle today. Okay, so, um, let's see. So we want, um Yeah, I think that's right then Okay, so now we just need to get the actual data. So we're gonna use base stat for that. I think Yes, base stat base perfect. Yeah, so, um 45 speed 65 defense 65 special attack 49 defense. I think that all matches up A hit points. Yeah 45. Okay, cool. Awesome. So now we have a staff table. That's great Um, we can close that Um, our stats are here. Perfect. Um, now, I guess the last section is evolutions and do we have that? um forms Bulbasaur name order species sprites interesting, so it looks like we don't have the Evolutions available to us. I do know that they go in order. So like the next couple are Bulbasaur, but not everyone has like the same number of evolutions. So, um We might have to kind of construct that on our own. Unfortunately um Bummer, okay, so it looks like we have a lot of data, but it's like different data than um, then this this endpoint that we have um Okay, cool. Well, whatever. Uh, we can deal without that. Uh, let's get a picture of him so Right at the top We are going to and this will probably be the last thing that we do image You can almost never remember the api for image. Um alts Okay So where is our image? These are in sprites. Um Let's just do the front default. So do Uh sprites front default So this will be pokemon sprites front default Excellent um alt text Uh, we will use some interpolation here Uh, we'll do Pokemon name Oh my gosh, what am I doing here? There we go. That's what we need Um, okay, cool. So we have an image. We have the name. Um, let's make that Bigger up here Okay, so we have the name. We have the image. We have um the height weight um abilities list type Um and some stats awesome Now let's see. Um, so yeah, I think that's I think that's pretty good for today. Um, that's uh, that's that's a pretty good run. Uh, thanks for watching Um tomorrow, I'm not sure what we do if you have any questions about anything that I did today Um, feel free to ask those or anything that happened in the previous week And tomorrow I'll make a video um for that, but um, you know for right now I think that's a pretty good pretty good start on my pokemon and we'll learn how to style it. Thanks