1
00:00:02,000 --> 00:00:06,000
So let's now output the filtered events we identified,

2
00:00:06,000 --> 00:00:09,000
for this of course, we can again use our event list

3
00:00:09,000 --> 00:00:12,000
component which we created at the beginning of this module.

4
00:00:12,000 --> 00:00:16,000
So import event list from going up, going up,

5
00:00:16,000 --> 00:00:20,000
components, events, event list,

6
00:00:20,000 --> 00:00:24,000
and then here all output,

7
00:00:24,000 --> 00:00:29,000
event, woops event, list like this, and set my items equal

8
00:00:30,000 --> 00:00:33,000
to the filtered events array, which we're producing here

9
00:00:36,000 --> 00:00:40,000
Now if we save this and I do enter a valid combination

10
00:00:40,000 --> 00:00:45,000
like slash events slash 2021 slash 5.

11
00:00:45,000 --> 00:00:49,000
I'm looking for events from May, 2021.

12
00:00:49,000 --> 00:00:52,000
And you see, I do render two events here because indeed

13
00:00:52,000 --> 00:00:57,000
I do have two events, which date is in May, 2021.

14
00:00:58,000 --> 00:01:00,000
So these are being displayed here then.

15
00:01:01,000 --> 00:01:04,000
So that's working, that's working as it should.

16
00:01:04,000 --> 00:01:07,000
And therefore, now let's just finish this app up,

17
00:01:07,000 --> 00:01:10,000
Polish it a little bit, add a couple of extra styles

18
00:01:10,000 --> 00:01:14,000
and components, and then wrap up this module.

19
00:01:14,000 --> 00:01:17,000
So to Polish this all a little bit,

20
00:01:17,000 --> 00:01:19,000
I'll start by adding a new component

21
00:01:19,000 --> 00:01:21,000
which I prepared for you.

22
00:01:21,000 --> 00:01:24,000
Attached you find a results title, sip file

23
00:01:24,000 --> 00:01:28,000
which contains a results title component and its styles.

24
00:01:28,000 --> 00:01:30,000
And you should drag the JavaScript

25
00:01:30,000 --> 00:01:33,000
and to CSS file, which is part of that attached sub file

26
00:01:33,000 --> 00:01:35,000
into your events folder.

27
00:01:37,000 --> 00:01:40,000
So that in there you then have the results title JS file

28
00:01:40,000 --> 00:01:43,000
and the results titled modules CSS file.

29
00:01:43,000 --> 00:01:45,000
And that's a very simple component,

30
00:01:45,000 --> 00:01:49,000
which adjust when a render on top of the event list here

31
00:01:49,000 --> 00:01:51,000
in the slack component.

32
00:01:51,000 --> 00:01:54,000
So here I'll, then I'll put the results title

33
00:01:54,000 --> 00:01:57,000
and replace that diff with a fragment,

34
00:01:57,000 --> 00:02:00,000
and make sure that we import both results title

35
00:02:00,000 --> 00:02:04,000
as well as fragment in this component now,

36
00:02:04,000 --> 00:02:06,000
Fragment from react and results title

37
00:02:06,000 --> 00:02:09,000
from this file we just added.

38
00:02:09,000 --> 00:02:12,000
Now results title, this component

39
00:02:12,000 --> 00:02:14,000
actually wants a date property

40
00:02:14,000 --> 00:02:18,000
a date prop, which had then outputs in a human readable way,

41
00:02:18,000 --> 00:02:21,000
and therefore we should make sure that we provide

42
00:02:21,000 --> 00:02:26,000
this date prop and to pass that to results title,

43
00:02:26,000 --> 00:02:30,000
down here, I'll create a date constant

44
00:02:30,000 --> 00:02:33,000
where I instantiate a new date object

45
00:02:33,000 --> 00:02:37,000
to which I pass my numb year and numb month,

46
00:02:37,000 --> 00:02:41,000
that is a way of creating a date based on a year month.

47
00:02:41,000 --> 00:02:42,000
The only important thing here is

48
00:02:42,000 --> 00:02:44,000
that you need to deduct one from the month

49
00:02:44,000 --> 00:02:48,000
because that is a zero based index year for the month.

50
00:02:48,000 --> 00:02:52,000
The date constructor function expects the month to begin

51
00:02:52,000 --> 00:02:56,000
at zero, not at one, which is why I deduct one here.

52
00:02:56,000 --> 00:02:59,000
And then we can set the date prop

53
00:02:59,000 --> 00:03:02,000
on results title and pass in our date object.

54
00:03:02,000 --> 00:03:07,000
And that way with that we just have this little extra detail

55
00:03:07,000 --> 00:03:11,000
on top of that and we can now go back to all events again.

56
00:03:12,000 --> 00:03:16,000
Now I also want to Polish messages like this one here

57
00:03:16,000 --> 00:03:18,000
when we didn't find any events

58
00:03:18,000 --> 00:03:20,000
or when we have an invalid filter, like for ABC

59
00:03:22,000 --> 00:03:24,000
I want to present this in a nicer way

60
00:03:24,000 --> 00:03:26,000
and also provide a button

61
00:03:26,000 --> 00:03:29,000
to go back to the all events page then.

62
00:03:30,000 --> 00:03:34,000
And therefor this and this slack page component.

63
00:03:34,000 --> 00:03:37,000
Let's work on this error message here.

64
00:03:37,000 --> 00:03:40,000
When we don't find any matching events

65
00:03:40,000 --> 00:03:44,000
I'll wrap this paragraph in a fragment.

66
00:03:44,000 --> 00:03:46,000
So we need to import fragment from react,

67
00:03:46,000 --> 00:03:48,000
but we already did so before,

68
00:03:48,000 --> 00:03:49,000
so that should already be there.

69
00:03:49,000 --> 00:03:52,000
And we put the paragraph in there

70
00:03:52,000 --> 00:03:56,000
so that below the paragraph, we can also output a button.

71
00:03:56,000 --> 00:04:01,000
So we need to import button from our own component file.

72
00:04:01,000 --> 00:04:04,000
And the With the button added here on the button,

73
00:04:04,000 --> 00:04:09,000
I'll say show all events and that should be be a link,

74
00:04:09,000 --> 00:04:12,000
So I will set the link prop two slash event.

75
00:04:13,000 --> 00:04:15,000
Know that buttons should actually be centered,

76
00:04:15,000 --> 00:04:20,000
so wrap it in a Dev with that global center clause.

77
00:04:20,000 --> 00:04:22,000
I showed you in one of the last lecture.

78
00:04:24,000 --> 00:04:29,000
And I'll do that Same thing for this invalid filter error.

79
00:04:30,000 --> 00:04:32,000
I'll wrap this in a fragment as well

80
00:04:32,000 --> 00:04:35,000
and add my button here, as well as this paragraph

81
00:04:35,000 --> 00:04:38,000
move that all into the fragment.

82
00:04:38,000 --> 00:04:41,000
So that here, we also got a way of going back.

83
00:04:42,000 --> 00:04:45,000
Now we have the button but the message still looks ugly.

84
00:04:45,000 --> 00:04:49,000
And for that, I prepared a never component for you

85
00:04:49,000 --> 00:04:51,000
which you all defined attached.

86
00:04:51,000 --> 00:04:55,000
It's a component you should move into your UI folder,

87
00:04:55,000 --> 00:04:59,000
the error alert component which is attached

88
00:04:59,000 --> 00:05:03,000
this error alert component gives us a nice container

89
00:05:03,000 --> 00:05:05,000
for error messages like this.

90
00:05:05,000 --> 00:05:08,000
And therefore in the Slack component

91
00:05:08,000 --> 00:05:10,000
we should import error alert from

92
00:05:10,000 --> 00:05:15,000
and then dive into the UI folder in the components folder

93
00:05:15,000 --> 00:05:18,000
and into the error alert file.

94
00:05:18,000 --> 00:05:21,000
And then simply wrap the paragraph here

95
00:05:21,000 --> 00:05:23,000
for the invalid filter for example,

96
00:05:23,000 --> 00:05:26,000
with error alert with this component

97
00:05:26,000 --> 00:05:29,000
simply wrap it around this paragraph.

98
00:05:29,000 --> 00:05:34,000
And if you do so, this now looks nicer,

99
00:05:34,000 --> 00:05:37,000
now for the case that we don't find any events,

100
00:05:37,000 --> 00:05:40,000
I also want to use that component.

101
00:05:40,000 --> 00:05:42,000
So they'll for, for this error message down here

102
00:05:42,000 --> 00:05:44,000
for the no events found message.

103
00:05:44,000 --> 00:05:49,000
We can also wrap this into an error alert like that.

104
00:05:51,000 --> 00:05:53,000
I also want to use that error alert

105
00:05:53,000 --> 00:05:56,000
in the event ID page here,

106
00:05:56,000 --> 00:05:58,000
because here also have the case

107
00:05:58,000 --> 00:06:03,000
that we didn't find any event for a chosen event ID

108
00:06:03,000 --> 00:06:06,000
and there for here justice before,

109
00:06:06,000 --> 00:06:11,000
all import error alert from going up going up,

110
00:06:11,000 --> 00:06:14,000
components, UI error alert,

111
00:06:14,000 --> 00:06:18,000
and then wrap this paragraph with it.

112
00:06:18,000 --> 00:06:21,000
So error alert wrapped around this paragraph,

113
00:06:22,000 --> 00:06:26,000
so that if we do a look for an event which doesn't exist

114
00:06:26,000 --> 00:06:29,000
for example, slash events slash test.

115
00:06:29,000 --> 00:06:32,000
So just one dynamic segment after events

116
00:06:32,000 --> 00:06:36,000
but a segment value which doesn't match any event ID.

117
00:06:36,000 --> 00:06:38,000
I get no event found.

118
00:06:39,000 --> 00:06:42,000
And with that, we should be good.

119
00:06:42,000 --> 00:06:46,000
Now we wired up all those different values and pages

120
00:06:46,000 --> 00:06:50,000
and they're now all working the way they should work.

121
00:06:50,000 --> 00:06:53,000
We can filter, we can show all events,

122
00:06:53,000 --> 00:06:55,000
we can dive into a single event

123
00:06:55,000 --> 00:07:00,000
and we made that work with standard react and next JS.