So our next task on the list, and the last task for this particular section is just to give our product
details page some actual detail.
Currently we do not have much.
So let's head back to VS code.
And let's see.
Let's just go to our product details and we'll just close the others.
Now we're already fetching our product.
So really it's just a matter of styling our page.
So in order to layout our page we're going to take a look at using material UI grid system to do this.
And if we go and take a look at the material UI docs and we take a look inside here for the grid in
the components, there is a grid that's now been deprecated.
They've updated the grid in material UI.
So we're going to be using grid version two.
And how this works.
Well it uses flex behind the scenes for high flexibility and effectively.
Just like other styling frameworks we get 12 columns to work with.
And this allows us to layout our page how we want to using this grid system, and it gives us quite
a bit of control about where things line up.
For our product details page, we're really just going to have a left area and a right area.
The left area is going to show the image of the product, and the right area is going to show the details.
So let's take a look at actually using this.
We've got an example in here we have an outer grid that has or is given the property container as it
contains grid items.
But we still use grid and specify a size of how many columns we want this grid item to take up.
That's the idea of this.
And that's what we will implement inside here.
And also by the way, we'll also take a look at using a simple table to also lay out the content inside
here.
And where is the table.
Here we go.
Here's the table.
So we'll also make use of the table inside here to display the details of the product as well.
Something along these lines.
So let's go take a look and layout our page as we want it.
So let's start implementing this and we'll make use of the grids.
And we can't use grid anymore.
And we can use grid two.
And that's what we'll make use of.
Looks a bit weird because we've got the two.
But that's the way we've imported it here as a named import.
The way they used it in the docs was they specified grid two here.
And then instead of using grid two like that, they specified grids.
And then we could use grid like so.
And that would work fine because we're using grid two because that's where we're importing it from.
Either approach will work.
I do prefer the named import approach, although it does look kind of a bit weird using grid two, but
it still works just the same way.
And I think I actually prefer this for a training course, because it makes it very clear which version
of the grids I am using.
As I'm typing it out.
Now we need a container, first of all for a grid container.
So we'll give this the property of container and we'll give it some spacing between the grid items of
six.
I'm also going to give this a max width property of large.
So it doesn't take up the full width of the screen.
And we can come back and adjust that if we need to.
And I'm also going to centralize this in the center of the page.
And we can do that by giving left and right margin to auto.
So I'm going to specify mm for left right margin and set that to auto inside the grid I'm going to have
a grid to again.
And I'm going to give this a size six.
So it takes up half the width of the page.
Inside here is just going to go an image.
So we're going to use a normal image tag here.
Material UI doesn't have a specific image tag that we can use.
We'll just use the standard HTML image tag here.
And for the image source we're going to specify the product dot picture URL.
and we've still got the optional chaining going on here.
So we don't know if we've got the product yet.
So to avoid using the optional question mark layer, we can check to see if we have the product before
we return the product details.
So we'll check and we'll say if not product then we're going to return a div.
And we're just going to say loading dot dot dot.
I'm going to presume we're not really doing error handling here.
I'm going to presume as long as we've got the correct ID of a product that exists in our database,
we're going to get it back eventually.
So I'm just going to have a div that says loading.
If we do not have a product when the component first mounts, and for the alternate, we'll just use
the product name as the alternate here as well.
And we'll give this some inline style.
And we'll open curly brackets and more curly brackets.
And we're going to set the width property to 100%.
So it takes up all of its available width.
Now, below the grid with the size of six, we're going to have another grid.
So I'm going to specify grid two again.
And inside this one we'll also give it the size of six.
So it takes up the available space on the right hand side.
And inside here we're going to have typography.
And we're going to give it a variant of H3.
And this is just going to be for the title of the product.
So it's going to be products dot name.
Below the typography we'll have a divider.
And this is another component we can get from Mui material.
So we'll bring that in and we'll give this some styling and say six equals.
And we'll give it a margin.
Bottom of two to add a bit of space between this and the next line.
And we'll use typography again.
This one will give a variant of H4.
We'll give it a color equal to Secondary and inside here this is going to be for the product price.
So we'll use a dollar and open curly brackets and open parentheses.
And we'll specify the products dot price.
And for the time being we're just going to do the calculation in here.
Because we get this back as a long from our API server.
We need to divide this by 100 to give us the decimal price.
And then to display it as a decimal.
We'll say two fixed and two decimal places below the typography.
Here we will have a table.
And we need to use the table container from Mui material.
And inside here we can specify that we want to use a table also of course from Mui material.
And we need to give our table a bit of styling.
So I'm just going to drop down the right hand angle brackets.
And I'm going to say sx equals curly brackets and inside the table is going to go a table body.
And in the table body, just for the time being I'll just say table goes.
Here I want to demonstrate a way to use this so that we can loop over the different properties that
we want to display in the table body without having a giant component full of table rows and table cells.
I want to show an approach where we can loop over that.
So I'm just going to say table goes here and cover that in the next lesson.
For now we're just going to concentrate on getting the layout specified inside here.
Now below the table container we're going to have another grid.
So a grid within a grid.
So I'm going to say grid two once again.
And this is going to be a container because it's going to be a container for another grid.
And we'll give this a spacing of two.
And we'll give this margin top And set that to three.
Inside this grid we're going to have another.
Well we're going to use grid two again.
And we're going to give this to size equal to six.
And what we're going to have inside here we're going to give the users the opportunity once we've got
the functionality in place of course, to add or update the quantity of this item in their shopping
cart.
So what we'll have is we'll use a text field from again material UI.
And this is self-closing.
We just need to use this or give this some properties inside here.
So I'm going to specify a variant of outline for the text input.
We're going to give it a type equal to number because it's going to be the number of items in the basket.
And we'll give it a label equal to quantity in basket.
And by the way you may notice me using a difference with the quotes here, it really doesn't matter.
We can use either double quotes or single quotes.
And I think just for convenience, when I type in the quotes directly myself, it's just quicker and
easier to use a single quote, but it doesn't make any difference.
Well, it might be nice to be consistent, but single double quotes, it's fine both ways.
And then I'll specify full width so it takes up all of its available space inside the grid.
And I'm going to give it a default value equal to one inside that text field.
And below this grid to the will have another grid two and add its closing tag.
And we'll give this one also the size of six.
And inside here is going to be a button.
And we'll give the button some properties and give it a color equal to primary.
This time the size of the button can be large, the variance can be contained, and we'll again use
the full width.
So it takes up all of its available space.
And I'll just say add to basket as the label for that button.
So we should have something to look at.
We've still got a bit more work to do inside here.
We may need to come back and adjust some styling.
I'm sure we will, but let's see how we're getting on so far.
And if I go back to the product details page and I refresh the page, then we can see we're making some
progress.
Okay, there's a few things that we need to look at.
The button height doesn't match the text field.
I don't know why this is a material design choice, but for some reason it is.
Our text fields are much bigger than in height terms than our buttons, so it looks a bit weird side
by side, but otherwise that seems fine so far.
A bit more work to do, and we'll finish up the styling of this in the next lesson.