The category page

[00:00 - 00:37] Category page. We're quite close to finishing our application. One of the last few things to do is to define a category page. First, let's define a new endpoint for the category API. Inside of the server index.ts add a new endpoint app get categories/colonid, pass in a callback request response. Here we first get the ID from the params, constid = request params. Then we find the posts for the given category, const found = posts filter category.

[00:38 - 02:51] The argument is of type post because we are filtering in the post story. And then we compare the category with the given ID. After we have the posts for the category, in this particular example, probably want to multiply the results by three category posts. We're just copying the found posts three times just because there are too few of them in our data. In the real application, you won't need to do this. Found, found. As an alternative, you can just populate more posts in your JSON file. Then we return response JSON category posts. Then inside of the API folder, create a new file, category. TS. Here we define a function fetch posts. For it to work, we'll need to import fetch from node fetch. And now we can export an async function fetch posts. We pass in the category ID of type entity ID. And this function is expected to return a promise with an array of posts. Inside of this function, we'll calculate the URL. We get it using the value of the config base URL. We append categories and then category ID fetch the URL const response equals await fetch URL. And then we return await response JSON. We'll need to cast the results of the JSON to promise with an array of posts. Now open shared static paths, shared static paths. And here we want to define a new type category static params. We should have ID category imported from the types. And also you want to define a type for the category static path type category static path is an object with field params category static params. Okay, now we can define the category page component. Inside of the pages folder, create a new folder called category.

[02:52 - 03:07] Here define a new file square brackets with ID TSX. First, let's define the category props type category props is an object. And the only prop that we are going to get is the array of posts posts and array of posts.

[03:08 - 03:28] Then we want to define the get static props that will fetch the posts for us. Expert, const, get static props. It's a get static props of type category props. And we define it as an async function that will receive params or the context with the params field.

[03:29 - 04:34] And in this function, we'll check if type of params ID is not a string, then we throw a new error, unexpected ID. And if everything is fine, then we'll get the posts equals await fetch posts for the category with the params ID. And after we have the posts, we can return an object with props containing the posts. Define the get static paths function expert async function get static paths. Here we return an object containing the paths that will calculate in a second and fall back true. All right, let's define the paths. Go to static paths, where we already have the types. Here we hardcode the categories to pre-render, const categories to pre-render. It's an array of type category. And here we'll have science, technology, and arts, expert the category paths, expert const, category paths.

[04:35 - 05:47] It's an array of category, static path. And here we map through the categories to pre-render. And for each category, we return an object with params that contain ID that matches the category. Go back to the category page and import category paths as paths from shared static paths. Now we can define the category component, const category equals a component that will receive the list of posts, use the category props here. Inside of this component, we'll need to get the router using the use router, we check if router is fallback, then we return a loader. And then we return a new section with posts and title, that is a string created from router query ID, export the category as default, export, default, category. Let's update the section component a bit. Currently we use it both on the main page and on the category page. The main page only contains three postcards per section.

[05:48 - 07:10] Let's create a link that says more in this section on the main page to refer the user to the section page. Go to the section TSX and update the props. Add the ease compact, boolean flag, get its value from the props is compact, provide the default value here, false. And then below the grid, check if it's compact, then render a link with a more link element saying more in title. And the link should have graph linking to the category title. And we pass the pass graph. We use pass graph to force the link component to pass the graph attribute further to the more link element. If you look at the styles, more link is defined here as a styled link. Go back to the section, make sure that the more link is imported. Then go to the feed component. And for each of the sections in the map here, add the ease compact flag. As a result, all the sections in the feed will now render more link and provide access to the category pages. If you open the app, you should see more in science, more in technology, more in art. And if you click on those links, you should be redirected to the category. As you can see, the posts are being repeated here, but that's intentional.

[07:11 - 07:13] As you remember, we repeated them three times in our server.