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.