Updating the main page

[00:00 - 00:13] updating the main page. Now that functions for data fetching already, we can use them to fetch data on the main page. Open the pages in the XTSX, here we'll want to define the "front props" type.

[00:14 - 00:28] "front props". We're gonna get this data using the "get static props" and those values will end up as props for the front component. Define the "posts" type, it's an array of type "posts", define the categories, it's an array of type "category".

[00:29 - 00:41] Get the "props" in the "front" component. "front props", here we get the "posts " and "categories". Pass the "posts" and the "categories" to the "feed" component. Fetching the data.

[00:42 - 00:51] Next has a concept of "static props" that are injected to a page component at build time. In our case, categories and posts for the main page will be represented as " static props".

[00:52 - 01:05] In order to tell next that we want to fetch some data and prerender a page, we expert and a "sing" function get static props. This function will make to request to our back-end API. It will fetch the categories and fetch the posts.

[01:06 - 01:21] Let's define it. Expert, a "sing". Function, get "static props", here we get the "categories". "Categories await fetch". "Categories", "const posts", "await fetch posts".

[01:22 - 01:33] Return and here we return an object containing the "props" field that will contain the "posts" and "categories". Now we should have the data, it's time to update the "feed" component.

[01:34 - 01:49] Go to "feed.jsx", define a new type, "feed props", it's going to be an object containing "posts", "post array" and "categories". Get those values from the "props", "posts", "categories".

[01:50 - 02:04] Instead of hard coding the sections, let's map through the "categories". For each "categories", "current" "categories", we're going to get the "posts" in this "categories", "const" in "section", equals "posts", "filter", "posts".

[02:05 - 02:14] Here we can pair "post" "categories" with the "current" "categories". Oh and I have a typo here, it's "categories" through the "y".

[02:15 - 02:30] After we have the "posts" in this "categories" or "section", we can return a " section", we pass "categories" as "key", "current". We pass the "title", it will also be "current", "categories", and we pass the " posts" list.

[02:31 - 02:36] Those will be from the "in" section constant. Now let's update the section so it can accept the "posts" list.

[02:37 - 02:59] Go to the "section", add the "posts" "prop", an array of "type" "posts", get the "posts" from the "props", and instead of hard coding the "post" cards. Let's now map through the "posts", and for each "post", we're going to render a "post" card with "key", "post" "id", and "post" from the "post" data.

[03:00 - 03:10] Finally, let's go to the "post" card, define the "props" here, type "post" card "props". It's an object that receives a "post" prop of type "post".

[03:11 - 03:22] Now we can get it from the "props", "post", and type of the "props" "post" card "props". Now we'll calculate the "ref" based on "post" id for the "image out".

[03:23 - 03:36] We'll use "post" title for "src", we're going to use "post" "image", render " post" title as a title, and for the "excerpt", we're going to render "post" " lead". Run, "yarn dev".

[03:37 - 03:45] As we can see, the front page now displays categories fetched from the server. Each category contains a list of posts for that category that was also fetched from our "backend" API.