All right, I think we're done with environment variables and hopefully your head is not spinning.
Just remember to create dot envy in sauce and set up variable name and then some kind of value and then,
of course, an axis that you just go with process dot energy and then whatever is the name.
And of course, always, always you need to restart the server.
And you also need to make sure that you add the filename to the get ignored.
So with that out of the way and by the way, for some reason I'm sitting in a file and I'm going to
go back to Abcess where I have the setup.
And once we have everything in place now, of course, we can work on our return.
Yes.
Later we'll make this a bit more interesting.
But for the time being, we have the function we can get out and images.
So we might as well set up our return.
No one gotcha here is that all right away?
Also create the form so we won't set up the functionality, but the form will be there since we'll be
adding the photos.
So we might as well do that.
And we're going to start in our images.
So where we're fetching the images and of course, the moment I have the data now, I would want to
use my set photos and of course I would want to remove the loading or start loading to false, because
keep in mind, when we start fetching images, of course, we set loading to do so in here.
I'm going to go with set and line photos and of course, I'll pass in my data.
So that is going to be my right.
And then once I have that, I'm going to go with set and then uploading equal to false.
Now, of course, we can start working on our return.
So first again, we'll just set up that form and then eventually we'll deal with images.
So as far as our turn, we're going to go with mine and I'm going to remove the text that I'm going
to go with a section and the class name will be Search Like So.
And then instead of the section, there's going to be a form with a class of search form.
So search I found form.
As far as the action, we don't care about the action.
We'll handle it on our own end and then we'll have one input.
The type will be text.
So we just go with the basic one and I'll add a placeholder and the value will be search.
So we add the value over here.
And of course, I would want to start a little bit as well.
So we're going to go with form my input.
Now, keep in mind, of course, eventually there's going to be a value on change like we normally have,
but for the time being, we don't care about that.
And then inside of the forum, I would want to go with someone.
So Type's met online and hear a class name and this is going to be met and then I meet.
Now I think I'll write a way set up on Kaleck.
So basically when I submit the form and I'll have my handle submit, of course it's just going to be
a placeholder function.
We're not going to worry about functionality, but at least we could set up a placeholder.
And then I already imported the icon from react icons.
And that's one side of the button.
I'll place my F.A.A. search icon.
And if I say right now, of course, there's going to be a big fat complaint because I don't have an
estimate.
So either after the use the fact or before I'm going to go with Zimet, so Consed Handles met and of
course I'm going to be looking for the event object and I would want to prevent a default.
That's going to be a start.
So we go here with prevent default.
And I would want some kind of value in a console, so just say hello, OK, awesome.
And then once we save and by the way, of course, we do need to hear a class and for some reason,
some, of course, should be submit BDM, OK.
And now, of course, we can see that we have a better looking button.
And I'm just going to type something here.
And he finds back in a console and once I click once I click on a button where I can see the Hello Beautiful.
And then right next to the section where we have the search, I'm going to go with my photos.
So here I have the section and I'm going to place the second section right next to it.
We'll have a class name of photos show online inside of it.
There's going to be there with a class, a photo center, photos online center.
And I'm going to iterate over my photos.
So what photos am I talking about?
Of course, these ones.
So these are my state values for one state value, which is an array, of course.
And then I would want to iterate over that.
All right.
For every item, I'm going to return a photo component, something that we pretty much are doing in
every project.
So I think at this point, we should be extremely familiar with that.
We're going to go with photos and then, of course, map online for every photo.
I would want to return a photo here.
Now, as far as I remember, they didn't have I.D., so I just passed in the annex here.
And then I'm going to name this image and then index.
So, of course, this all references each photo and then I have the index just there's going to be index
in the array and then I'll pass all the properties from the image to my photo component.
So I go down the dot and then the image.
Awesome.
Now we say that we should have photo component because that's the heading queue that I currently have
in a component.
And before we go any further right next to there, I would want to set up my loading.
So in this case, loading is going to be a little bit different because.
We'll be listening for Skrull event, so if you take a look at the complete project, notice how I'm
not really displaying loading when we load here somewhere on the top.
As we keep on scrolling, notice, the loading is in the bottom.
That's why we don't have multiple times pass the photos.
I have my loading.
That was the whole point.
And I'm just going to go with congressional rendering.
So we go if we're loading, then, of course, our one on display heading to and a class name floating
and the text will be loading and then dot, dot, dot.
OK, awesome.
We save that.
And the last thing that I would want to set up, of course, in the UI is the photo so I can see a better
looking component.
So I'm going to navigate, of course, to my photo dress.
That is my component.
And for the time being, why don't we just cancel?
Like, what is that image?
Because, of course, I want to go over what properties I'm looking for.
So back in the objets before I pass in the image, I'll also cancel login and you can see that.
And by the way, of course, that did have the image.
I don't know why I didn't have that.
So for the time being, let's just leave it the index and then maybe later I'll change it or, you know,
why don't we do it right now?
So we're going to go with image and then dot it for some reason.
I don't know why I went with it, but just switch back to the.
Now, what else am I looking for here in this particular object?
Well, first of all, I would want to get of course, the euro amount is sitting in the EU or else.
And then more specifically, I'm looking for the regular.
So this is going to be the object.
That's what I'm looking for.
Then I would want the alternative description.
So that should be somewhere here.
So there it is.
That's the property then I would want to check.
Well, how many like the photo has and in this case, that is one.
And then more specifically, I would want to get info about the user.
So notice here the user object, I get it over here and then I'll take a look at the name of the user.
I would want to have portfolio URL because notice as you're hovering, I want to show that photo.
And then lastly, I would also want to get the image.
And that image, of course, is going to be in the profile image and one medium.
So this is going to be the case where, again, we have a bunch of nested objects.
So the URL is, of course, when we click on the photo and then the actual photo is coming from that
profile image and then more specifically, medium property.
So if you want to double check, just take a look at the object, what properties it has.
And then, of course, if you want different ones, go with different ones.
But in my case, I'm going to remove this image.
Because they already showed you what we're going to be looking for and in this case, I'm just going
to do all the destruction right here in the function parameters.
So, first of all, I'm going to be looking for that photo and that is sitting in the or else that's
the proper name.
And then more specifically, regular.
OK, that is the name.
And then as far as the return, of course, I'm going to go with article or here and line inside of
the article.
And by the way, I would want to add a class photo here, photo and then side of this article.
I would want to go with image online for the source.
We're going to go with our property.
And then, of course, I also want to have that alternative description shown here where I have the
URLs.
It's not in the same object.
That's why we add comma.
So that one is sitting on the main object and we just go without underscore and description like so
online we would want to grab that property copy and paste and now we're in good shape where of course
we have the images and then once we have the images, then of course we can set up also info about the
image and the way it's going to work.
I'm going to go with Def with a class of photo and line info.
And this is where I'll place the name, the likes and also information about the user, so let's keep
on the structuring.
We're looking for likes and then we have a user object and line inside of the user object.
We have a name.
We have portfolio and underscore.
You are.
And then also I would want to get that image and I want to sitting even more or less that so we go with
profile, underscore you all and more specifically, medium, medium like so.
So once I say I've noticed how we have a bunch of nested structures and it looks like I messed up a
little bit on a proper name, it shouldn't be profile, you should be profile image.
Now we're getting the image of the user and then of course within the info.
Now I would want to pass that data.
So start here with heading for online or set up the name of the user.
Then we have the paragraph with the likes and then we'll just add like, OK, so let's save.
And then also within this div, I would want to set up my link.
Now the thing is I have there a Tulkarm lounge so I'll place the for and the paragraph in there and
then right next to it I will set up my link as far as the we're going for port folio and then underscore
you are all online for the image.
Of course I would want to set up that image of the user.
So remember when we structured the medium, this is where we pass it and we go with medium and long
for alternative.
We can go with, I don't know, maybe name and we're going to go with class name and then we're looking
for user, my friend and I g.
And if everything is correct, my app should not break and I also can remove my console log.
So let me keep on scrolling and line here in line forty seven.
I'm going to remove my console log and that should be our application where on initial load we get ten
images and then when we hover over the image, unless we get the info about the image that I like as
well as the user that share the photo.
OK, awesome.
Now of course we can make our app a bit interesting by adding more functionality.