1 00:00:01,260 --> 00:00:04,830 So we've got the read out side of our application pretty well buttoned up. 2 00:00:04,830 --> 00:00:09,970 We've got an action creator that can make an Ajax request to the weather API and we've got to reduce 3 00:00:09,980 --> 00:00:12,390 or to handle that as well. 4 00:00:12,390 --> 00:00:18,000 All we need to do now is make a new component to rather to render our list of cities with all of the 5 00:00:18,000 --> 00:00:19,090 appropriate data. 6 00:00:19,290 --> 00:00:24,750 And we should be in a pretty good spot before making this component though we're going to ask ourselves 7 00:00:24,750 --> 00:00:30,460 that same question we should always ask whether this is a container or a component. 8 00:00:31,230 --> 00:00:36,670 Well as I just said you know the purpose of this thing is to render the list of cities. 9 00:00:36,810 --> 00:00:41,220 So it's definitely going to need to get access to the redox state to get access to it all. 10 00:00:41,240 --> 00:00:42,190 All that data. 11 00:00:42,330 --> 00:00:45,060 I think that we're going to be making a container here. 12 00:00:45,240 --> 00:00:53,300 So inside of our containers folder will make a new file and we'll call it weather list. 13 00:00:53,420 --> 00:00:54,660 Yes. 14 00:00:54,840 --> 00:01:04,030 And then inside of it we'll put in our usual boiler plate we'll do import re-act component from react 15 00:01:05,220 --> 00:01:10,440 and then we'll export default class weather list. 16 00:01:10,440 --> 00:01:19,450 It's going to extend component and then we'll add in our render method in here as well. 17 00:01:20,100 --> 00:01:24,880 Our list that shows all the different cities is going to be a team table. 18 00:01:24,900 --> 00:01:32,230 So we will render a table element in here we'll give it a class name of Table Table hover. 19 00:01:32,370 --> 00:01:36,840 And again this is another instance in which we're adding these class names to get some free styling 20 00:01:36,840 --> 00:01:39,460 from Bootstrap. 21 00:01:39,960 --> 00:01:44,470 Then we'll add our table had added. 22 00:01:44,470 --> 00:01:45,150 TR 23 00:01:48,720 --> 00:02:02,060 And just one th For now which will just say city and then after the T had We'll a T body call. 24 00:02:02,070 --> 00:02:05,130 So just you know basic scaffolding for a table here. 25 00:02:05,130 --> 00:02:09,040 We've got just a single header that says C for right now. 26 00:02:09,780 --> 00:02:14,100 Before we forget let's make sure that we render this component inside of our app. 27 00:02:15,120 --> 00:02:25,140 So all swap over to abduct us and we will import whether list from We'll go up one into containers and 28 00:02:25,140 --> 00:02:26,670 then weather list. 29 00:02:26,670 --> 00:02:35,580 So we'll go up one into containers and then weather list and then we'll show that component directly 30 00:02:35,580 --> 00:02:37,220 underneath the existing search bar. 31 00:02:37,260 --> 00:02:38,910 So weather list 32 00:02:42,990 --> 00:02:48,020 Okay let's refresh the page and just make sure that everything is showing up. 33 00:02:48,180 --> 00:02:53,560 And to shrink down a bit refresh. 34 00:02:53,940 --> 00:02:57,040 And it looks like we've got the beginnings of a table here. 35 00:02:57,060 --> 00:03:00,070 I can at least see the column header of city. 36 00:03:00,840 --> 00:03:09,360 OK so before we do any work let's pop our mockup back up for this application and just double check 37 00:03:09,360 --> 00:03:13,630 what we need for our table here are table header. 38 00:03:13,730 --> 00:03:20,070 It already has a city we just added that we need a temperature pressure and humidity on here as well 39 00:03:20,090 --> 00:03:20,190 . 40 00:03:20,280 --> 00:03:29,210 So let's just add those in as our headers really quick since it's a nice easy warm up thing to do we'll 41 00:03:29,370 --> 00:03:37,210 do temperature pressure and humidity. 42 00:03:37,620 --> 00:03:38,030 OK. 43 00:03:38,080 --> 00:03:39,680 So looking good. 44 00:03:39,930 --> 00:03:45,270 Now we need to do our individual rows in here the individual rows that are going to end up inside of 45 00:03:45,270 --> 00:03:47,970 the table body to do that. 46 00:03:47,970 --> 00:03:52,360 We're going to need to get our data into this component because it is a container. 47 00:03:52,380 --> 00:03:54,660 You know we've got to get the data in from redux. 48 00:03:54,930 --> 00:03:57,560 So we're going to do the same thing that we've done several times now. 49 00:03:57,690 --> 00:04:00,270 We're going to import the connect function. 50 00:04:00,270 --> 00:04:06,510 We're going to define the function map state to props and then we're going to pull the weather data 51 00:04:06,690 --> 00:04:08,640 into our container. 52 00:04:09,180 --> 00:04:17,340 So at the top we will import connect from re-act redux and then at the bottom 53 00:04:20,640 --> 00:04:28,260 go a little bit bigger area we'll define function map state two props 54 00:04:31,410 --> 00:04:33,690 and we will return an object here. 55 00:04:33,750 --> 00:04:36,140 Weather is going to be state weather. 56 00:04:36,240 --> 00:04:43,190 And remember we specifically are using the state of weather here because we assigned our weather reducer 57 00:04:43,290 --> 00:04:46,000 to the weather key and combined reducers. 58 00:04:46,020 --> 00:04:51,200 So this is why we're using specifically state weather. 59 00:04:51,520 --> 00:04:51,870 OK. 60 00:04:51,870 --> 00:04:58,650 So this function right here looks pretty good but we do have a opportunity here to use a little bit 61 00:04:58,650 --> 00:05:02,650 of yes syntax to clean it up just a little bit more. 62 00:05:02,760 --> 00:05:08,430 You'll notice that we've got one argument and from that argument replying off just one property whether 63 00:05:09,960 --> 00:05:15,330 we can get access to weather a little bit more easily by instead of writing state data weather just 64 00:05:15,330 --> 00:05:23,760 doing curly braces whether that defines a variable in here of whether it's basically identical to doing 65 00:05:23,760 --> 00:05:29,840 something like you know Konst whether equals state DOT Whether same thing. 66 00:05:29,840 --> 00:05:32,990 So then we could condense this expression to just be like so. 67 00:05:33,480 --> 00:05:41,880 But now with weather weather we can do one more factor here whenever we have a key and the value that 68 00:05:41,880 --> 00:05:43,740 are completely identical. 69 00:05:43,740 --> 00:05:48,130 We could shrink it to just curly braces weather. 70 00:05:48,530 --> 00:05:58,370 So writing that right there is completely identical to do weather totally equal to weather weather. 71 00:05:58,500 --> 00:06:03,470 And again this is a little bit of ESX syntax totally optional if you want to do it. 72 00:06:03,510 --> 00:06:08,710 But you know if you're going to be working with 6 I suggest you give it a shot. 73 00:06:10,260 --> 00:06:10,740 OK. 74 00:06:10,740 --> 00:06:16,610 One last step and here we need to actually connect our component with the function map state to prop's 75 00:06:16,620 --> 00:06:17,530 at the bottom. 76 00:06:17,890 --> 00:06:29,490 So at the bottom we'll say export default connect map state to prop's with our component whose name 77 00:06:29,550 --> 00:06:31,350 is weather list. 78 00:06:31,680 --> 00:06:35,650 And don't forget two separate sets of parentheses. 79 00:06:36,090 --> 00:06:37,100 Last step in here. 80 00:06:37,110 --> 00:06:37,880 Don't forget. 81 00:06:37,890 --> 00:06:39,150 Never want to forget it. 82 00:06:39,150 --> 00:06:41,770 We're not exploring whether list does the default anymore. 83 00:06:41,940 --> 00:06:48,340 So we'll just take that out because we're exploiting the connected version of weather list. 84 00:06:48,360 --> 00:06:48,680 OK. 85 00:06:48,690 --> 00:06:51,160 So this is looking pretty good. 86 00:06:51,210 --> 00:06:53,550 I will catch you in the next section.