Updating the main page
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.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)