All language subtitles for 015 Final Steps_Downloadly.ir_en

So let's now output the filtered events we identified,

for this of course, we can again use our event list

component which we created at the beginning of this module.

So import event list from going up, going up,

components, events, event list,

and then here all output,

event, woops event, list like this, and set my items equal

to the filtered events array, which we're producing here

Now if we save this and I do enter a valid combination

like slash events slash 2021 slash 5.

I'm looking for events from May, 2021.

And you see, I do render two events here because indeed

I do have two events, which date is in May, 2021.

So these are being displayed here then.

So that's working, that's working as it should.

And therefore, now let's just finish this app up,

Polish it a little bit, add a couple of extra styles

and components, and then wrap up this module.

So to Polish this all a little bit,

I'll start by adding a new component

which I prepared for you.

Attached you find a results title, sip file

which contains a results title component and its styles.

And you should drag the JavaScript

and to CSS file, which is part of that attached sub file

into your events folder.

So that in there you then have the results title JS file

and the results titled modules CSS file.

And that's a very simple component,

which adjust when a render on top of the event list here

in the slack component.

So here I'll, then I'll put the results title

and replace that diff with a fragment,

and make sure that we import both results title

as well as fragment in this component now,

Fragment from react and results title

from this file we just added.

Now results title, this component

actually wants a date property

a date prop, which had then outputs in a human readable way,

and therefore we should make sure that we provide

this date prop and to pass that to results title,

down here, I'll create a date constant

where I instantiate a new date object

to which I pass my numb year and numb month,

that is a way of creating a date based on a year month.

The only important thing here is

that you need to deduct one from the month

because that is a zero based index year for the month.

The date constructor function expects the month to begin

at zero, not at one, which is why I deduct one here.

And then we can set the date prop

on results title and pass in our date object.

And that way with that we just have this little extra detail

on top of that and we can now go back to all events again.

Now I also want to Polish messages like this one here

when we didn't find any events

or when we have an invalid filter, like for ABC

I want to present this in a nicer way

and also provide a button

to go back to the all events page then.

And therefor this and this slack page component.

Let's work on this error message here.

When we don't find any matching events

I'll wrap this paragraph in a fragment.

So we need to import fragment from react,

but we already did so before,

so that should already be there.

And we put the paragraph in there

so that below the paragraph, we can also output a button.

So we need to import button from our own component file.

And the With the button added here on the button,

I'll say show all events and that should be be a link,

So I will set the link prop two slash event.

Know that buttons should actually be centered,

so wrap it in a Dev with that global center clause.

I showed you in one of the last lecture.

And I'll do that Same thing for this invalid filter error.

I'll wrap this in a fragment as well

and add my button here, as well as this paragraph

move that all into the fragment.

So that here, we also got a way of going back.

Now we have the button but the message still looks ugly.

And for that, I prepared a never component for you

which you all defined attached.

It's a component you should move into your UI folder,

the error alert component which is attached

this error alert component gives us a nice container

for error messages like this.

And therefore in the Slack component

we should import error alert from

and then dive into the UI folder in the components folder

and into the error alert file.

And then simply wrap the paragraph here

for the invalid filter for example,

with error alert with this component

simply wrap it around this paragraph.

And if you do so, this now looks nicer,

now for the case that we don't find any events,

I also want to use that component.

So they'll for, for this error message down here

for the no events found message.

We can also wrap this into an error alert like that.

I also want to use that error alert

in the event ID page here,

because here also have the case

that we didn't find any event for a chosen event ID

and there for here justice before,

all import error alert from going up going up,

components, UI error alert,

and then wrap this paragraph with it.

So error alert wrapped around this paragraph,

so that if we do a look for an event which doesn't exist

for example, slash events slash test.

So just one dynamic segment after events

but a segment value which doesn't match any event ID.

I get no event found.

And with that, we should be good.

Now we wired up all those different values and pages

and they're now all working the way they should work.

We can filter, we can show all events,

we can dive into a single event

and we made that work with standard react and next JS.