All right.
So now we want to be able to create and read reviews on the product page.
So I want to have it down here so we already have our back end endpoint to create reviews.
So let's go to our front end and like always, we're going to start in our slice.
Let's go to our products API slice and we're going to add down here under delete product, let's say
create.
Or we'll just call it Create review, which is going to be a mutation.
And it's going to take in some data.
Our URL is going to be our products URL data, dot product ID slash reviews.
It's going to be a post request.
Have our body data and then I'm also going to do the invalidate tags and set that to product.
Okay, now let's export that.
So we'll say use.
Use, create or view mutation.
Now, we don't need a query to get the reviews because remember, it's included with the product and
we're already getting the product data.
So now we want to go to our product screen.
So screens and then product screen.
And we're going to bring in let's go up to the top here.
And we're we're taking in stuff from our slice.
Let's bring in.
Use we want.
Let's see.
Use.
What was it called?
Create?
Yeah.
Create review.
Mutation.
And then let's see.
Do we have we have dispatch, but we also need to get.
Stuff from the states who are also going to use use selector.
And then we also need the toast component.
So let's bring that in as well.
No, that should be from React.
React to Defy.
Okay, now let's initialize our use create review mutation.
So we'll put this.
Right here.
And let's see, we don't we're not going to be using the error anyway so we can get rid of that.
And then this.
The is loading.
I'm going to rename that to loading.
A product review.
And the name of the function is going to be create review.
All right.
Now we need to add a couple pieces of component state.
So we're bringing in use state already and we have the quantity right here.
We're also going to want a couple other things.
So we want the rating.
So rating set.
Rating set that to zero by default.
And then we also want the comment, which will be an empty string by default.
Now we want to get the user info as well.
So I'm going to go right down here and we can get that from our state dot auth.
Okay, get our user info and let's see.
After we get.
So after we submit the review, we want to refetch the data.
So right here where we're getting this stuff from the product details query I'm also going to add in
here Refetch.
So now we're going to come down.
And where we have this, we have is loading and then we check for an error.
If there's no error, then we go ahead and load this row.
I'm going to open up a fragment here and then where this row ends at the very bottom.
We're going to put another closing fragment.
Okay.
And then under this.
Ending row is where I want to put a new row.
Whoops.
Didn't want to do that.
So I want to put a new row here.
I don't know why it keeps pushing it over, but this is going to have a class or class name of review.
And then we're going to have a six hour column is going to be six wide because I don't want it to take
up the whole screen.
Basically.
I want it to be like from here to here, you know, half the half the page.
So let's do that.
And then inside the column we're going to have our heading.
So reviews, and then we want to make sure that if there's no reviews, we just have a message.
So we'll say if the product dot reviews length is zero, then let's show a message and we'll just say
no reviews, okay?
And then underneath that we're going to have a list group.
Let's close that up.
And in this last group, we want to want to map through the reviews.
So let's say product, so product dot reviews and then dot map.
And we'll say for each review.
Then we're going to have some parentheses and we want a list group item for each one and we'll have
the ID as the key.
Okay.
And then in the list group item, let's do a strong tag with the review name.
Then we're going to have the rating.
And remember, we have a rating component, so we're going to use that here as well.
Let me just make sure that we brought that in.
Yeah, we did, because we're using it somewhere else as well for the for the product.
So let's see underneath that, underneath the rating, we're going to have the Createdat and then the
actual text, the comment of the review.
So, yeah, let's actually just save that and see what we get.
Okay, so no reviews, I think.
Do we have I don't think we have any with reviews actually, in the sample data, we didn't do that,
so that's fine for now.
Underneath it, I want an area to create a review.
So.
Let's see.
We're going to go under.
Under this right here, because that's where the the map ends.
We're going to create another list group item.
Let's close that up.
And in here we're going to have an H two that says write a review.
We're going to check for the loading product review.
That's what I called it.
Right.
Let me just double check.
Yeah.
So loading product review, we're going to check for that.
And if it is loading, then we're going to show the loader.
And then underneath that, we only want this to show if the user is logged in.
So we're going to say user info then.
Then we'll show something else.
So in here, in the first one, we're going to have our form.
And this is going to have actually I'll do the the handler after.
So let's just have a form tag.
We'll have a form group, give it a control ID of rating.
I'm also going to give it a class name of my too, just to add some margin on the top and bottom.
We'll close the form group.
And then let's do our form label, which will say rating, and then our form control, which is actually
going to be a select because we're going to be able to select a number from one 1 to 5.
So the value will be the rating.
We'll have an Onchange that will set the rating to whatever we select, and we're also just casting
it as a number.
And then we can close that and then we'll have our options.
The first one will just say select.
The next one will be one.
So we'll basically do one through five.
And then we'll close that up.
Okay.
And that should do it for the first.
For the rating.
Now we also want a text area form group as well.
So let's create another one.
Call this one comment.
Close that up.
And then inside here, we're going to have a label that says comment.
And then the form control this time is going to be a text area and we'll put row three.
If you want to change the size of it, you can.
Value is going to be the comment in our state on change.
We'll set that comment and then we end our form control and then we just want a button underneath that
form group.
So right here button and we're going to disable it if it's loading and it's going to be a type submit
variant primary.
And we're not going to have an on click because we're going to have an on submit on the form and then
we'll just have the text of submit.
Now, if there if the user isn't logged in, then here we're just going to show a message and we're
going to say, please log in to write a review.
And we'll close that up.
All right, So let's save that.
And if we check it out, you should see write a customer review.
And we can choose a number from 1 to 5, write a comment.
We don't have a handler for this yet, but I just want to make sure that if we log out.
And then we go to a product.
It says, please sign in to write a review, which is what we want.
So now I'm going to sign in as John, not the admin user.
So let's say John at I think it's Gmail.
Okay.
And then.
Let's go to a product and now we see our form.
So let's do let's handle the submit now.
So we're going to go back up to our form tag right here and let's say on.
On submit.
Then we're going to call.
Submit.
Handler.
Okay.
And then we'll go up.
Up above the return.
And let's create our submit handler.
So first we want to just prevent the default.
And then what we're going to do is, first of all, open up a try catch.
And in the try we we want to call create review, which is coming from our mutation.
Okay.
So let's actually let's make this a sink because we need to await.
On create review.
And what we're going to pass in here is an object.
And we want the product ID, The rating.
The rating.
And the comment.
And we're just going to tack on to this unwrap as well.
Okay.
And then we're going to Refetch after that, let's say Refetch just so the data is fresh, so Refetch.
And then we're going to have a toast.
So let's say toast.
Success.
And.
We could setrillionight Now, that's fine.
We'll just.
Yeah, actually, you know what?
Let's just set this back to the default.
Okay.
Now, if there's an error.
Wait a minute.
That should.
That should have been in the try.
So let's just cut that and put that.
In the try block And then for the catch, we're going to do toast.
Toast dot error.
And the way our message is formatted.
We want to do error dot data message or error.
Okay, So let's save that.
Let's see.
Yeah.
So we shouldn't have any warnings.
So let's try it out.
Let's just go ahead and select five and I'll just say this is a great product.
And we'll submit.
There we go.
Review submitted and it shows up here.
So John Smith, it shows the number of stars and the date and also the comment.
Now, if I try to do this again with the same user.
I get product already reviewed so the same user can't keep reviewing the product.
All right, cool.
So now that that's all set, we're going to move on to pagination.