1
00:00:02,000 --> 00:00:05,000
So lets work on this event detail page now.

2
00:00:05,000 --> 00:00:10,000
We reach this page, if in the URL we have something like

3
00:00:10,000 --> 00:00:14,000
events slash then some event id.

4
00:00:14,000 --> 00:00:17,000
So the goal is now to output the

5
00:00:17,000 --> 00:00:21,000
detail data about this event and for that you of course need

6
00:00:21,000 --> 00:00:23,000
to fetch that data.

7
00:00:23,000 --> 00:00:28,000
Now we do have our dummy data ready with all the events and

8
00:00:28,000 --> 00:00:31,000
now we wanna get an event by id in the end.

9
00:00:32,000 --> 00:00:36,000
Now for this I did provide this get event by id helper

10
00:00:36,000 --> 00:00:40,000
function here which finds an event by id.

11
00:00:40,000 --> 00:00:43,000
And hence we can call this function and pass an id to that

12
00:00:43,000 --> 00:00:46,000
function to get an event by id.

13
00:00:47,000 --> 00:00:50,000
That means that in the event detail page component we now

14
00:00:50,000 --> 00:00:54,000
just need a way of getting hold of that id which is part of

15
00:00:54,000 --> 00:00:56,000
the URL.

16
00:00:56,000 --> 00:01:00,000
And you learn how that works we can use the userouter hook

17
00:01:00,000 --> 00:01:01,000
forwarded.

18
00:01:01,000 --> 00:01:06,000
We can import use router from next router, like this and

19
00:01:10,000 --> 00:01:15,000
then call userouter to get hold of a router object provided

20
00:01:17,000 --> 00:01:18,000
by the next JS.

21
00:01:18,000 --> 00:01:23,000
And then you'll learn that on that router object we can get

22
00:01:23,000 --> 00:01:28,000
access to a query property which has all those dynamic

23
00:01:28,000 --> 00:01:33,000
puff segments that lead to this page as keys.

24
00:01:33,000 --> 00:01:38,000
So here we have event id, with a capital 'I', as a name for

25
00:01:38,000 --> 00:01:43,000
this dynamic path segment. Hence on router.query we can

26
00:01:43,000 --> 00:01:45,000
access event id.

27
00:01:45,000 --> 00:01:49,000
This give us access to the concrete value that was inserted

28
00:01:49,000 --> 00:01:52,000
in the URL when the page was loaded.

29
00:01:52,000 --> 00:01:56,000
So in this case for example, it would be E2.

30
00:01:57,000 --> 00:02:02,000
And therefore this now is the event id we are looking for.

31
00:02:02,000 --> 00:02:06,000
Now we can call get event by id, and for that we need to

32
00:02:06,000 --> 00:02:10,000
import that from the dummy data file so make sure you add

33
00:02:10,000 --> 00:02:14,000
that import statement. And we pass the event id as an

34
00:02:14,000 --> 00:02:17,000
argument to that function.

35
00:02:17,000 --> 00:02:21,000
And that will give us the event we are looking for, at least

36
00:02:21,000 --> 00:02:21,000
hopefully.

37
00:02:21,000 --> 00:02:25,000
Ofcourse we could fail, if I for example manually enter

38
00:02:25,000 --> 00:02:30,000
something like test here, then we would not find an event

39
00:02:30,000 --> 00:02:35,000
for that, because in my dummy data I have no event with an

40
00:02:35,000 --> 00:02:36,000
id of test.

41
00:02:36,000 --> 00:02:41,000
So we should handle that case, and check if event is maybe

42
00:02:42,000 --> 00:02:45,000
false by adding an exclamation mark here, in which case I

43
00:02:45,000 --> 00:02:49,000
wanna return some error message that we didn't find an

44
00:02:49,000 --> 00:02:51,000
event.

45
00:02:51,000 --> 00:02:54,000
For the moment I'll just return a paragraph here where say

46
00:02:54,000 --> 00:02:56,000
no event found. Just like that.

47
00:02:57,000 --> 00:03:00,000
But if we make it past this check, we know

48
00:03:00,000 --> 00:03:04,000
that we did find an event, and now we wanna return an output

49
00:03:04,000 --> 00:03:09,000
data for that event. And for this ofcourse it's totally up

50
00:03:09,000 --> 00:03:13,000
to you, how you want that page to look like.

51
00:03:13,000 --> 00:03:17,000
I prepared a couple of components which we can use for

52
00:03:17,000 --> 00:03:21,000
outputting that event detail data.

53
00:03:21,000 --> 00:03:25,000
Now these are regular react components and I don't wanna

54
00:03:25,000 --> 00:03:29,000
bore you with writing them, therefore you find them attached

55
00:03:29,000 --> 00:03:34,000
Attached you find an event dash detail sit file, which you

56
00:03:34,000 --> 00:03:39,000
can extract into your components folder. So that in the

57
00:03:39,000 --> 00:03:42,000
components folder you have that brand new event dash detail

58
00:03:42,000 --> 00:03:47,000
folder. In there you'll find four components files which in

59
00:03:47,000 --> 00:03:51,000
the end will output some content and also some styles for

60
00:03:51,000 --> 00:03:54,000
various files.

61
00:03:54,000 --> 00:03:57,000
Now again you can definitely go through them this is just

62
00:03:57,000 --> 00:04:02,000
standard react code, nothing next JS specific in there which

63
00:04:02,000 --> 00:04:06,000
is why am skipping this component creation because in this

64
00:04:06,000 --> 00:04:09,000
course. While ofcourse we want to talk about react in

65
00:04:09,000 --> 00:04:13,000
general. I ofcourse also want to focus on next JS as much as

66
00:04:13,000 --> 00:04:15,000
possible.

67
00:04:15,000 --> 00:04:19,000
Therefore, these components are pre-built for you and we can

68
00:04:19,000 --> 00:04:22,000
now use those components in this square bracket event id

69
00:04:22,000 --> 00:04:24,000
file.

70
00:04:24,000 --> 00:04:29,000
Here I'll replace this overall bit with a fragment which

71
00:04:29,000 --> 00:04:34,000
will import from react, so you need to add this import to

72
00:04:35,000 --> 00:04:38,000
use the built in fragment wrapper component. Which is needed

73
00:04:38,000 --> 00:04:43,000
if you have adjacent JS x elements because normally that

74
00:04:43,000 --> 00:04:47,000
would lead to an error. With the fragment wrapper you are

75
00:04:47,000 --> 00:04:50,000
allowed to have adjacent elements.

76
00:04:50,000 --> 00:04:53,000
And then here, I'll start by adding the event summary

77
00:04:53,000 --> 00:04:57,000
component. That's one of the components I provided to you

78
00:04:57,000 --> 00:05:01,000
so we need to import event summary year from going up one

79
00:05:01,000 --> 00:05:04,000
level and another level diving into components, event detail

80
00:05:04,000 --> 00:05:09,000
and then there is this event summary file. And from that we

81
00:05:12,000 --> 00:05:15,000
import event summary. Under words here we can already import

82
00:05:15,000 --> 00:05:20,000
a number of components, the event logistics component from

83
00:05:21,000 --> 00:05:25,000
going up, going up, components, event detail, event

84
00:05:25,000 --> 00:05:30,000
logistics and import the event content component from going

85
00:05:33,000 --> 00:05:38,000
up and going up, components, event detail, event content.

86
00:05:41,000 --> 00:05:45,000
Now with those components imported, down here we output

87
00:05:45,000 --> 00:05:50,000
event summary, event logistics, and event content.

88
00:05:52,000 --> 00:05:56,000
Now between the opening and closing tags of event content we

89
00:05:56,000 --> 00:06:01,000
pass in paragraph, which then receives event.description as

90
00:06:02,000 --> 00:06:05,000
a value and event, is this event we are fetching here from

91
00:06:05,000 --> 00:06:10,000
our dummy data by id and now we are accessing the

92
00:06:10,000 --> 00:06:15,000
description key to output that description text between the

93
00:06:15,000 --> 00:06:16,000
event content text.

94
00:06:18,000 --> 00:06:22,000
Event summary needs a title property, you'll see that if you

95
00:06:22,000 --> 00:06:26,000
have a look at the component, here I want the title

96
00:06:26,000 --> 00:06:31,000
property. So we pass in a title, and that is event.title

97
00:06:31,000 --> 00:06:36,000
therefore. And for the event logistics, there we need to

98
00:06:37,000 --> 00:06:42,000
pass in the date the address, the image and the imagealt tag

99
00:06:42,000 --> 00:06:46,000
So you'll pass and event.date, then pass in an address prop

100
00:06:47,000 --> 00:06:52,000
which has a value of event.location passing the image prop,

101
00:06:53,000 --> 00:06:58,000
event.image, and the imageAlt prop, with event.title as a

102
00:07:00,000 --> 00:07:04,000
value. And just as before you can ofcourse have a look at

103
00:07:04,000 --> 00:07:08,000
event logistics and you see which prompts am expecting here

104
00:07:08,000 --> 00:07:11,000
and how am using them. In the end, the date in the end is

105
00:07:11,000 --> 00:07:15,000
being transformed again, same for the address text and then

106
00:07:15,000 --> 00:07:18,000
I just outputting those different pieces of data also with

107
00:07:18,000 --> 00:07:21,000
some icons and another component which is involved, which

108
00:07:21,000 --> 00:07:26,000
can also just handles how the icons and the text next to

109
00:07:27,000 --> 00:07:28,000
them is being rendered.

110
00:07:28,000 --> 00:07:32,000
That's what we do here, and with all of that done and added

111
00:07:32,000 --> 00:07:37,000
if we now saved this, if we save all this files, if I go

112
00:07:38,000 --> 00:07:43,000
to events slash text, I get no event found, but if I go to

113
00:07:43,000 --> 00:07:48,000
M1 as Nadir, I mean E1, not M1. E1, then we see there's

114
00:07:52,000 --> 00:07:57,000
content here. Now if you zoom in a bit more, this will kind

115
00:07:57,000 --> 00:08:01,000
of break because it did not optimize it for all screen sizes

116
00:08:01,000 --> 00:08:04,000
just some basic CSS code, because ofcourse this is not

117
00:08:04,000 --> 00:08:09,000
primarily about the styling but about the logic and about

118
00:08:09,000 --> 00:08:14,000
next JS. So this now is the output for a single event, now

119
00:08:15,000 --> 00:08:19,000
from this page, we have no easy way of getting back to the

120
00:08:19,000 --> 00:08:23,000
other pages though, we can always manually change the URL,

121
00:08:23,000 --> 00:08:26,000
but we have no navigation bar for example.

122
00:08:26,000 --> 00:08:29,000
Therefore, that's what we are going to dive in next.