Creating Categories Page

[00:00 - 00:09] We created show courses component, which means we can show a list of courses at any page. We can easily create our categories page now.

[00:10 - 00:19] If you remember our get category method takes an ID and returns category with the related courses. What we'll do is use it here.

[00:20 - 00:37] First of all, let's go to our agent.ts file and inside categories, we can add a new method. Let's call it get category and pass ID as a parameter.

[00:38 - 01:08] This ID will be a type string, but in JavaScript, we will call it number. We will use the get request, so we can say request.get and this time we will get type category and the URL will be /category/id.

[01:09 - 01:16] So the ID we will receive, we will pass it here. Now we can make request for a category.

[01:17 - 01:33] We need to create a new page for it. So inside pages, let's create a new one and call it category page.

[01:34 - 01:53] Import react from react and create a function. I will call it category page.

[01:54 - 02:18] We can go to the app.ts file and make a new route for this one. So let's simply copy one of it.

[02:19 - 02:35] The path will be /category/id will be dynamic, so we will use a colon for this. And we are going to use this ID from the URL and make a request accordingly.

[02:36 - 02:47] So remember, whenever we are using colon, that means we are using it dynamically. So whatever which comes after the category will be considered as ID.

[02:48 - 03:06] So the component is category page, so category page and we will import it automatically. Coming back to the category page, we need to create a state called data where we will store our API response.

[03:07 - 03:33] So again, data, set data and I will use state. This is where we will store our API response and give it a type of category because the response will be of type category and the default value, which is nothing.

[03:34 - 03:50] Then we will make a request as soon as it renders. So I will use the use effect hook again and make a request here agent.c ategories.getcategory.

[03:51 - 03:56] This will take ID. Let me write the full function first.

[03:57 - 04:07] Then it will get a response inside. We will set data to be the response.

[04:08 - 04:12] So we need to pass the category ID to this function. How can we do it?

[04:13 - 04:24] We need to use the ID which is inside our URL. What we will do is whenever we click on the category which is on our home page, it will redirect us to that particular category.

[04:25 - 04:33] So if we select on it category, the URL will be /category/1. So that one we need to pick.

[04:34 - 04:47] For this react router gives us usepenoms which will give us access to the ID parameter. So simply let's import it.

[04:48 - 05:00] Usepenoms from react router and we want to get the ID. So I will simply destructure it and usepenoms.

[05:01 - 05:19] We will give it a type string because everything in our URL is a string. Now inside our request we can type case the string into an integer using pass int.

[05:20 - 05:43] So I will use passint and pass this ID which will make this ID from a string to an integer which basically our API is expecting. Inside our use effect let's also pass it as a dependency so that whenever the ID changes we make the request again.

[05:44 - 06:01] And inside our return statement we can simply copy stuff from our home page. So let's copy this thing and going back to the category page.

[06:02 - 06:21] We can get rid of this and import react. Inside the h1 we can write something else since it's our category page.

[06:22 - 06:43] So I will write pick a course from your favorite category. Inside h2 I want to write the name of the category so what we can do is write data.name.

[06:44 - 06:59] It will give us an error and it says object is possibly undefined. So what we can say we can write a question mark which means if data is available then give us data.name which is basically the category.

[07:00 - 07:26] We can also check if there are courses inside data by using the ternary operator. What we can do is data again the question mark.courses.length which means if the length is more than one and we see an error on courses because courses property doesn't exist.

[07:27 - 07:42] So what we can do is go to our category and make cause causes. And here it's not data.data.map it's data.courses.map.

[07:43 - 08:01] Let's import show causes as well and cause as well. Now if there are courses I can show the show causes otherwise I will give a header which will say there are no causes in this category.

[08:02 - 08:32] So what I can do is rather than using and I can use a question mark and here I will use a colon and after that the h1 tag and inside I can write there are no causes in this category. Also I want to make few changes to the cause.scss file.

[08:33 - 08:47] So let me search for it. I want to remove the flex wrap.

[08:48 - 08:58] I'm making these changes because we made show courses a different component which also changed a bit of styling. Our page is now ready but how will anyone reach here?

[08:59 - 09:13] Simple. Clicking on the category button so what we can do is go to the categories component and if you are familiar with HTML you might know that we use anchor tag to redirect user to another page.

[09:14 - 09:26] But in react we want to change the page but without actually refreshing it. React Router gives us link which helps us redirect the user to another page without refreshing it.

[09:27 - 09:55] React is anyways a single page application so it just decides what to show to the user depending on the route. What we can do is import link from react router DOM and wrap our div with a link.

[09:56 - 10:14] Since it's a parent element now we need to pass the key to the link. Link gives us method 2 which takes a URL which works as href in our anchor tag.

[10:15 - 10:34] So what we can do is write /categories/categories.id which is dynamic. We can now open the browser and check if everything is working fine.

[10:35 - 10:48] And before going to the browser let's change to from categories to category because this is what we have written inside our route. So it's category not categories.

[10:49 - 10:58] Okay so here we are using category let's change it to categories inside agent. ts file.

[10:59 - 11:18] Let's check the browser now. This is our home page now if you click on IT and software we see all the causes and if you click on a category which doesn't have any cause for example business here we see there are no causes in this category perfect.

[11:19 - 11:23] So our show causes component is reusable. I'll see you in the next lesson.