Adding Search Filters
In this lesson, we're going to add search filters
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:06] It's time to make use of the filters to query the courses. We have already implemented the backend.
[00:07 - 00:10] We just have to work on the front and part. Let's do it inside the home page.
[00:11 - 00:38] So let me open home page and what we can do is make a sidebar on the left. So here we have a row and inside we can use column from the anti library and let's call them from at the this will have a span of four.
[00:39 - 00:54] For the filters the span value will be four and for the courses it will be 20. So what we can do is copy it one more time and paste it below and this time let 's give it a value of 20.
[00:55 - 01:15] And inside the column we need the row one more time for our courses. So let's copy it from here with the same dimensions and since it's closing inside I can pass this courses map and paste it here.
[01:16 - 01:21] Now let's focus on the filters that we need. We can have two radio button groups.
[01:22 - 01:33] And for sorting and another one for choosing the category. Although we already have separate category pages we can give our audiences an extra feature of querying the courses through categories.
[01:34 - 01:52] Let's import a card and here let me write card and import it. This card will have a title which will say sorting options.
[01:53 - 02:07] This will carry radio buttons so we can call it radio. Let's import radio from Andy and since it's a group we will write radio dot group and we don't want the closing one here.
[02:08 - 02:15] We can simply close it here and use it as a component. Radio group accepts an array of options.
[02:16 - 02:29] So what we can do is on top we can create a new array of sort options. So let me write const sort options and this will be an array.
[02:30 - 02:47] We can give three options to the users sort by title. So let's create sort by title value first and this will have a value of title and the label will say alphabetical.
[02:48 - 03:30] So here let me write L, a alphabetical same way we can have two more options for sorting, descending and ascending. So let me copy it use comma and paste it two more times and for the descending it will be price descending and the label will say price high to low.
[03:31 - 03:48] And what I can do is copy it for the ascending because we don't have to change a lot. So let me paste it and rather than price descending it will be price ascending and it will say price low to high.
[03:49 - 03:57] So it will be low to high. Now we can pass these sort options array to the radio group.
[03:58 - 04:14] So here let me write options is equal to sort options. Same way we can create another radio group for categories.
[04:15 - 04:27] So I'll create another card below this card. Let me import card again and this time the title will say choose category.
[04:28 - 04:43] So let me write choose category. Let's write the options now rather than making it static we can make it dynamic .
[04:44 - 05:02] We can use the categories we have stored in Redux to show here. So what I can do is on top I will create a new function and let's call it get categories.
[05:03 - 05:23] We can create an empty array and let's call it cat array cat array and this will have type of any array and let's initialize it to be an empty array. Now we need categories from Redux.
[05:24 - 05:42] So on top let me create a new variable called categories and to use these categories we will use use app selector from Redux. So what I can do is use app selector and inside I will write.
[05:43 - 05:52] So what I can do is I can use a new variable called category selector dot select all. This will give us all the categories we have inside Redux.
[05:53 - 06:12] So what it does is rather than making an API call to fetch the categories again we can store it once inside Redux and we can use it here. Now inside the function we can use for each to shape it the way at the expects and we can push every element inside the cat array.
[06:13 - 06:45] So what I will do is I will say categories dot for each and the individual category will be category which will have a type category we have already created the model. Now anti expects the radio button to have a value and a label inside our category we can put the value to be the ID and label to be the name of the category.
[06:46 - 07:20] So now what I will do is use cat array dot push and here the value will be category dot ID and label will be category dot name. This is how and be expects their labels to be and from this function we will simply return the cat array.
[07:21 - 07:27] Now we can use this function inside the radio group. So let's use it here.
[07:28 - 07:44] Let's make another radio group radio dot group and we don't need this. We get rid of this and here options.
[07:45 - 07:57] Options will be the get categories function. Now we can see how it looks inside the browser.
[07:58 - 08:07] As you can see we can see the options to query the courses. To make them work we'll have to centralize our course params to Redux.
[08:08 - 08:12] Now that we can see how it looks like let's start implementing them in the next lesson. Bye bye.