1 00:00:01,550 --> 00:00:06,500 In this video we're going to start to work on our post lists comment list and comment create components. 2 00:00:06,500 --> 00:00:10,280 Right now we're kind of deep in the world of react and it sure seems like we're not messing around with 3 00:00:10,280 --> 00:00:11,810 micro services too much. 4 00:00:11,840 --> 00:00:12,320 Don't worry. 5 00:00:12,320 --> 00:00:16,160 We just have to put these three components together very quickly and as I've mentioned several times 6 00:00:16,160 --> 00:00:20,820 now we're gonna start to see if there's some really big issues with our current micros services architecture. 7 00:00:20,830 --> 00:00:24,110 We're gonna get back to the world of micro services very very quickly. 8 00:00:24,110 --> 00:00:28,070 In the meantime let's just finish up these components really quickly to get started. 9 00:00:28,070 --> 00:00:31,710 I'm gonna go back over to my mode editor for my react project. 10 00:00:31,820 --> 00:00:35,790 Here it is right here inside my S.R. C directory. 11 00:00:35,790 --> 00:00:43,630 I'm gonna make a new file called post list dot J.S. inside if you're all import react right away. 12 00:00:45,500 --> 00:00:50,070 I'll do an export default inside of here. 13 00:00:50,110 --> 00:00:55,830 Right now I'm just gonna return an empty div and I'll make sure that I show this component inside of 14 00:00:55,830 --> 00:00:57,440 my app component. 15 00:00:57,500 --> 00:01:01,570 I'll go back over to my apt j ust file at the top. 16 00:01:01,580 --> 00:01:10,870 I will import most lists from post list then right underneath my post to create I'm going to add in 17 00:01:10,900 --> 00:01:11,520 a chart. 18 00:01:11,550 --> 00:01:16,010 That's a horizontal rule just to draw a line across the screen to make sure that's clear to users that 19 00:01:16,010 --> 00:01:17,910 they're looking a different section. 20 00:01:18,140 --> 00:01:29,870 I'll put in an H1 right underneath it and just put in their posts and I'll show the post list component. 21 00:01:30,200 --> 00:01:30,920 So simple enough. 22 00:01:32,340 --> 00:01:34,820 Let's go back over to our post list component. 23 00:01:34,870 --> 00:01:37,160 Let's think about what this component really needs to do. 24 00:01:37,380 --> 00:01:42,180 And needs to make a request over to our post service and get a list of all the posted I've ever been 25 00:01:42,180 --> 00:01:43,260 created. 26 00:01:43,260 --> 00:01:50,060 We're then going to iterate over that list of posts and create some div or something similar to just 27 00:01:50,060 --> 00:01:53,830 show the title of each post inside of a one these little card looking things. 28 00:01:55,090 --> 00:02:00,310 Let's first add in some code to make requests to our post service to get the list of posted I've been 29 00:02:00,310 --> 00:02:00,730 created. 30 00:02:01,900 --> 00:02:07,600 To do so at the very top we're going to get that use state from react again because we do have to store 31 00:02:07,630 --> 00:02:16,490 our list of posts somewhere I will also import axioms from axioms so we can actually make the request 32 00:02:16,490 --> 00:02:19,050 itself. 33 00:02:19,070 --> 00:02:23,450 One other quick thing we need here we need to use effect as well to make sure that we only try to fetch 34 00:02:23,450 --> 00:02:27,420 our list a post one time when our component is first created. 35 00:02:27,560 --> 00:02:33,220 So let's write out some code to actually make this request will first get a piece of state here so we'll 36 00:02:33,220 --> 00:02:35,230 declare a new piece of state called post 37 00:02:38,710 --> 00:02:42,020 and we do have to provide a initial starting value for this thing. 38 00:02:42,040 --> 00:02:45,700 Now you might be tempted inside of here to put like an array because hey we're getting some list of 39 00:02:45,700 --> 00:02:48,450 posts but I want you to think back to the postal service. 40 00:02:48,450 --> 00:02:49,560 We really put together. 41 00:02:49,630 --> 00:02:50,290 Let's go backwards. 42 00:02:50,290 --> 00:02:56,440 The post code editor really quickly so I'm going to tab back over to my post service inside of my posts 43 00:02:56,530 --> 00:03:02,170 project right now I'm inside the index not just file inside there and as a quick reminder we start all 44 00:03:02,170 --> 00:03:07,270 of our posts inside of an object and we're sending back that entire object whenever someone tries to 45 00:03:07,270 --> 00:03:13,470 get a list of all of our posts so when we think about providing a default value for that you state call. 46 00:03:13,470 --> 00:03:17,730 We only want to put it in a right inside there we want to put an object instead to kind of represent 47 00:03:17,970 --> 00:03:23,990 what our final state is going to actually look like to back inside of my post list components rather 48 00:03:23,990 --> 00:03:26,550 than putting in an array as our default value right there. 49 00:03:26,570 --> 00:03:31,100 I'll put in an object again just to represent how we're going to actually get this data back from our 50 00:03:31,100 --> 00:03:33,700 API after that. 51 00:03:33,740 --> 00:03:40,140 I'm going to define a function that's going to make the actual request off to our post service it's 52 00:03:40,180 --> 00:03:43,200 going to define a function called fetch post. 53 00:03:43,410 --> 00:03:49,410 This is going to be an async function because we probably want to use that async await syntax inside 54 00:03:49,410 --> 00:03:50,090 of here. 55 00:03:50,250 --> 00:03:56,190 We'll get some response from calling a wait axial socket and then remember to get our list of posts 56 00:03:56,250 --> 00:04:00,130 we need to make a get request to local host four thousand. 57 00:04:00,180 --> 00:04:04,780 That's where our post service is and the actual end point that we want to reach out to is the post end 58 00:04:04,780 --> 00:04:06,310 point or the post route. 59 00:04:06,480 --> 00:04:12,120 So we will put inside of your GDP calling slash slash local host four thousand slash post 60 00:04:16,470 --> 00:04:21,630 as a quick reminder anytime we make a request with axioms we get back your response object or actual 61 00:04:21,630 --> 00:04:24,900 data is nested inside there on a data property. 62 00:04:25,100 --> 00:04:26,550 So we're going to take that response. 63 00:04:26,550 --> 00:04:30,720 Or more specifically the data from it and use it to update our Post piece of state. 64 00:04:30,810 --> 00:04:33,990 We'll say set posts on the rez dot data 65 00:04:38,760 --> 00:04:40,480 but we've now got this function put together. 66 00:04:40,480 --> 00:04:43,010 So now the next we need to do is decide when to call it. 67 00:04:43,300 --> 00:04:44,420 That's why we got this use. 68 00:04:44,450 --> 00:04:50,410 If I took as reminder use if I can use to run some code at very specific points in time in the lifecycle 69 00:04:50,440 --> 00:04:56,920 of a component in our case we probably want to run fetch posts only when our component is first displayed 70 00:04:56,950 --> 00:05:01,750 on the screen so to make sure that we can run this function only when this component first displayed 71 00:05:02,020 --> 00:05:04,870 we will call this effect. 72 00:05:05,100 --> 00:05:10,140 We will put in a empty function right now as the first argument and then critically as the second argument 73 00:05:10,350 --> 00:05:14,850 we're going to put in an empty array that empty array right there is what's going to tell react to only 74 00:05:14,850 --> 00:05:20,120 run this function one time and then inside that function we can actually call suppose 75 00:05:25,200 --> 00:05:27,270 just as a quick task right after that use effect. 76 00:05:27,330 --> 00:05:32,310 Let's put in the console log and we'll try to console log out our posts is a state 77 00:05:36,200 --> 00:05:38,300 going to say this you know look back over 78 00:05:41,020 --> 00:05:46,090 and inside my console right here which I already have open I can see that I've got one console log that's 79 00:05:46,090 --> 00:05:50,740 the default value of posts that we initialized inside of our components and then right after that I've 80 00:05:50,740 --> 00:05:53,810 got an object that has a key of a 0 1 blah blah blah. 81 00:05:53,840 --> 00:05:58,900 So that's the randomly generated idea that we generated when we first created post and as a value is 82 00:05:58,900 --> 00:06:01,610 the actual post itself. 83 00:06:01,660 --> 00:06:02,950 So this looks good. 84 00:06:03,070 --> 00:06:09,970 Now all we have to do is iterate over the values of this object and for every value on there we're going 85 00:06:09,970 --> 00:06:13,480 to display a little post something on the screen. 86 00:06:13,630 --> 00:06:14,700 Let's do that right now. 87 00:06:17,090 --> 00:06:22,690 I'm going to go ahead and delete the console log we just put together and then after that I'm going 88 00:06:22,690 --> 00:06:33,230 to do a rendered posts and that's going to be the result of calling object dot values on post object 89 00:06:33,380 --> 00:06:38,930 values is a built in function javascript that's gonna give us back an array of all the values inside 90 00:06:38,930 --> 00:06:40,580 of this object right here. 91 00:06:40,580 --> 00:06:44,930 So it's going to essentially be an array of actual post objects. 92 00:06:45,060 --> 00:06:49,720 We will then map over that array and for every post inside their 93 00:06:53,280 --> 00:06:57,770 we're going to generate some a sex and return it from this mapping function. 94 00:06:57,860 --> 00:07:05,340 So I'm going to return we're gonna put a little bit of mark up right here I'll give myself a div on 95 00:07:05,340 --> 00:07:06,650 the div itself. 96 00:07:06,650 --> 00:07:10,030 We're going to add in a class name of card. 97 00:07:10,100 --> 00:07:15,370 I'm going to add it in a hardcoded style property just to make these cards look kind of nice. 98 00:07:15,390 --> 00:07:23,300 I'm gonna give this thing a width of 30 percent and a margin bottom of 20 makes me say this. 99 00:07:23,300 --> 00:07:30,390 You can see that entire line and then because we are generating a list of elements here react is going 100 00:07:30,390 --> 00:07:35,700 to expect us to place a key property on each of the elements so we are creating or I should say the 101 00:07:35,700 --> 00:07:44,060 top level elements so to have an actual unique key I'll use the I.D. out of our post object because 102 00:07:44,060 --> 00:07:51,660 remember every post has an idea they'll say a key is going to be post dot I.D. like so. 103 00:07:51,880 --> 00:07:52,150 All right. 104 00:07:52,150 --> 00:08:02,970 Next up inside this div I'm going to give it a another div with a class name of card dash body. 105 00:08:03,090 --> 00:08:04,320 I'll give it an h three 106 00:08:07,360 --> 00:08:14,300 and inside of that age three I'll display the actual post title so post dot title making sure that I've 107 00:08:14,300 --> 00:08:17,850 got those curly braces as referring to a javascript variable right here. 108 00:08:20,070 --> 00:08:21,060 So I'd say this looks pretty good. 109 00:08:21,060 --> 00:08:25,050 We are now generating a list of all the different post titles. 110 00:08:25,120 --> 00:08:29,950 Now last we need to do is to just make sure that we display rendered posts on the screen somewhere. 111 00:08:30,060 --> 00:08:36,030 So we just need to make sure from the overall components we return something that's going to wrap up 112 00:08:36,060 --> 00:08:42,270 or display rendered posts inside this div I'm going to open it up give it a opening and closing tag 113 00:08:44,050 --> 00:08:48,540 and inside there also rendered those. 114 00:08:48,680 --> 00:08:52,330 I'm also going to give this div right here a little class name Hutchinson a little. 115 00:08:52,340 --> 00:08:57,710 This is gonna be kind of long series of class names just to get these cards to display or lay themselves 116 00:08:57,710 --> 00:08:58,830 out very nicely. 117 00:08:58,880 --> 00:09:08,930 We're gonna say D dash flex like dash row let's dash wrap and just one more justify dash content dash 118 00:09:08,990 --> 00:09:12,300 between and I'll say that line once again so you can see it. 119 00:09:12,320 --> 00:09:12,730 There we go. 120 00:09:16,600 --> 00:09:22,910 Let's say this look back over quick test and there we go now you probably see something like this right 121 00:09:22,910 --> 00:09:23,200 here. 122 00:09:23,210 --> 00:09:27,560 Just as a reminder whenever I'm showing my browser window I'm almost always zoomed in so you can see 123 00:09:27,560 --> 00:09:28,910 everything on my screen very easily. 124 00:09:29,480 --> 00:09:31,560 So we've got that post listed right there. 125 00:09:31,940 --> 00:09:37,450 And of course we can create another post we'll say a second post we can submit it. 126 00:09:37,870 --> 00:09:40,260 The Post does not show up on the screen right away. 127 00:09:40,270 --> 00:09:43,990 That's because we don't have any logic to actually refresh our list of posts. 128 00:09:44,110 --> 00:09:48,840 So I need to manually refresh the page and once I do I'll see the second post appear. 129 00:09:48,850 --> 00:09:56,340 I can do third post submit its refresh and there's my third post. 130 00:09:56,470 --> 00:09:56,730 All right. 131 00:09:56,740 --> 00:09:58,850 Well I'd say we're off to a good start. 132 00:09:58,880 --> 00:10:00,570 So one more quick pause come back. 133 00:10:00,580 --> 00:10:03,070 We're gonna start to tackle all this commenting stuff. 134 00:10:03,160 --> 00:10:04,170 I'll see you in just a moment.