So lets work on this event detail page now.
We reach this page, if in the URL we have something like
events slash then some event id.
So the goal is now to output the
detail data about this event and for that you of course need
to fetch that data.
Now we do have our dummy data ready with all the events and
now we wanna get an event by id in the end.
Now for this I did provide this get event by id helper
function here which finds an event by id.
And hence we can call this function and pass an id to that
function to get an event by id.
That means that in the event detail page component we now
just need a way of getting hold of that id which is part of
the URL.
And you learn how that works we can use the userouter hook
forwarded.
We can import use router from next router, like this and
then call userouter to get hold of a router object provided
by the next JS.
And then you'll learn that on that router object we can get
access to a query property which has all those dynamic
puff segments that lead to this page as keys.
So here we have event id, with a capital 'I', as a name for
this dynamic path segment. Hence on router.query we can
access event id.
This give us access to the concrete value that was inserted
in the URL when the page was loaded.
So in this case for example, it would be E2.
And therefore this now is the event id we are looking for.
Now we can call get event by id, and for that we need to
import that from the dummy data file so make sure you add
that import statement. And we pass the event id as an
argument to that function.
And that will give us the event we are looking for, at least
hopefully.
Ofcourse we could fail, if I for example manually enter
something like test here, then we would not find an event
for that, because in my dummy data I have no event with an
id of test.
So we should handle that case, and check if event is maybe
false by adding an exclamation mark here, in which case I
wanna return some error message that we didn't find an
event.
For the moment I'll just return a paragraph here where say
no event found. Just like that.
But if we make it past this check, we know
that we did find an event, and now we wanna return an output
data for that event. And for this ofcourse it's totally up
to you, how you want that page to look like.
I prepared a couple of components which we can use for
outputting that event detail data.
Now these are regular react components and I don't wanna
bore you with writing them, therefore you find them attached
Attached you find an event dash detail sit file, which you
can extract into your components folder. So that in the
components folder you have that brand new event dash detail
folder. In there you'll find four components files which in
the end will output some content and also some styles for
various files.
Now again you can definitely go through them this is just
standard react code, nothing next JS specific in there which
is why am skipping this component creation because in this
course. While ofcourse we want to talk about react in
general. I ofcourse also want to focus on next JS as much as
possible.
Therefore, these components are pre-built for you and we can
now use those components in this square bracket event id
file.
Here I'll replace this overall bit with a fragment which
will import from react, so you need to add this import to
use the built in fragment wrapper component. Which is needed
if you have adjacent JS x elements because normally that
would lead to an error. With the fragment wrapper you are
allowed to have adjacent elements.
And then here, I'll start by adding the event summary
component. That's one of the components I provided to you
so we need to import event summary year from going up one
level and another level diving into components, event detail
and then there is this event summary file. And from that we
import event summary. Under words here we can already import
a number of components, the event logistics component from
going up, going up, components, event detail, event
logistics and import the event content component from going
up and going up, components, event detail, event content.
Now with those components imported, down here we output
event summary, event logistics, and event content.
Now between the opening and closing tags of event content we
pass in paragraph, which then receives event.description as
a value and event, is this event we are fetching here from
our dummy data by id and now we are accessing the
description key to output that description text between the
event content text.
Event summary needs a title property, you'll see that if you
have a look at the component, here I want the title
property. So we pass in a title, and that is event.title
therefore. And for the event logistics, there we need to
pass in the date the address, the image and the imagealt tag
So you'll pass and event.date, then pass in an address prop
which has a value of event.location passing the image prop,
event.image, and the imageAlt prop, with event.title as a
value. And just as before you can ofcourse have a look at
event logistics and you see which prompts am expecting here
and how am using them. In the end, the date in the end is
being transformed again, same for the address text and then
I just outputting those different pieces of data also with
some icons and another component which is involved, which
can also just handles how the icons and the text next to
them is being rendered.
That's what we do here, and with all of that done and added
if we now saved this, if we save all this files, if I go
to events slash text, I get no event found, but if I go to
M1 as Nadir, I mean E1, not M1. E1, then we see there's
content here. Now if you zoom in a bit more, this will kind
of break because it did not optimize it for all screen sizes
just some basic CSS code, because ofcourse this is not
primarily about the styling but about the logic and about
next JS. So this now is the output for a single event, now
from this page, we have no easy way of getting back to the
other pages though, we can always manually change the URL,
but we have no navigation bar for example.
Therefore, that's what we are going to dive in next.