Okay.
Our next task is to deal with the product details.
So when we click on this view button, we get taken to the product page for whichever product it is
that we have just clicked on.
So first of all, let's add a link so that when we do click on this view button, then we get taken
to the product details page.
And we're going to do that in our product details card.
So let's open up the product card dot TSX.
And inside the actions the card actions where we've got our button to view the components.
Let's turn this button into a link component that we get from React Router Dom.
And it's not coming up on the intellisense, but I'm pretty sure that we can use the component property
inside a material UI button.
And we want this to function as a link.
So I'm going to specify a link from React Router Dom.
And we get the warning here.
Because when we do use a link we are required to supply the two property.
And if we take a look at the giant TypeScript warning for this, and these are pretty nasty.
These ones that we do get from material UI and it's telling us the property component does not exist
on this.
I remain unconvinced about that.
I think it does, and I'm pretty sure the warning we're getting here is because I haven't supplied the
two property yet.
And sure enough, as soon as I do supply this, the TypeScript warning has gone away.
So a bit weird that one, because we can use this, although it doesn't seem to acknowledge the fact
that we can use it.
So we'll see anyway.
And what we want to do here is we need to go to the catalog forward slash product ID is going to be
the route we're going to now in order to use or in order to concatenate some JavaScript effectively
onto a string, we can use the Backticks not normal apostrophes here, use Backticks.
And then we specify a forward slash catalog forward slash, and then to use JavaScript code inside Here
we specify dollar, then open curly brackets.
And now we can specify the product ID as to where we're going to go to when we click on the button.
So if we go across to the browser and test this functionality.
And by the way I did have it on dark mode I believe.
But because the components refreshed, we go back to its default value which is light mode.
And a bit later I'll show you how we can persist that, but we're not going to get to that until we
start looking at state management, where we can track state across multiple components.
So for the time being, every time we refresh, it's going to go back to its default.
But you can set that in the app component if you wish.
If you prefer to stick with dark mode, you can always change the false property to true so that you
start on dark mode even after refreshing.
I'm not particularly bothered about it, so I'm just going to keep it as it is for the time being.
So I'm going to click on view and notice the URL at the top.
I've gone to catalog two when I clicked on products with the ID of two, and if I click on the third
one.
Then I go to Catalog Forward slash three.
Great.
So far so good.
But obviously we want the product details for a specific product that we've just clicked on.
So let's see how we can achieve that.
And to do that we need to go to our product details component.
So let's open that.
And what we can use here is we need to get the route parameter that matches the ID.
So inside the product details just before the return statement, let's use a hook that we get from React
Router Dom.
Now the hook is called use params.
And what this gives us access to.
It's an object of key value pairs of the dynamic params from the current URL that were matched by the
route path.
So we're interested.
And the route path if we go back to our routes.
We're interested in this.
The ID that we provided when we set up our product details route inside there so we can specify that
we want to get the id from use params.
Now we're going to store the product inside state inside this component.
So I'm also going to set up the states inside here I'm going to say const product in square brackets.
And set product equals use state.
As we're going to go out and make a fetch request to our API to go and get the individual products that
matches this ID.
Now for our use states, let's give it a type.
And we're going to say that this could be or is a type of product.
But we cannot guarantee that our API is going to return us a product at the stage.
We're writing this code, so we don't know if that product is going to exist.
So we'll specify inside here this is referred to as a union type where it can be one type of thing or
it can be another type of thing.
So I'm going to specify products at the pipe and then say it could be the product or it could be null.
We just don't know at this stage.
And well, at this stage, before the component has fetched the data, then the product is definitely
going to be null.
So we'll give that its initial value as well.
Now we've used it before and we'll use it again when this component mounts.
Then we're going to use a side effect.
And the side effect we're going to use is the use effect.
And as before we're going to add the callback function inside here and as before so that this doesn't
continuously execute every time our component rerenders we give it its dependencies.
So we'll add the dependency array.
And inside here once again we'll make use of the JavaScript fetch for now.
Not my favorite tool, but it does work and it will do the job that we need it to do.
So we're going to say fetch and then specify the URL.
And I'll just continue to hard code this in for the time being.
Not best practice list by the way, but we will adjust it soon.
I'm really just using this approach for convenience right now.
And we'll specify localhost 5001 forward slash API, forward slash products forward slash and then dollar
ID.
So please make sure you're using Backticks here so that we can specify the id parameter inside there
and concatenate it onto the URL.
So because this is a fetch we need to use Len because this returns a promise to us.
And we'll get the response.
And then the first Len we need to say response goes to response dot JSON.
And then we can use the second Len.
And at this point we get our data back from the API.
So I'm going to specify or we get the data outside of the JSON response that we're using in the previous
line of code.
And we'll specify set products and set it to be product or data as I've called it there.
So that's going to be data I should say.
And we'll also do a tiny bit of error handling at this point.
And we'll use the catch.
So if something goes wrong and we do not get a 200 type response back from our API server, then we
can catch the error in this line of code and do something with the error.
So I'm going to specify the error if we have one.
And all I'm going to do for the time being is just console dot log the error.
We'll take a look at error handling in a bit more depth a bit later.
But if we do get an error from the API, then we're just going to log it out to the console.
And that's our Chrome Developer Tools console.
So we can go and take a look at that to see what the problem was.
Now we've got a warning here.
And this is coming from our linter.
And it tells us that react hook use effect has a missing dependency.
The ID either include it or remove the dependency array.
Now we definitely do not want to remove the dependency array, because if I did remove the dependency
array, then what would happen?
And I don't know if I'd want to demonstrate this because it's going to cause an infinite loop.
But I'll explain what's going to happen if I remove that dependency array.
What happens is our component mounts, the useeffect gets called.
We go and fetch data from the API.
And then we call inside here the set product method which updates the state inside this component,
which then causes the component to rerender.
If we don't have this dependency array, or we forget to include it because the component's Rerendering,
the Useeffect is called again, it goes out to the API sets the products component Rerenders.
Useeffect is called again, so that happens continuously.
So that's why we need this dependency array.
And because we're depending on the ID here, then we need to supply that as the dependency for this
useeffect.
And what this means is if the ID changes, then the useeffect gets executed again and it will attempt
to synchronize effectively with our API server.
I say synchronize, that's the terminology that reacts users, but it means it's going to go out and
fetch the data from the API and set the product again inside this component.
And then to make sure this is working, let's inside this div instead of product details let's just
specify product dot name.
Now it's given us the automatically the optional chaining.
Why has it done this.
Why is it specified question mark there.
Well if we hover over the products at the time at this point, then it could be a product or it could
be null.
So what this means is that if we do not have the product, let's come back then it's simply not going
to display anything.
It's not going to crash your application.
But we won't see anything inside this div.
If we do have the product name, then that's going to be displayed.
Now that should be enough to see this in action.
So let's go across to our browser.
Let's go back to the catalog.
Let's just refresh the page, make sure everything looks fine.
And if I click on a product and I can see the product name appearing in my browser, and if I go to
a different product.
I see the updated name and if I go to another different product, I keep seeing the updated name of
the products that I have clicked on.
And before we move forward, I just want to do double check the console, make sure there's no errors
in here because we do have some errors.
And if I refresh the page this is a little bit annoying actually, and I'm not entirely sure what their
thinking was by flooding the dev tools with their warnings that don't affect what we're doing with version
six, but they're telling us, hey, we might want to do something.
I don't know if I like the way they've done this, but anyway, we'll take a look at these flags and
we're just going to add some noise into our code to get rid of these warnings.
And let's take a look at that.
So this one what does it say V7 star transition.
We need to use this flag to disable the warning whenever we enable it to.
True or false I guess it doesn't really matter with what we're doing, but we're using a router provider
so we can set the future flag and set that to whatever we want.
So let's go and do that.
And this is going to be a bit annoying I think.
So we'll go to our main points and we've got our router provider here.
And what did we need the future flag.
So I'm going to specify future.
And then we've got the V7 start transition.
I'm just going to set that to false so it retains its React Router six behavior.
And if I just refresh then oh apparently we still get the warning.
Even if we enable that perhaps I do need to set it to true to turn off that warning.
This is all brand new by the way.
So yeah.
So if we don't set it, if we don't use it, we get the warning persisting in our console.
That's um that's interesting.
And then we've got this relative splat path changes the relative path matching and linking for multisegment
splat paths like dashboard.
Not something we're using in our code, but it looks like we need to specify this in our create browser
router.
So after the routes we add a comma and then we get access to this future property.
So let's go back to our roots for list one.
And let's see.
So this square bracket here this is our routes that we're providing.
So after this we should get access to I think I need to do this in curly brackets.
And then we've got access to future.
And then we can start using the different options.
So okay inside here let's see V7 relative splat path I'll set that to false.
And let's take a look and see if that fixed anything.
Or if we do need to set this one to true as well.
And yep sure enough let's set that to true.
It shouldn't really impact our functionality.
We're only using basic router functionality here.
So this is a bit annoying.
And let's keep going on.
So now we're down to for the persistence behavior of Fetchers is changing.
We're not using that either.
But I guess we're going to need to enable the flag.
So let's add a comma and say V7 fetcher persist.
I'll guess I'll say true to that one as well.
It won't make any difference.
And then we've got the V7 normalized form method.
Something else we're not using.
So let's set that to true.
And just to get rid of the flag then we've got the hydration behavior.
So V7 partial hydration we'll set that to true as well.
And then we're down to one warning.
Revalidation behavior is changing in V7.
Skip action error revalidation.
So let's just set this flag as well.
Maybe you won't need to deal with this because I imagine developers are complaining about the warnings
that this provides in the console.
No developers like to see these kind of warnings, and I'm surprised to see it actually.
But never mind.
Now our console is clean and we can move forward.
And what we'll take a look at next is providing the contents for our product details page, which we'll
look at next.