And while we're still on a roll let's complete our single product.
So let me head over again back to finished project and let's take a look at what we're gonna have.
If we click on details again please keep in mind the same is going to work for feature products as well
as all the products because we're rendering our product component and the component is the one that
has the link.
So regardless whether you're going to navigate from feature product or all the products from the product
page you're going to end up in a single product page where I believe the page name most product details.
But regardless the same functionality.
And then we're going to display info about that specific product let's say title.
We're going to also have the price some kind of info coming from hipster up some.
And then we're gonna have an option of adding to our car.
I think the card is gonna be interesting because there's gonna be two functionalities.
First of all we're going to add that I am to the card which obviously we don't have the functionality
for.
But then also we're going to navigate to a card page.
So we're gonna see how we can use react rather dumb in order to programmatically navigate to let's say
different page in our case that is going to be card.
So I notice the moment I had the item to the card.
I'm also going to navigate to a card page.
So now that we know what we're going to build on start working on it again we're going to close out
all the tabs as well as these ones.
Then we didn't the source and let's look for our pages.
So we're going to look for products details page and we're going to start by getting bunch and bunch
of imports first.
We have the parameters.
Awesome.
So that way we're going to access each and every I.D..
So we're going to access each and every specific product.
And then also we're gonna get eventually a card context.
But before we do that we're gonna get a product context so there's gonna be two contexts.
And from card context we're gonna get add to cart.
But again we haven't set up that context yet.
So I'm just going to add as an import that we're gonna comment this out.
So let's do import then first let's grab product context because we would want to access all the products
since we're gonna get a specific product using the idea.
So from then it is coming from our context folder.
So let's do that that then context and then we're looking for these products.
Now like I said I'm going to copy and paste and this is gonna be a car context but for the time being
we're just gonna comment.
So it is coming again from the car context but let's just comment this up because we're not gonna use
it right now.
And then also we would want to get use history Cook which is gonna allow us to programmatically navigate
to a different page and that is coming from the reactor down and it is a named import or use story from
and we're looking for react product down once we have all our imports we have the I.D. course we're
using use primes hook to get our ready and let's right away get a history similar say concept dance
history and then in this case we're using use historical.
So we say use historical and we're not going to do anything with it for the time being this is just
gonna be our variable and now let's get our product from the product context.
So what I would like to do right now is get all my products and then grab the product that has the same
matching the idea because I would want of course to get more info about that product not just the idea
is currently the only thing we're displaying is the 80 but we would want of course way more.
So we're gonna set up our products.
We know we can do structured from product context and we can access by using react use context and then
we have a product context.
And then once I have access to the product.
Now I would want to get a specific product.
How can I get a specific product.
Well I can just set up a variable by the name of product.
And now I'm going to use a fine method.
So I have access to all the products that are coming from the context then I can use a find method.
And then again we get a callback function then within the combat function as a parameter we access each
and every item and I'm going to say only return the item if the I.D. matches.
To say loop over my array.
And then if the item I.D. is exactly the same as my D then assign it to a product.
However there is a catch and the catch is that remember I.D. was a string.
So our ideas are not strings fact.
They are numbers.
So in order to get that particularity I would want to run pass and then I'm looking for integer and
then I'm gonna grab the idea.
Otherwise you're just not gonna get any values within the product.
And once I have a variable then I can just start rendering.
How are you going to remember there's gonna be cases where initially we're not gonna have all our product.
So we're not gonna be able to right away get our product.
So again we would need to set up a if statement.
I'm going to say if product length and length like so and length has always been a terrible terrible
property for me because I always misspell it and then let's say length is equal to zero.
So if my array is empty what I would want to do well I would want to show the loading some gold import
loading wrong and then let's look for components and within the components we're gonna have the loading
so let's run the first loading if our array is empty let's do loading like so and then if of course
everything is correct then we're gonna hello from product details.
Now if you're going to admit this you're going to see in a second how everything breaks.
All right.
So you're probably thinking Well I mean even if the product like the zero.
We shouldn't have no numbers and you shouldn't initially if you're navigating right away from homepage
but if you're refreshing the page you're going to see that there is gonna be an error if you're not
doing in fact as a sketch.
So let me change this around a bit and let's say that instead of just accessing the idea I'm going to
look for product ideas because remember that properties should be still there on a product.
And let's admit this F block all right.
And if you're going say if we refresh the page we're gonna get an error.
Now I can tell you right away we're not gonna get an error if we navigate from the product.
So if I'm gonna navigate to the product of course my products have been loaded.
So product length is not going to be equal to zero.
But if I'm going to try to refresh then my product length is in fact equal to zero and then I'm accessing
the product that is just essentially not there because my error is empty and that's the reason why if
I'm accessing product that I.D. will react is gonna complain.
He's gonna say well I kind of get D of undefined.
That's the reason why we set up this flag here where if let's say we just refresh the page then we're
still going to render something by the time we get our product into our right.
So we set up our if not let's write right away else and then with the nails we're gonna structure some
things out of the product.
Some say const concert.
I'm going to the structure image title.
And by the way just to show that of course we have multiple options.
If you would want to you can do the structuring right here and there instead of assigning it like we
previously did.
So if I know that image is in fact an object I can just say Get me the You are all property.
So instead of assigning it to a different variable we can use the six syntax where when I'm the structuring
in if I know that the property is object itself I can just get a specific property from that object.
And by the way if you really wanted to you can also assign a different name.
So that way if you have the URL and then if you add here and colon you can add whatever name you would
want.
So in my case I'm going to keep the URL but just keep in mind that that is also your option that I'm
looking for a price description like so and that is all coming from my product variable.
And once we have the structure all the properties from the product variable.
Now let's do our return so let's write a return and then we're just gonna return a section.
Section is going to have a class name of single product.
Now let's start I guess with an image.
So we're gonna go with image as a..
We're gonna have a you are all property of course because that's what we do structured and then where
we have alternative.
Just gonna go with title.
Let's go title and also let's add a class names or the class name is going to be single product image
image.
Now let's save it and we should have the image.
So if I'm gonna head over let's say to our product and if I'm gonna navigate to a different product
of course then I'm gonna have that specific image for that product and then within a section right after
the image we're also gonna have the article.
So let's write article and then one by one we would want to display first a title I guess.
So title prop then we're going to look for the price.
So having two is gonna be our price.
Cause those are all the variables that we do structured price and then we have a description.
So paragraph with a description description.
And now this is where things get interesting where we're going to have a button that is gonna do two
things.
It's gonna add the item to the cart.
Again the function we haven't created yet.
And then the second one is going to be navigating to a cart page.
So first let's set up a button.
Then let's add add to cart.
Let's also add maybe some classes here.
It's a class name.
And then in this case we're gonna have B10 between primary and Beatty and block.
And once we have added our classes let's set up on click event listener.
And then in here we're gonna pass in first anonymous function.
So we're going to start by setting up anonymous function.
And then there's gonna be two functionalities add to cart which currently doesn't exist.
And the second one is gonna be our history.
And remember we used use this theory hook to get back our history to assign to a variable.
And now within the history object we have a method called Push where we write history that is of course
a variable.
And the method name is push.
And now we just need to say where we would want to navigate.
So in our case working said if we would want to navigate to a cart page let's save it.
We're gonna head over to a bigger browser window first of all let's open up our product and then we're
gonna navigate to a bigger browser window.
And this is gonna be the title the price as well as the description.
And then of course if we would want to add item to the cart currently we're just gonna navigate to a
cart page.