So we added these two Ajax requests,
getting the comments and sending a new comment.
We can still improve the user experience though.
For example,
when we send a comment, once the response is there,
the response itself might not carry any information we need,
but the fact that we got a response is interesting.
We might want to refetch all the comments then
to make sure that we show an updated list of comments.
So that for example,
if I currently do have a loaded list of comments already,
and I add another new comment,
this new comment automatically shows up here
because I refetch my comments.
That's something we could do here.
And to do that, we can of course,
simply go back to comments.js and use the fact
that fetch still yields us a promise here.
It always does.
And the promise will resolve once we got a response,
we learned that earlier, hence again,
here for saveComment,
we can also convert this into an async function.
And again, await is here.
And then eventually we get back a response here
as we learned.
Now I am actually not interested in the response here,
but I'm interested in waiting until we have it.
Because then in the next line thereafter,
we can actually, again, fetch all the comments.
And for this we can manually trigger
this fetchCommentsForPost function here.
We can call fetchCommentsForPost ourselves here
so that we do refetch all those comments.
If we do that and we save everything.
If we reload this page maybe,
and I add another new comment,
"should reload comments,"
and I click save comment.
Then once the response is there,
which of course is super quick here
because it's all happening on the same computer in the end.
I do reload this list of comments.
Of course, also if it's already there,
if I send a another new comment here,
you see, it looks like that comment
was just added because I refetched
and rerendered all these comments.
Alternatively, you could of course check
if the list of comments was already rendered
and just add a new comment element manually here.
That's definitely a nice practice for working with the DOM,
but here that's not the main focus of this section.
So I'll just call fetchCommentsForPost,
to send another GET request for all those comments again,
and that already improves the user experience
a little bit I would say.
Now, in addition to that,
we also might want to handle the case
that we don't have any comments,
because if I create a new post, a second post,
this is just a dummy post without comments.
If I add such a new post here, and I view that post,
of course there if I click load comments.
I don't fetch any comments because they don't have any,
but the load comments button disappeared because, well,
it tried to fetch comments, which don't exist here.
So we might want to handle this case,
this scenario, that we do successfully fetch comments
but there are no comments.
For this we can go back to the fetchCommentsForPost
function here.
And before we create and output our comments list.
Once we got the responseData,
which is that list of comments, as we know,
we can check if responseData is truthy.
And if responseData.length is greater than zero.
Which means it's in a ray with at least one item.
Then and only then I want to execute this code.
So I will move that into this if block.
So then I only outputted this list of comments
if I do have comments.
Else, if I don't fetch any comments,
then we instead might want to reach out to this
commentsSectionElement,
and maybe just update the paragraph which we have in there.
The text of this paragraph.
There, we might want to say,
we couldn't find any comments or anything like that.
So we might want to update the text, but keep this button.
Now, since this paragraph is the first child element
in this section here,
we could do this by reaching out
to the firstElementChild here,
which is that paragraph and simply changing
the text content here to,
"We could not find any comments.
Maybe add one?"
Something like this.
And now I just reformatted this
to make this a bit easier to read.
So this is now in a new line,
but it still belongs to this line here.
So if we now save this all here,
if I reload this post page here and I click load comments,
if you watch this text, it now did change,
but we can still click load comments.
And if I add a test comment for this post,
then of course we see that comment.
And if I now reload this page and click load comments,
I also fetch this,
but now we also saw that we can handle the case
that we got no comments.
So these are some user experience improvements,
which are probably worth adding.
Now there's just one last improvement left,
which I also want to explore,
and that would be error handling.