Beautiful.
We've got home page in place.
So now let's worry about the products and for this project, I did set up the API where I'm sharing
the product.
So of course, we'll have to fetch them first and then we can display them in a feature product as well
as the product page.
If you want to take a look at the API, the endpoints that we have, you just need to navigate to utils
here.
And by the way, Miklós, everything, so I don't have too much stuff open.
So again, we're going to go to utils, then we're looking for Konstanz and scroll all the way down
and in there you'll find two URLs.
One end point is going to be for all the products and the second one will be for specific product.
So for all the product, of course, we'll get an array with object.
So those are going to be objects.
But if you want more info, then of course we'll have to look for a single product.
So let's start with all the products and navigate to a bigger screen copy and paste the URL and order
share.
Like I said, we have array of products.
Now, at the moment, as I'm recording this, I believe I have 17, but the plan is to add more products
and I'm going to zoom in just so we can see a bit better.
And notice for every product in this end point, we are getting the idea, we are getting the name price
and I'll talk about it why it is.
And and.
And of course, we also get the image.
We've got the array of colors.
So what are the possible colors that we can have?
We have company, some small description and of course, the category, as well as whether the shipping
is free.
So if the shipping is true, that means that the shipping is free for this product.
And also some products have this featured one.
So, of course, if we take a look at the complete project, the ones that are displaying here have
this feature set to true.
Now, the way I set up the API, if the feature property is not on an object and of course, that feature
is false.
So the product is not featured as well as the shipping.
Now, if you want to take a look at this single product, then of course you just need to grab this
euro.
So this is going to be a bit different where again, we go the same route, of course, API, dot com,
react, store, single product, then questionmark.
And then we have the ad and then the plan is going to be following where of course, dynamically in
our application we'll pass this thing into our end point and then of course, we'll get more info about
the product.
So notice this is the same product or in this case, I'm just sharing a little bit of info.
And then once I look for that specific product using this endpoint, of course, I get way more info
because.
If we navigate to a single product, you can see that there's more stuff there.
There's more images, there's stars and all that good stuff.
Now, first, let's test out how we would set this up and kind of get on the same page and then we'll
take a deep dive.
So first, let's understand when we would want to of those products.
Well, I would want to showcase them in homepage.
Correct.
As well as the product page.
So those are the two places.
And technically, you can make an argument that I could set up use effect in both places.
But what's the point of doing that if we're fetching those products twice?
So we might as well just set up a user effect in our product context.
Correct.
And just push them one time.
And that's exactly what we're going to do.
So after these open sidebar and close sidebar, which again, I mentioned, I just jumped in here because
I thought that it's an overkill to create another extra context.
I would want to create my products.
Now, don't worry, we will update our function in NextRadio for now.
I just want to see whether I'm able to access the product.
So if I get back the euro, we are in good shape.
So in this project, I'm going to use axios again.
You don't have to.
Technically, you can use API.
I'm just using it so you would get comfortable with Axios because it's a pretty nifty Ajax library,
so like previously I'm just going to come up with some kind of function when I call this fetch product,
it's going to be a sink think.
Right.
I know that.
And in this function, I'll pass in the wall.
And as I say, I don't notice here.
I'm importing products.
You are all from the constants, the one that I just showed you and I'm just giving it an alias.
It starts off as products euro.
And then I just say, well, I'm going to call this.
You are in this file.
That's all I'm doing over here and inside of this function.
Like I said, we're going to use axios.
And for now, I just want to get back that array and then we'll build around that there.
So for now, let's just go with Consed and I'll call.
This response is equal and we're going to go with a wait.
Of course we already have pictures by default it's get but we can go with doGet and then we'll pass
in the URL that we're getting as a primer.
And then like I said, I'm going to set up usufruct in my context.
Why?
Well, because then I can fetch it once and then I'm just going to distribute it.
There's going to be featured ones that will go to the homepage to this sucker over here and then all
the products.
So regardless whether the product has feature, true or false, will be dumped in the product page.
And I have my callback function.
Of course I will just invoke it once.
So I'll have empty dependency array and let's just go with the response.
And for now I'll just cancel it and say what is the response?
And let's just invoke such products over here.
Now, what I would want to pass in, of course, is this you are correct, since my function is looking
for that.
So I'm just going to say you are l we invoke it and now we want to navigate to the bigger screen.
And I just want to check what I see in a console if I have my beautiful.
So now I have the object.
Awesome.
So this is what is coming back from the Axios.
I remember with Axios our data was in the data property.
So I can see right now my data is an array with all my products.
And is this is something that you say awesome, we are ready to move on to the next step.