1
00:00:02,020 --> 00:00:05,810
So we added these two Ajax requests,

2
00:00:05,810 --> 00:00:08,530
getting the comments and sending a new comment.

3
00:00:08,530 --> 00:00:11,590
We can still improve the user experience though.

4
00:00:11,590 --> 00:00:12,423
For example,

5
00:00:12,423 --> 00:00:16,090
when we send a comment, once the response is there,

6
00:00:16,090 --> 00:00:19,892
the response itself might not carry any information we need,

7
00:00:19,892 --> 00:00:23,510
but the fact that we got a response is interesting.

8
00:00:23,510 --> 00:00:27,890
We might want to refetch all the comments then

9
00:00:27,890 --> 00:00:31,660
to make sure that we show an updated list of comments.

10
00:00:31,660 --> 00:00:32,560
So that for example,

11
00:00:32,560 --> 00:00:35,840
if I currently do have a loaded list of comments already,

12
00:00:35,840 --> 00:00:38,040
and I add another new comment,

13
00:00:38,040 --> 00:00:40,440
this new comment automatically shows up here

14
00:00:40,440 --> 00:00:42,370
because I refetch my comments.

15
00:00:42,370 --> 00:00:45,080
That's something we could do here.

16
00:00:45,080 --> 00:00:47,660
And to do that, we can of course,

17
00:00:47,660 --> 00:00:51,100
simply go back to comments.js and use the fact

18
00:00:51,100 --> 00:00:54,240
that fetch still yields us a promise here.

19
00:00:54,240 --> 00:00:55,490
It always does.

20
00:00:55,490 --> 00:00:58,920
And the promise will resolve once we got a response,

21
00:00:58,920 --> 00:01:02,230
we learned that earlier, hence again,

22
00:01:02,230 --> 00:01:04,022
here for saveComment,

23
00:01:04,022 --> 00:01:07,590
we can also convert this into an async function.

24
00:01:07,590 --> 00:01:09,963
And again, await is here.

25
00:01:10,900 --> 00:01:13,480
And then eventually we get back a response here

26
00:01:13,480 --> 00:01:14,313
as we learned.

27
00:01:15,760 --> 00:01:18,740
Now I am actually not interested in the response here,

28
00:01:18,740 --> 00:01:21,890
but I'm interested in waiting until we have it.

29
00:01:21,890 --> 00:01:23,895
Because then in the next line thereafter,

30
00:01:23,895 --> 00:01:28,450
we can actually, again, fetch all the comments.

31
00:01:28,450 --> 00:01:30,580
And for this we can manually trigger

32
00:01:30,580 --> 00:01:33,960
this fetchCommentsForPost function here.

33
00:01:33,960 --> 00:01:37,440
We can call fetchCommentsForPost ourselves here

34
00:01:37,440 --> 00:01:40,913
so that we do refetch all those comments.

35
00:01:42,980 --> 00:01:46,630
If we do that and we save everything.

36
00:01:46,630 --> 00:01:48,850
If we reload this page maybe,

37
00:01:48,850 --> 00:01:52,767
and I add another new comment,

38
00:01:52,767 --> 00:01:55,720
"should reload comments,"

39
00:01:55,720 --> 00:01:57,360
and I click save comment.

40
00:01:57,360 --> 00:01:59,830
Then once the response is there,

41
00:01:59,830 --> 00:02:01,770
which of course is super quick here

42
00:02:01,770 --> 00:02:05,180
because it's all happening on the same computer in the end.

43
00:02:05,180 --> 00:02:07,880
I do reload this list of comments.

44
00:02:07,880 --> 00:02:10,250
Of course, also if it's already there,

45
00:02:10,250 --> 00:02:12,540
if I send a another new comment here,

46
00:02:12,540 --> 00:02:14,267
you see, it looks like that comment

47
00:02:14,267 --> 00:02:16,510
was just added because I refetched

48
00:02:16,510 --> 00:02:19,410
and rerendered all these comments.

49
00:02:19,410 --> 00:02:21,360
Alternatively, you could of course check

50
00:02:21,360 --> 00:02:23,880
if the list of comments was already rendered

51
00:02:23,880 --> 00:02:27,400
and just add a new comment element manually here.

52
00:02:27,400 --> 00:02:31,090
That's definitely a nice practice for working with the DOM,

53
00:02:31,090 --> 00:02:33,700
but here that's not the main focus of this section.

54
00:02:33,700 --> 00:02:36,370
So I'll just call fetchCommentsForPost,

55
00:02:36,370 --> 00:02:39,930
to send another GET request for all those comments again,

56
00:02:39,930 --> 00:02:42,160
and that already improves the user experience

57
00:02:42,160 --> 00:02:43,410
a little bit I would say.

58
00:02:45,190 --> 00:02:46,755
Now, in addition to that,

59
00:02:46,755 --> 00:02:50,210
we also might want to handle the case

60
00:02:50,210 --> 00:02:52,650
that we don't have any comments,

61
00:02:52,650 --> 00:02:57,020
because if I create a new post, a second post,

62
00:02:59,630 --> 00:03:04,490
this is just a dummy post without comments.

63
00:03:04,490 --> 00:03:08,750
If I add such a new post here, and I view that post,

64
00:03:08,750 --> 00:03:11,380
of course there if I click load comments.

65
00:03:11,380 --> 00:03:14,180
I don't fetch any comments because they don't have any,

66
00:03:14,180 --> 00:03:18,470
but the load comments button disappeared because, well,

67
00:03:18,470 --> 00:03:21,803
it tried to fetch comments, which don't exist here.

68
00:03:22,720 --> 00:03:24,650
So we might want to handle this case,

69
00:03:24,650 --> 00:03:28,410
this scenario, that we do successfully fetch comments

70
00:03:28,410 --> 00:03:30,463
but there are no comments.

71
00:03:31,450 --> 00:03:34,700
For this we can go back to the fetchCommentsForPost

72
00:03:34,700 --> 00:03:36,080
function here.

73
00:03:36,080 --> 00:03:40,300
And before we create and output our comments list.

74
00:03:40,300 --> 00:03:42,070
Once we got the responseData,

75
00:03:42,070 --> 00:03:45,080
which is that list of comments, as we know,

76
00:03:45,080 --> 00:03:48,460
we can check if responseData is truthy.

77
00:03:48,460 --> 00:03:52,810
And if responseData.length is greater than zero.

78
00:03:52,810 --> 00:03:55,820
Which means it's in a ray with at least one item.

79
00:03:55,820 --> 00:04:00,820
Then and only then I want to execute this code.

80
00:04:01,150 --> 00:04:03,333
So I will move that into this if block.

81
00:04:04,780 --> 00:04:07,480
So then I only outputted this list of comments

82
00:04:07,480 --> 00:04:09,053
if I do have comments.

83
00:04:09,920 --> 00:04:13,240
Else, if I don't fetch any comments,

84
00:04:13,240 --> 00:04:16,100
then we instead might want to reach out to this

85
00:04:16,100 --> 00:04:17,783
commentsSectionElement,

86
00:04:19,089 --> 00:04:23,510
and maybe just update the paragraph which we have in there.

87
00:04:23,510 --> 00:04:25,830
The text of this paragraph.

88
00:04:25,830 --> 00:04:27,588
There, we might want to say,

89
00:04:27,588 --> 00:04:32,020
we couldn't find any comments or anything like that.

90
00:04:32,020 --> 00:04:35,003
So we might want to update the text, but keep this button.

91
00:04:35,910 --> 00:04:38,800
Now, since this paragraph is the first child element

92
00:04:38,800 --> 00:04:40,430
in this section here,

93
00:04:40,430 --> 00:04:42,240
we could do this by reaching out

94
00:04:42,240 --> 00:04:44,440
to the firstElementChild here,

95
00:04:44,440 --> 00:04:47,000
which is that paragraph and simply changing

96
00:04:47,000 --> 00:04:49,057
the text content here to,

97
00:04:49,057 --> 00:04:53,333
"We could not find any comments.

98
00:04:55,060 --> 00:04:57,537
Maybe add one?"

99
00:04:58,920 --> 00:04:59,963
Something like this.

100
00:05:01,890 --> 00:05:03,670
And now I just reformatted this

101
00:05:03,670 --> 00:05:05,370
to make this a bit easier to read.

102
00:05:07,356 --> 00:05:08,880
So this is now in a new line,

103
00:05:08,880 --> 00:05:11,143
but it still belongs to this line here.

104
00:05:12,360 --> 00:05:15,380
So if we now save this all here,

105
00:05:15,380 --> 00:05:18,900
if I reload this post page here and I click load comments,

106
00:05:18,900 --> 00:05:21,690
if you watch this text, it now did change,

107
00:05:21,690 --> 00:05:23,873
but we can still click load comments.

108
00:05:24,950 --> 00:05:29,950
And if I add a test comment for this post,

109
00:05:30,250 --> 00:05:32,170
then of course we see that comment.

110
00:05:32,170 --> 00:05:34,490
And if I now reload this page and click load comments,

111
00:05:34,490 --> 00:05:35,910
I also fetch this,

112
00:05:35,910 --> 00:05:38,950
but now we also saw that we can handle the case

113
00:05:38,950 --> 00:05:41,143
that we got no comments.

114
00:05:42,070 --> 00:05:45,700
So these are some user experience improvements,

115
00:05:45,700 --> 00:05:48,570
which are probably worth adding.

116
00:05:48,570 --> 00:05:52,050
Now there's just one last improvement left,

117
00:05:52,050 --> 00:05:53,740
which I also want to explore,

118
00:05:53,740 --> 00:05:55,863
and that would be error handling.