Excellent work, we set up everything for a single product in our context as well as the producer.
So now I think I'm going to close all the files as well as the folders, and we'll simply go back to
the context and in the context, in the product context, I would want to pass that function down.
So for a single product, I would want to pass it down.
That's why I'll pass it in to the value so say here for each single product.
So now of course, I can access that function and now I would want to navigate to the pages and I'm
looking for that single product page.
Now we do have a bunch of reports.
We have years of since, like I said, will invoke this single product when we load the single page
product page and then we've got some use problems in your history.
Don't worry, I'll cover these hooks once we get there.
And they're both are coming from reactor down.
Then also, I would want to get the link from reactor number as well as style components.
That's why we have styled we have this single product.
You are because remember in the constants in the utils for store and then in the constants, I had that
single product, YORO.
So this is the URL, the root Yoro all the way up to the idea.
And then what we're doing each and every time we navigate a single product, we'll just grab Darity
and then add it to the zero and then we'll be able to fetch the product again.
We now get here for some reason I closed my single product that also I have for my price.
Since we already covered that, we're getting pricing sense and then we have quite a few components.
So some of them are going to be while we're loading, one is going to be for the error.
But then if we navigate to a complete project, notice.
The single product page is somewhat big and complicated, so I would want to set up separate component
for these images.
I would want to set up a separate component for the stars as well as the colors and add to cart functionality.
So this is going to be the case where I really want to split it up in multiple components.
And we'll also have to redo a little bit of our page here, because if you pay attention to yourself
for the product or about or whatever, we have only two.
But then if we navigate to that single product, we have two links, the home and products and then
the name of the product.
So let's first start by setting up the loading, by setting up the Furrer as well as the user.
So we're going to navigate back.
We have all the components, like I said, that we're going to use and we have styled we have link and
now I'm going to go inside of the component.
And I first start by getting the idea.
And remember, we react rather dumb in order to access the URL parameters we need to correct.
And the name of the hook was used per.
So if you want, you can log the whole thing and you'll see that there's going to be an object with
a property of offsite just because in the app that's how I named it.
So I'm going to go to the console and there it is.
I have my object.
And then in the object I have a problem with this value.
So of course I would want to attach this one to my you are correct and then I'll be able to fetch the
product.
So I'll set up my ID here in seconds.
Heidi is equal to use.
Now I do need to structure it.
That's why I'll close it in the bushes.
So now what I'm saying is get me the ID property out of this object, the one that we can see in the
console.
And then I also would want to grab some things from use product complex.
So first of all, I would want to get the loading her as well as the product.
Whatever it is, remember, initially, it's going to be just an empty object and then the function
for each single product.
So we're going to go const and let's say single product single on this core product and then remember
loading and all right away again, give it analagous of just loading.
Then we're going to look for a single underscore product error and we're going to give it a Alia's of
error.
And then, of course, we have a single core product is equal to a product.
So, again, we have some kind of Ellers.
And lastly, let's just get that fetch.
Single and then product, now all of this is coming from my hook, so I just invoke it and now let's
set up the use of it first.
So what I would want is when I load this component, when I load this page, I would want to invoke
usufruct and set up my single product.
Now, of course, I'll have to pass in this URL that is coming from my content, plus the idea.
Then I'll be able to access the product.
Correct.
So we're going to set up over here and say use fact and then we will want to invoke it when the component
mounts.
So that's why I just pass an empty dependency array and if you want, we can add it or here.
So has the added changes, then we will just fetch that new product.
That's also an option.
So I'm going to go with a single product and two things that I would want to pass in.
I'll pass in the URL that is coming from my constants.
And the second thing is the ID like so.
So now of course if I want I can counsel the product.
So first of all, remember, product should be empty.
Notice I have two empty objects, meaning is just once or twice and then eventually of course I get
my single product.
So in this case, I will navigate to the bigger package because I would want you to see all the properties
look like.
So let's go over here now to theory and notice the council where of course, this is my object.
So of course, we'll have to pull out these properties in order to showcase something.
But if you can see the object with these properties, we are already in good shape.
So I have my product some now.
Well, now I also want to check for loading as well as the error.
Correct.
So let's go with simple if loading is true, then we have the loading component.
Remember, we set it up when we worked on the feature product, so say loading.
So that's going to be, of course, displayed when we're loading.
Then also there's going to be forever and I'm going to show you error in the second.
So let's go with return and error and not to test out the error or we simply add ash in front of the
euro.
And what you should see is that there was a year.
So that, of course, our component and technically we could leave it the way it is.
If there is an error, we just display the error.
But I think a better solution would be setting up the automatic navigation, meaning this is going to
be done programmatically.
Instead of just displaying the link, I would want to navigate back to the home page.
If there is an error, let's say in three seconds.
How do we set that one up?
Well, we'll have to set up one more use effect where I'm going to go with usufruct and for the time
being is just going to be empty dependency.
Right.
But eventually we will pass in the error.
And I'm going to check if the error is true.
Summerset if error.
So if the error is true, then I would want to set time since I would want to happen in three seconds.
And then I remember in September we passed in callback function.
And then the second thing is in how long we would want to navigate, meaning in how long we would want
to run the callback function.
So we have three thousand milliseconds, which of course is three seconds.
And then in those three seconds, how we can programmatically navigate away from the page.
Well we can use use history hook from react Rotterdam.
Now there's another way how we can navigate away from the page and I'll show you that when we work with
are zero.
Keep in mind there's two, there's one with redirect and one with use history.
OK, so in this case we'll take a look at the history and the other one will be redirect.
And we simply set up the history is equal to the U.S. history.
OK, so now we get the history back from the reactor down and the method we're looking on this is the
object is push.
So this will set up the programatic navigation and I'm going to look for my use of fact.
And in the set time, I'll just go with history.
And like I said, the method name was push and now we just need to come up with a destination.
So in this case, in three seconds, I would want to programmatically navigate to the homepage.
So I'll save and you'll notice that it doesn't happen.
Why?
Well, because we need to understand that by default, this error, I remember, will be false.
By the way, if you want, you can cancel it and say that error is false.
That's why I said that we would need to add that error in dependency, because remember, when we start
patching error is false.
But then once we're done loading and then once we can see that there's an error, then of course we
set up error to be true.
So once I add it here, known as the initial value will be, of course, false, but then eventually
it's going to be true.
So then in three seconds, we nicely navigate away.
So we nicely navigate to the homepage again.
It is optional.
You want to leave the error, you can definitely do so.
But you also have an option of programmatically navigating using a reactor.
Now, remember, there's two cases how we can do that, one using history and then the other one is
redirect, which will cover a bit later.
So now, of course, we're at the point where we can successfully get the product.
I just need to remove this and now we need to focus on our return.
So I'm going to, I guess, set it up on a small screen as well.
So I'm going to sit here.
I wouldn't want to navigate and we should see this single product page because now we're at the point
where we would need to set up our return.