And now we are going to build the comment dialog component, which is going to look like this.
We can see all the previous comments about this interview, and we can select a rating and add our comment
with the submit button.
And when we click to this select select element, we're going to see a couple of different options starting
from the one star option to the five.
And let's try to see how we can build this component.
So basically when we click to this button, when we click to this button um this dialog should open
right.
So I'll go ahead and uncomment this.
Open up my left hand side under the components I'll just say comment dialog dot TSX.
Let's try to import it.
And just go ahead and try to build it.
So first things first we'll get the interview You ID as the argument so we can say inerview id, but
instead of type of string, we can just say this is going to be a convex ID and specifically the comment
ID, right.
I mean the inner view id my bad.
This is an inner view ID.
So we go ahead and get this specific type.
Then we would like to have a couple of different states such as to check if dialogue is open or not.
By default this is going to be false.
And the comment state that we're going to keep track of.
And then the default rating we're going to start with three.
And user can change it.
So I will get a couple of different mutations and queries.
So we're going to have one mutation that is going to allow us to add a comment.
And we can get the old users, which is going to be a query.
And then we can get all the existing comments.
So once again this is a query that we have built.
Let's go ahead and see the See the definition.
Okay.
Get all comments for an interview.
We are just fetching those now.
When we submit this form we would like to have a function let's say const handle submit which is going
to be an async function.
And it will have a couple of different checks.
So first I'll say if comment is not defined right.
We'll just show it host.
That's going to say please enter a comment.
Then we can have a try catch block.
So this is really basic.
So I'll go ahead and paste it.
We'll just have a try block where we would like to add a comment.
We are calling our mutation.
Then we'll have a success host.
And just to reset our form.
And in the catch we'll show an error toast.
And then I will have a helper function that is going to allow me to render stars.
So if it is let's say we say render three stars that is filled in.
it would give us this output, and then it would put two more stars at the very bottom or at the very
end.
But this will not be filled in.
So let's just see what I mean.
This is going to be a function called render stars.
And it's going to be around ten lines of code.
So basically we're going to map through five times.
And if the star value is equal to the rating the class name will be filled.
But else it is not going to be filled.
So this is what we're trying to build.
And we are going to call this function in a couple of minutes.
And let's say if existing comments is equal to undefined, that means we are in the loading state.
We can just return null or we can return a loader UI.
And we can even add or field to just say if users is undefined, uh, just return null.
So basically this is our loading state.
Then we can go ahead and build the return statement.
So since going to since this is going to be a dialog, we can just wrap our entire application with
it and make sure you import it from the UI folder.
There we go.
We'll have a couple of different props such as open that's going to be equal to is open.
And then we will have let's say on open change this is going to be equal to our setter function.
Then we would like to have our trigger.
So we'll just say trigger button.
You can find this comment from the source code and copy it.
Paste it.
There we go.
Let's try to import them from the UI folder.
Okay.
So this is the button that says add comment.
Then we can put the dialog say content component.
That is That is going to take some classes.
Let me just go ahead and grab it and then we'll have the header component with the title.
Okay.
Below to the header we'll have a div with some classes let's say space y of six.
And then we'll have let's say a check that's going to say existing comments dot length.
If it is greater than zero then we would like to render this right hand side which is basically going
to be our UI.
So I'll have a div at the very top.
This is going to be let's say class name space Y of four.
This is our parent component.
Then we would like to just show the numbers.
So I'll just say show us a badge.
And this is going to give you the length.
So it will say like five comments right.
Let's save to get this formatting.
After this div we would like to like to put the actual existing comments.
So I'll just say display existing comments, which is going to be inside a scroll area.
So I will go ahead and grab the code which is around 20 lines of code.
Okay.
So let's go ahead and get the scroll area.
And this is a function that we already have.
Get interview info.
This will grab you the interviewer info.
Let's say give us the avatar, give us the image as well as the fallback.
And we have a format function.
This is going to be coming from date fns.
So I'll just say import format from date fns.
There we go.
Let's actually save it and try to see the output.
Basically we have the rating, the comment content as well as the, the interviewer, um, info I should
say.
So let's click to this one.
Currently we cannot see anything because in our database we don't really have any comments.
So let's just keep continue to building which is going to be this Rest component okay.
So after the scroll area I will say that maybe just go above here I mean below.
Okay.
So below to this curly braces, we would like to have a div that's going to have class name of space
Y of four.
And we would like to put the rating component here.
I will just go ahead and grab it as well.
This is going to be a select component.
Let's paste this in.
So we have space Y of two as the class name.
We'll get the label from the components.
And I believe we don't have the label component installed right.
Let's double check under the UI we don't have label.
So let's go ahead and install it in a new terminal, I'll say.
Mpcs Shad Khan at latest at label.
Okay, now we can install it.
I mean import it from the UI folder.
Let's get a select select trigger component, value content and item.
Okay.
So basically five times we would like to render stars.
And it is going to look like this.
So this is our first time rendering five stars.
This is our second time all the way up to five.
Okay.
So that's going to be it for the rating part as well.
We would like to put the comment section as well.
This is going to be a text area component.
Let's say div with class name of space y of two.
We can put our label component that says your Early comment.
And we all have the text area component, which is something that we have already used and imported.
This is going to take the value.
Let me just go ahead and grab all of them.
We'll have an Onchange function.
This is going to update the state placeholder and then a class name.
Okay.
So let's save after the comment.
So we'll basically go all the way down to here just above the dialogue content.
We would like to put our buttons.
This is going to be inside a dialog footer component.
Okay.
So let's just try to see the UI if I clicked this.
This is what I can see.
We don't really have any existing comments, so I'll just go ahead and say five stars.
He knows what he is doing.
Let's hire him.
Submit this comment submitted successfully and we can see the previous comments.
Right?
So that means everything is working as expected.
And in this interview let's just put one.
He tried to cheat in his interview.
Let's say ban him from everywhere.
Okay, so everything is working as expected with the ratings, with the comments.
And we are able to fetch those as well.
And with that, I think that's going to be it for the dialogue.
I mean comment dialogue component as well.
We have two different queries and we have one mutation.
And other than this, this code is completely easy to understand.
Maybe this function looks a little bit weird at first, but we are basically trying to render five different
stars that is either failed or not failed.
Okay, so with that, that's going to be it for this component as well.