All right.
So once we have our global state and once we made our default values available all throughout our application
by using the used state hook line, setting up the object with the properties that are equal to our
values, whether AD is get up user repos and followers.
Now, of course, we can finally start working on the components.
On the first component that I would want to work on is not the search, not the nav bar.
Because for the search, eventually you would want to of course, set up my friends request.
So I think that just makes a little bit more sense once we're done with our static components, meaning
the ones that just display the data.
And then once we are ready to set up our functionality, then, of course, we'll also set up our search
component as well as the Navar, because for Navar, we need to have the authentication provider.
So again, we'll leave those two for now alone and we'll start working with our info.
So the one that displays how many reposts we have, the followers following and the gists.
Now we can start doing that.
My first I guess I'm gonna close all my files cause my tabs are getting really busy and I'm looking
for my info address.
The one that we finished in the previous video.
And then in my component, instead of looking for the whole data, I already know that I can to structure
it.
Correct, because I have a giant object in that object.
I have a good user.
So instead of looking for the data, I'm going to say, yeah, I'm getting back some kind of object.
So I'd want the structure from that data, a GitHub, GitHub user, and then I would want to structure
more things from that user.
So let me first the structure, those things, and then I'll show you where you can find them.
If you're still confused.
So I'm going to vote counts.
That is gonna be equal to my get up user.
And then I'm looking for three things or I'm sorry for.
So I'm looking for public repose.
That's the property and followers.
And then following and then also public online underscore gists.
So these are the four things that we're looking for.
And of course, you can console log all of them.
But I'm just gonna go public on this score or EBOs.
Now where I can find this data.
Well, if you use one of the you are L's.
And I guess in this case, more correctly would be if you use the you are all looking to navigate there.
The API GitHub users and then forward slash the user name.
If you use this, you are real.
This is the information you're gonna get back.
Meaning those properties are on that object.
So if I check it out.
The users and non hyphen was boss.
This is the object that we're getting back and the properties are following where again, I'm looking
for the repos, the followers and all that.
So notice followers, just the name of the property.
Then the same goes for public repose for public, just as well as what was the fourth one?
Well, I don't remember anyway.
So we have the info where I'm looking for public rebo followers following and public.
Yes.
And also, if you want to double check whether those properties there, of course, you can use the
mark repoll Awana recopying person because please keep in mind, we copy and paste the same thing.
OK.
So we're just pulling out the properties that we know are on that object.
And in our case, since we're looking for repulsed followers following an while, that's why we're pulling
out of that object.
And once we have pulled them out.
Now I want to set up some kind of array.
Why?
Well, because if I'm looking at what I'm getting display now, this is pretty much going to be the
same thing.
Only thing that's gonna change is the icon.
I'm also gonna change the color of the icon.
And, of course, some data.
Correct.
But everything else should be exactly the same.
So I think it's gonna be easier if we set up some kind of array with this date.
Of course.
And then we can iterate over that data.
We'll set up one more component in the fall for each and every item that we have.
And then, of course, we'll render it because you'll notice that we have all our says already.
So let's first start by setting up our.
All right.
Now, I'm going to call these items not as my array in each and every item in that array is going to
be an object.
So I have array of objects.
And as far as the values, well, I'm gonna have a property of an I.D. because we already know that
if we have list of items, we need to have a key prop and then it needs to have a unique value.
And I'm just gonna go when I need this case.
Then the second property is going to be an icon.
So what icon I would want to display.
And you'll notice at the top that I already imported the icons I want on display.
So have the icon property.
And that is going to be equal in the first case to a go and then repoll.
And then I'll add here a class name of icon.
So that's my second property.
Then I would want to display the label.
So what is going to be my value?
And by the way, I need to close out my go repoll icon.
So the value is going to be repoll Vacek repos.
Sorry.
More correctly.
So I'm going to have a label here.
And the value is going to be repos.
Then I would also want to have the actual value.
And this is the one that's coming from my get up user.
So that's the one that's gonna be changing when we perform the fetch request.
And when we update the user value in our get up contacts.
But at the moment, of course, it's hardcoded.
And the property name is gonna be value.
And this is equal to a property that we're pulling out, of course, from our giddap user.
And last thing is gonna be color and yes, please, if you want to use my styling, use the same classifiers
because you'll notice that in the styled component they match.
If I have a class of pink.
This is exactly what I have here.
So if you don't like name, of course you can change it.
And you can also name change in the wrapper in the style component.
That's up to you.
But if you want to follow along.
Exactly.
Then use the same class name and you can change it later if you want.
So this is going to be my first item.
And now, of course, if I'm looking at I have three more.
So we just need to selected one copy and paste and just change these values.
So we have a commas and all that is good.
And then for the second one, of course, the I.D. is going to be number two.
The icon name will be F.A.A. or I'm sorry if I guess users the label is going to be followers.
Followers.
So when the value, of course, is not going to be public repose.
So they're gonna be followers.
Followers.
That's the one that we're pulling out of the gate of user.
And as far as the styling, the class name will be green.
So that's our second one.
Then for the third one idea of three.
That's not a surprise as far as the icon we're going with F I.
And then use Zeus and nine plus icon names does the same label.
We'll be following.
So the text that we're displaying is going to be falling.
The value is going from the get up user.
So we're going with a following.
And as far as the styling, we go we purple.
All right.
And the last one is ideal for than the icon.
We'll be g o.
And then just class name stays the same.
As far as the label we go with, just the property we're looking for is public record just the last
one.
Of course he is our styling, which is the yellow one.
So that's our setup.
Now at the moment it says if I users plus is not defined.
All right, let's see.
It is user.
My podgy so known honors the icon that I imported as the name of f our user plus not users.
That's why it's so important.
Have the same exact syntax.
OK, good.
So once we have this array now where we are displaying the items, I would want to iterate over them.
And of course display them.
So we start by setting up my section.
Now this is again using a global class in the class name.
We'll be section and then within this section.
This is where I would want to display my styled components wrapper.
But I also want to add a global class name that is going to be a section center.
So that's my class name section.
But of course, this is my style.
Components component.
This is responsible for all the local styling, but I'm still adding a little bit of extra global styling.
So I have my items there.
Right.
And of course, now I'd want to iterate over them.
So we go with items on a map and then each and every item, of course, is accessible by setting up
the parameter.
In my case, he is the item.
And then we just need to decide what we would want to return for the time being.
I'm going to return a paragraph.
So let me go with a paragraph and I'm going to say item.
Serried.
And we should have four items.
Why not?
Because we have four items in our.
All right.
And for the time being, we're just displaying the program.
But of course, we would change that.
And the way I'm going to set this up, I'm going to have another component in here.
Now, we could set this up in a different file.
That's, of course, up to us.
But in this case, I'm gonna go in the same file where I'm here.
So, yeah, there's going to be a item component and it's going to be looking for four things.
Since eventually I'm just going to pass in this item, object directly in the item component.
And from there, I would want to pull out the icon, the labeled value on the color.
So let's do that.
We're gonna go with icon label.
Label value and then the color.
So these are the things that are coming from the object.
And now we just need to work on our return.
So if, say, we're returning a article.
I'm sorry.
Not area.
Article on line for the article.
I would want to add a class name so I have a little bit of styling.
And then one by one.
Let's display those things.
So there's going to be a span with a class name.
And now I'm accessing that color.
So the color that I'm setting up in the object.
So whether that's purple, green or yellow, I'm setting up or here.
So I sent class name and that is going to be my color.
That's why in the style component, whether I'm going to have paint green or whatever.
Wow.
Well, that's how I'm going to change the color.
So I'm saying your last name and depending on that value, on that string value, that is going to be
the class name.
And as far as the value in a span, I'm just going to place the icon.
So whether that is go just or whether that is going to be if I use her plus that is going to be my icon,
then of course, I would also want to have a div here.
They have land within that live.
There's gonna be two things.
There's going to be a value.
So whatever I have value for my value property.
And the second one is the label.
So in here, let's have a paragraph.
We a value of a label.
Again, these are the things that we're passing in at the moment.
Of course, we're not the wonderingly item.
That's why nothing happens.
But if I change this around from the paragraph and I say, yeah, you know what?
I would want to render my item instead item here, I'm here.
And then remember, we needed to have a key prop for the list.
And in order to have that, I'm gonna go with item I.D..
And then in order to pass all these properties here directly in the item, I'm going to use the spread
operator.
Where I know that item, of course, is my object.
Correct.
And.
I can just say dot, dot, dot.
So I copy all the properties that I have in the item without his icon labeled value and color.
And that's how I pass them to my item component.
I do structure them right there and then in my parameters and then of course I display them.
So the moment we separate notice, we have very balls.
We have the followers following all that.
So if we go to a bigger page, this is what we should see.
We have not bar search and all that.
But we also have nicely reposed followers following as well as the gist.
And as we're going to be performing the search course, we'll change these values again at the moment.
These are default values.
These are static values that we have in our mock data.
Then we pass that mock data to our give a context using the U.S.
State hook.
We set them up as that values.
Then we pass them to our info using.
Of course, our giving up context.
We pull out that info first.
We get the good Abuzer.
Then we get these specific properties that are on that object.
And I showed you where you can get that.
We set up items, some kind of array with some nice values that we would want to use.
And then, of course, eventually we just iterate over that array.
We have some kind of component that is responsible for rendering.
We pass in using these print operated.
And of course, eventually we'll just have some kind of styling, including these class names that change
whether or not his pink, green or purple.
And that's how we can display the information about the user, whether that's repos followers, Pawling
or Tigist.