All language subtitles for 009 Adding the _Event Detail_ Page (Dynamic Route)_Downloadly.ir_en

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.