All language subtitles for 012 Adding a Filter Form for Filtering Events_Downloadly.ir_en

Now my goal here is to add a filter area

on this AllEvents page

above that list of events,

where we can select a year and a month in dropdown menus.

And when we selected a combination

and clicked on find events,

we change the URL and we go to this filter URL

to this Slack page here.

And on that page, we then read the filter values

from the URL to pick the correct events.

Sounds cryptic?

Well, let's implement it together step-by-step.

And the first step for that

is to add a little filter box, a search box

above that list of events on the AllEvents page.

Now, for this, I'll add a new component

in this events folder

and I'll name it, events-search.js.

Now this will hold functional component,

the EventsSearch component,

which receives props and which we, as always,

export, of course.

Like this.

And then in here, we'll have a couple of things

which we need to do.

First of all, I'll start with the JSX code

that should be returned.

Here I wanna return a form

because we'll have a couple of inputs

and those inputs can take different values

and ultimately they are submitted.

So we have a form.

And in that form, I have a div with another div inside

with a label inside where I say year.

And this label will then be for a select element,

so for a dropdown which allows us to select a year.

Therefore I'll give this label the htmlFor attribute

and set this to year

and give this the id attribute and set it to year

so that we have this connection for accessibility reasons.

Now, in this select input here,

for the year I wanna present two options, 2021 and 2022.

Of course you can pick any years here,

though I picked these years because I have dummy data

for those years here in my dummy data array.

So these are my two options.

I'll then give these options a value key each

which is the internal identifier,

which I'll get access to later.

And I'll set this to 21 and 22 as well.

Like this.

So that's now the first dropdown.

Now next to this div, so to this div here

which holds that first dropdown,

I'll add another div with a second dropdown for the month.

So here we'll have a label for the month.

and hence I'll set the htmlFor attribute to month.

And then below that,

I'll add another select element.

And looks like I accidentally deleted a div here,

so let me re-add it.

So then here I have another dropdown

and this will get an id of month, like this.

And then we need to add the options.

And here we'll have 12 options because we have 12 months.

So I'll start with January

and set the internal value here to one,

and then replicate this a couple of times

so that here, we also have February.

And set this to two.

Here we have three and March and, well,

you can probably guess what comes through after.

April and May and four and five

and then six and June and so on.

So I'll quickly complete this list here, July.

And then also here we have August.

And then we also need September.

And October and November.

And December, and then also update those numbers

so that here we have nine and 10 and 11.

Oops, 11 and 12.

So now these are the options for the second dropdown here.

And now below that, below all the divs,

but inside of the form, I'll then also add my Button again.

So my Button component and therefor, of course,

we need to import that at the top.

We want to import Button from, going up one level,

diving into ui, and then the Button file.

So that here, we then have this button component

and on the button, we can say Find Events.

However, this button here shouldn't be a link.

It should be a real button, which submits the form

of which it is part.

And hence, we need to go back into this button component

in the ui folder and tweak it a little bit

because this button component should either render a link,

as it currently does, or a normal button.

And it should render a link if the link prop is set.

If it is not set, it should render a normal button.

So here I will simply check if props link is truthy.

So if that is set.

And if it is I'll return my link as I did before.

Otherwise, if we make it past this if check,

we don't have a link and then I'll return a regular button,

a button where we output props.children.

So where we still pass on the content

passed between the text.

And where we then set the onClick prop to props.onClick.

So that can use our own button just as the built in button.

I also want to add a class name here and set this

to classes.btn as well.

So that'd we still applied those CSS classes.

With that we can go back to the event search component.

And here we are now therefor done with this JSX code.

Again, some styling would be nice and therefor,

just as before, attached, you find some styles

for this component.

So attached you will find an events-search.module.css file

which you should add next to the events-search JS file.

And then here we import classes from

./events-search.module.css

and then add a couple of class names to this JSX code.

To the form, for example, we add classes.form.

To this first div we then add classes.controls.

And those divs only exist for the styling.

That's why I have these nested divs.

Then here I'll have another div with a class of control.

So the outer div has controls, the inner div has control.

And we don't need to add anything to the label ends on,

but this div here which holds the month,

also receives classes.control like this.

And, with that we're done though.

That adds all the styling that needs to be added.

At the moment, of course,

this component is missing any logic,

but it at least has the JSX code and the styling.

So we can already include it in this index.js file

in the events folder, in the pages folder.

So on this AllEvents page.

Here, we can import EventsSearch from, going up, going up,

components, events, and then the events-search.

And now above the event list here,

I'll add EventsSearch like this.

We can now also replace this div, by the way,

with a fragment if we want to import it from react.

That's not mandatory but I'll do it here

because we don't really need that extra div.

Now, if we save all files

we should have this filter area, or this search area

above our events.

Now it's therefor time to add some logic.