Adding search filters#

It's time to make use of the filters to query the courses. We have already implemented the backend. Now we just have to work on the frontend part. Let's do it inside the Homepage. We can make a sidebar on the left, then we will use Column from antd library and give it span 4 for the filters and 20 for the courses. For the courses, let's wrap it with a Row with same span value of 24, 32.

Now we can focus on the filters we need. We can have two radio button groups; one 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 course through categories. Let's import a Card with title, Sorting Options. Antd gives us Radio.Group component so let's use it here; it takes an options array, so let's create sortOptions array. We can have three options. First will be sort by title; let's give it a value, title and label, Alphabetical. Second one will be price high to low, so we can write the value, priceDescending and label can be Price - High to low. Finally, priceAscending with value priceAscending and label Price - Low to high. Now we can pass these sortOptions to the radio group.