Adding Categories Bar
In this lesson, we're going to add Categories bar
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
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:07] We have spent a lot of time working on the categories. We have made a different controller and a different DB set for this.
[00:08 - 00:15] I want to use this just below our navigation bar. I have seen a lot of e-learning applications using categories like that.
[00:16 - 00:35] So let's start working on that. First of all, let's go to agent.tas file and like causes, let's make another const category. It will be a list again.
[00:36 - 00:47] So let's copy it and paste it here. And rather than a paginated cause, this will get us array of category.
[00:48 - 01:14] Since we don't have category, let's go to our models and create just that category dot ds. Export interface category.
[01:15 - 01:32] This will have ID of type number name of type string. And cause which will be either array of course.
[01:33 - 01:43] Let's import it. It can be an empty array or it can be null.
[01:44 - 02:14] Now let's go back to our agent file and import category or we can simply import it. Now we can add it to our agent object.
[02:15 - 02:26] The name category is conflicting. So we can make it categories and make it categories here as well.
[02:27 - 02:41] We can make an API request now. So what we'll do is create a new component and we will call it categories dot d s x.
[02:42 - 02:53] First of all, import react from react. We will make our const category.
[02:54 - 03:12] Let's return h1 for now, which will say just category. And finally, export default category.
[03:13 - 03:23] Now let's discuss what we need to create in this component. I want to show it only on the home page below our navigation bar.
[03:24 - 03:36] So what we can do is go to our file app dot ds x and below navigation. We will create another route and it should show on the home page.
[03:37 - 03:55] So the path should be exact and the component will be category and it will auto import it like that. Now let's go back to our component.
[03:56 - 04:01] We will make an API request to get all the categories. So let's create a new state.
[04:02 - 04:17] Let's call it categories and set categories. You state it will automatically import it.
[04:18 - 04:29] The default will be an empty array and let's give it a type category array. So it will import category model automatically.
[04:30 - 04:35] Now we want to make the request as soon as it renders. So you know what to do.
[04:36 - 04:51] We will use use effect hook. So whenever the page renders, it will make the request and for making the request, we will use our agent.
[04:52 - 05:07] So we will do agent. It will import agent automatically then categories since this is bringing the categories for us then list and then we will get a response.
[05:08 - 05:25] Inside we will set categories to be the response. And again, the model name and this name is conflicting.
[05:26 - 05:48] So what we can do is make this categories and make it categories here as well. Inside the return statement, let's get rid of the H1 tag and here let's create a div and let's give it a class name.
[05:49 - 06:02] So we will use a block which will check if we have categories. So if we have categories, we will map it.
[06:03 - 06:22] We will get a single element which will be called category and it will be of type category as well. We will also get an index which will be of type number.
[06:23 - 06:39] Here we will return a div with class name categories underscore underscore name . And inside we want to use category dot name.
[06:40 - 06:54] Also, let's give it key index. Now talking about the styling, I have provided you a code of file underscore categories dot SES.
[06:55 - 07:11] Just copy the code and inside SAS and components create a new file. Let's call it underscore categories dot SES and paste that file here.
[07:12 - 07:21] Also paste the underscore base dot SES code which is simply two lines. You can just copy that code.
[07:22 - 07:34] Go to the base dot SES file and paste it here. This is the box shadow that I have frequently use going back to the categories file.
[07:35 - 07:51] I have just made the alignments given it a height of 50 pixels kept at center, given it some padding added some shadow and made it hidden on smaller screens using the media queries. That's simply it.
[07:52 - 08:00] Also, we need to make this file part of our main dot SES file. So simply go there and import.
[08:01 - 08:11] Components slash categories. We can go to a browser to check how it looks.
[08:12 - 08:21] We see an error here and I think we haven't changed causes to categories and that is the reason. We're not receiving it.
[08:22 - 08:28] So let's simply change it to categories. Let's open our browser again.
[08:29 - 08:35] And again, refresh the page. It looks good now, right?
[08:36 - 08:39] Now let's make these buttons work in the next lesson.