Hopefully by now, we already know the drill, we navigate back to our people online.
I'm going to clear my integrated terminal and of course, I'm going to be looking for a project, something
more specifically the of Boulder.
So City, we've got random person.
And then I grab the setup folder.
And once we're here, we're going to go with NPM Install to get all our dependencies.
And of course, we'll also start to start up our dev server.
As far as the setup, I already provided the icons.
So if you take a look at the source and objets more specifically, because there's going to be some
imports, so we're going to have our icons as well as the URL.
So this is the URL that the external API provides, and I'm going to cover this.
You are in more detail in NextRadio when we're going to talk about the external API and then also I
have a default image.
So eventually, of course, we will get all our images from the API.
But for a default one, I would want to display something.
And even though we can use whichever image we would want, you'll notice that I just used one of the
endpoints that the API provides.
Essentially, when we're getting those around users, of course, we get all kinds of images.
So in this case, I just set up the URL that points to one specific one.
Keep in mind, you can use whichever image you want, so that's going to be our default image.
And then, of course, we would want to work on our general structure.
And I think I'm going to start in this case by setting up all our state values and we're going to have
four.
So since we're putting there, there's going to be one for loading while we're loading.
And then we'll also go with set loading, of course, and then we're going to use state and by default,
it is going to be true.
Then also I'm going to have the person.
So that is going to be the person that I'm currently displaying.
So person here and then we're going to go see that person and that one will be equal to now.
So you state of mind, the default value will be no.
And also I would want to go with title value const title and set title, and I will be equal to use
state and by default I would want to have it as a name.
And this value will control what we're displaying here.
So notice how I have my name and then some kind of value.
And then I have email, page and street, of course, the phone and a password.
So the title will be right here in the middle and of course we'll change it depending on which icon
we are hovering over.
And I'm going to navigate back.
That is my title by default is going to be name.
I'll copy and paste.
And I just want to change this one around where it's not going to be title.
We're going to go with a value like so, and that one will be by default a random person.
So say here a random person.
Eventually we will set up our search function to get the data that is coming up in the next video and
also have a user factor.
And also I we want to set up a function that we're going to call every time we hover over the icons,
not the moment.
It is just going to be a placeholder.
So we're going to say here constantly handle value and I'm going to be looking for everand object.
That's why I'll pass any and and here I can just go with E and then DOT Target just so I can see whether
my functionality works.
So that should be our initial set up in our component.
And then, of course, we can start working on the return.
So again, it's not just going to be a heading to it's going to be Maytag's over here.
And then instead of the Maytag's, there's going to be a deal with a class of block and BCG black.
So two classes, BCG and then hyphen black.
And right next to Dev, there's going to be a with a class of block.
So we're going to go here only the block once I serve.
That's something that I should say.
I have two blocks essentially inside of the second block.
This is where I would want to set up my user.
So the user is going to be in there with the class of container.
And I would want to start with my image.
And like I said, eventually, of course, we'll get this from the random user API, but for the time
being is just going to be a default, an image like so.
And also what I would want is set up alternative.
And as far as the alternative, we're just going to say random online user.
And I also want to add a little bit of siestas.
And we're just going to say here, random or I'm sorry, user and user, I've been Imja, let's say
it, and we should have the container as well as the image.
And now let me showcase how we can use the and and or operators.
So imagine the scenario where at the moment I have the person now person is not.
But I know that eventually this person will be an object.
And in that object there's going to be a property by the name of image that will of course, provide
Medoro that will provide me that endpoint, that will point to that specific person.
So here the moment since I have no yeah, technically I can just display the default image, but I also
can write or set up my functionality where I want to say if the person is an object.
So I say if a person is not now, then look for person that I am and I'm sorry image I guess.
And if that is not the case, then just display default image again.
My whole idea here is to get you comfortable with the syntax, what you're saying.
Yeah, if the person is an object, essentially, if it is not now, then look for person image.
And if that is not the case, if the person is still no more than right away, go for default image.
And again, the reason why we're having this person with that and operator, because if I'm just going
to go with person image, I'm going to have a big fat error because at the moment, person is not object.
Eventually it will, but now it is.
Now, if I'm trying to get the property on the person that is actually now at the moment, then of course
I will have that error.
So let me go back person.
If that's not the case, then of course I'll just display my default image, something where we have
covered.
But I think that it is very important for you to be comfortable with that because of course you will
use this particular syntax in your own project as well.
Then we're going to have two programs now.
One is going to have a class name of user and non hyphen title.
And then inside of it, I'm just going to say my then I'm going to look for my title.
And we already know that by default, of course, it is just a name.
So we're going to go your title and then is so we should see my name.
And of course we're doing so.
That's awesome.
And then there's going to be a second program that actually holds the value.
So I'm going to go here with the paragraph with a class of user hyphen value.
And inside of it, I just want to display the value.
So whatever I'm getting from the site, which of course is the random person at the moment, and then
we're going to have the whole list of the icons.
So we have the paragraph, then I would want to create a there with class values list.
And so out of there we're going to have a bunch of buttons.
So we're going to go here with a button and then we're going to add a class name off icon.
Then there's going to be a data label, which essentially is just going to provide that value to our
state so that we all know that if.
I'm, for example, hovering over the name button, I need to change the name, if I'm hovering over
the password button, then of course I'm changing this to the password.
So I go here with data and I'll call this label.
And for the first one, I would want to set it up as a name and then eventually there's going to be
that on mouseover.
So remember, we just set up this placeholder handle value, but I don't want to do that on a click,
even though technically you can make an argument that, of course, we can set up on click event listener
in this case.
Again, I'm going to set up on mouseover register where we're listening for events where our mouse pointer
moves on to the button and then I'll pass in my handle volume and line instead of the button.
I would just want to go with F.A.A. user icon.
That's the whole point, why I got the icons.
So now, of course, we just need the rest of the icons.
So as you can see, we have six total.
So, yes, there's going to be a bit of copying pasting.
So what I would want right now is to grab this button and copy and paste, I believe, five times to
one, two, three, four, five.
Hopefully that makes sense.
So I should have all of the items.
And then what I'm looking for, of course, are different values.
So here I have the user.
OK, good design class name stays the same.
Now the label, of course, will change.
So the second one will be email.
And the good news here is that we can still use the same function.
So remember when we talked about sending them to functions, I said that, yeah, we can technically
setup a separate function for each of our elements, but in some cases it's much more nicer if we group
together.
So in here I'll use the same function for all of them.
I'm not sure if I need to change something.
I only need to do that in one place.
Now, let me say it.
Let me double check.
And of course I have way too many Sumai, but I'm just going to scroll down here and we're going to
remove, I don't know, Lastra hopefully that should do it.
Yep.
Now we have six, so that's what I was looking for then.
Let me scroll up a little bit.
I have my email, so that's my label.
That is very important.
And of course this value also change.
I'm looking for an envelope open.
That's the icon I would want to display again.
Next button.
I have class name the same icon data label will be different in this case.
I'm looking for the age.
And as far as the icon, we have calendar and then times like so serried there is now we have our calendar
now.
What else.
We're looking for the street.
So I'm going to keep on scrolling and here I'm going to say data label is straight.
And then as far as the icon, we have f a map, so save that one and then there's two more.
We have one for phone and one for password.
So let me keep on scrolling.
We have phone over here and the icon will be f payphone by phone and then the last one will be the password.
So we go with password on line.
The value for the icon, of course, will be F.A.A. lock.
Now we're almost, almost almost done.
But right outside is there where I have the values.
I also want to get the button that gets that new user.
So we're going to go here with a button, then I'll add the class name and the name will be beaten and
type will be button.
So button.
And once we're click, then of course we will invoke our get.
Here's a function, but we're not going to worry about that right now.
And then instead of the button, I, we just want to display whether we're loading or not.
So in this case, I'm not going to set up a separate component.
I'm just going to say if I'm loading, then I would want to display loading up.
And if I'm not loading, well, then I'm just going to say a random user.
So here's by default loading.
It's true.
That's what I would have it over here as far as the value.
And that's how the general setup should look like.
Again, we have some kind of image.
We have some kind of values for a text, and then we have a bunch of icons.
And as we're hovering, if everything is correct in the console, we should get some pass unnoticed
here.
As I'm hovering over, we're just making sure that I'm hovering over.
The buttons, not a button icon, button class icon.
So that means that all our setup is correct.
Now, of course, we can add more functionality.