1 00:00:00,730 --> 00:00:08,800 In this video, we are going to display all the posts inside our application and display it at the home. 2 00:00:09,910 --> 00:00:15,130 Maybe, maybe thinking that we haven't implemented the creation of a post. 3 00:00:15,130 --> 00:00:19,780 So why are we going to display them or how are we going to display them? 4 00:00:19,960 --> 00:00:27,070 Remember on the API development we created some posts, so let's go ahead and then display them. 5 00:00:27,070 --> 00:00:32,290 But in case we don't have any post being created, don't worry, you can still follow along the next 6 00:00:32,290 --> 00:00:32,860 video. 7 00:00:32,890 --> 00:00:36,010 You go ahead and implement the creation of your post. 8 00:00:36,010 --> 00:00:38,360 So how are you going to implement that? 9 00:00:38,380 --> 00:00:46,090 For this we are going to display the post at the home page or you can create a specific template for 10 00:00:46,090 --> 00:00:46,600 all posts. 11 00:00:46,600 --> 00:00:54,640 When I click on post, I want to render the all post page and you can try this one by yourself after 12 00:00:54,640 --> 00:00:57,580 I finish showing how are going to display this. 13 00:00:57,580 --> 00:01:01,380 So the first question is how are you going to display it? 14 00:01:01,390 --> 00:01:09,520 First thing is that remember which route is being rendered, the homepage and it's inside the app dot 15 00:01:09,550 --> 00:01:10,180 server. 16 00:01:10,180 --> 00:01:16,600 So if you come here, we have a route that renders the homepage, which is this. 17 00:01:16,900 --> 00:01:21,190 So inside here I'm going to make a request and fetch a post. 18 00:01:21,190 --> 00:01:30,520 So I'm going to remove this one for now and make use of async, await and try and catch and outpace 19 00:01:30,520 --> 00:01:31,090 that. 20 00:01:31,570 --> 00:01:39,520 So for this I need to bring in the post model so inside post and let me receive it to have the auto 21 00:01:39,520 --> 00:01:40,240 import. 22 00:01:40,240 --> 00:01:44,230 So let me collapse this and make this of post. 23 00:01:46,250 --> 00:01:50,810 And I have it so inside the home page. 24 00:01:51,230 --> 00:01:53,120 I'm going to make use of. 25 00:01:54,410 --> 00:02:05,450 And then post is equal to await the post and dot find and then I'll pass in the post to this template 26 00:02:05,450 --> 00:02:06,650 as post. 27 00:02:06,830 --> 00:02:12,220 And in case something goes wrong, I'll go ahead and then rest. 28 00:02:12,320 --> 00:02:13,880 Then render. 29 00:02:14,690 --> 00:02:19,760 Then index and I'll pass in the error. 30 00:02:22,350 --> 00:02:25,950 I's error dot message. 31 00:02:27,000 --> 00:02:27,900 All right. 32 00:02:27,900 --> 00:02:33,270 So now inside the home page template, I will have access to all the posts. 33 00:02:33,270 --> 00:02:39,390 So let's look at the index dot edges, which is this. 34 00:02:40,410 --> 00:02:43,810 Let's look at the structure of the HTML template. 35 00:02:43,830 --> 00:02:46,380 This one is for the title. 36 00:02:46,380 --> 00:02:53,910 So when I collapse it, you can see that this is the title and this is a container that wraps the entire 37 00:02:53,910 --> 00:02:54,450 post. 38 00:02:54,450 --> 00:02:55,800 So let me expand. 39 00:02:55,800 --> 00:02:58,470 And this one is for a single post. 40 00:02:58,620 --> 00:02:59,820 That is the article. 41 00:02:59,820 --> 00:03:01,620 So let me collapse all. 42 00:03:02,490 --> 00:03:06,240 And I have three posts, so let me remove the two. 43 00:03:07,250 --> 00:03:09,530 And maintain only one. 44 00:03:09,650 --> 00:03:16,040 So here we are going to look through all the posts and display them as we did for the profile page. 45 00:03:16,070 --> 00:03:20,780 So first of all, we are going to check if there are some posts. 46 00:03:20,780 --> 00:03:22,010 So if. 47 00:03:24,230 --> 00:03:25,220 Posts. 48 00:03:25,520 --> 00:03:26,870 Don't lamb. 49 00:03:28,640 --> 00:03:30,890 It's less than or equal to zero. 50 00:03:30,920 --> 00:03:31,790 Then. 51 00:03:33,260 --> 00:03:35,600 Let me close the eggs here. 52 00:03:35,630 --> 00:03:36,770 Likewise. 53 00:03:36,770 --> 00:03:37,400 This. 54 00:03:40,600 --> 00:03:41,970 And insights. 55 00:03:41,980 --> 00:03:46,330 Let me use h to and say no post found. 56 00:03:49,910 --> 00:03:51,860 Perfect arrows. 57 00:03:53,270 --> 00:03:57,770 You guys ask that and let me close the edges. 58 00:04:01,820 --> 00:04:06,160 All right, So in here, I can go ahead and then look through all the posts. 59 00:04:06,170 --> 00:04:07,940 I'm going to be Edge's. 60 00:04:08,840 --> 00:04:10,970 And then the post. 61 00:04:11,810 --> 00:04:13,220 Dodd for each. 62 00:04:15,890 --> 00:04:17,300 Callback function. 63 00:04:18,440 --> 00:04:21,170 And my arrow function is that. 64 00:04:21,170 --> 00:04:23,810 And let me close the edges. 65 00:04:24,030 --> 00:04:25,280 Likewise. 66 00:04:25,280 --> 00:04:25,880 This. 67 00:04:27,410 --> 00:04:27,950 Perfect. 68 00:04:27,950 --> 00:04:32,110 So I'm going to cut this one from here and place it here. 69 00:04:32,120 --> 00:04:36,560 So inside the callback I have access to the individual post. 70 00:04:36,560 --> 00:04:37,940 So let me save it. 71 00:04:37,940 --> 00:04:40,670 And let's see, let's refresh it. 72 00:04:41,580 --> 00:04:47,970 And you can see we have three posts being created by a user or by users. 73 00:04:48,090 --> 00:04:52,770 So let's go ahead and then use the real image and repost. 74 00:04:52,770 --> 00:04:55,560 So here I'm going to make use of edges. 75 00:04:56,660 --> 00:05:01,460 Equal to post dot image. 76 00:05:02,200 --> 00:05:04,980 For that and then for the user. 77 00:05:04,990 --> 00:05:09,190 Let's leave it for now and let's work on the actual post. 78 00:05:09,370 --> 00:05:17,500 So here is going to be each is equal to post dot title. 79 00:05:21,470 --> 00:05:22,010 All right. 80 00:05:22,010 --> 00:05:27,740 So let me copy this one and use inside the description of the post. 81 00:05:32,630 --> 00:05:37,610 Then the category or so and change this one to category. 82 00:05:38,850 --> 00:05:41,190 All right, so let's have a look. 83 00:05:42,630 --> 00:05:48,380 And you can see that these are the posts that we have without images. 84 00:05:48,390 --> 00:05:54,230 So let's see how we are going to create one so I can go ahead and then delete this post. 85 00:05:54,260 --> 00:05:57,690 But for now, we are on the right path. 86 00:05:57,720 --> 00:06:04,170 The next one is to be able to display the user and then the date a post was created. 87 00:06:04,440 --> 00:06:08,340 Remember, on the post we have the user being created. 88 00:06:08,340 --> 00:06:13,800 So if you go to post, let me show you inside the post controller. 89 00:06:14,040 --> 00:06:17,130 This one is for create and fetch. 90 00:06:17,400 --> 00:06:23,940 And here you can see that we are not populating the author or the user of the post. 91 00:06:23,940 --> 00:06:26,040 So I'm going to make use of dot. 92 00:06:27,350 --> 00:06:32,720 Populates and I want to populate the author and that is a user. 93 00:06:33,230 --> 00:06:40,760 If I check the post model, which is this one, you can see that we have a property called user and 94 00:06:40,760 --> 00:06:45,260 that is what I want to populate instead of the ID of the user. 95 00:06:45,560 --> 00:06:52,070 So with this one I have the user property on the post so I can go ahead and then use that. 96 00:06:52,310 --> 00:07:00,710 So for this one, I'm going to make use of the edges and on the post we have the user and I want to 97 00:07:00,710 --> 00:07:03,380 use the full name of the user. 98 00:07:04,270 --> 00:07:04,900 Perfect. 99 00:07:04,900 --> 00:07:07,270 So let's see if it's going to work. 100 00:07:08,730 --> 00:07:12,400 And you can see that there is no user being created by this. 101 00:07:12,420 --> 00:07:20,580 It means that by the time this post was created, we haven't implemented the authorization and authentication. 102 00:07:20,580 --> 00:07:23,370 That's why we have asked that. 103 00:07:23,400 --> 00:07:28,730 The next step going to be the date the post was created, I believe, for the Hawaiian. 104 00:07:28,740 --> 00:07:30,700 We are going to have it. 105 00:07:30,720 --> 00:07:36,360 So I'm going to replace this one and use what is called created at. 106 00:07:37,220 --> 00:07:39,290 And let's have a look. 107 00:07:41,230 --> 00:07:43,120 And we have it as that. 108 00:07:43,120 --> 00:07:51,220 So let's go ahead and then format this one using to look at the string and let me use the method call 109 00:07:51,220 --> 00:07:54,460 or function call and let me refresh it. 110 00:07:55,500 --> 00:07:59,300 And you can see that we have the date being created. 111 00:07:59,310 --> 00:08:00,160 All right. 112 00:08:00,180 --> 00:08:04,650 The next video, let's go ahead and then implement the creation of a post. 113 00:08:04,650 --> 00:08:10,080 In that way, you're going to have the feeling of how we are displaying the post.