So we've got the read out side of our application pretty well buttoned up. 2
We've got an action creator that can make an Ajax request to the weather API and we've got to reduce 3
or to handle that as well. 4
All we need to do now is make a new component to rather to render our list of cities with all of the 5
appropriate data. 6
And we should be in a pretty good spot before making this component though we're going to ask ourselves 7
that same question we should always ask whether this is a container or a component. 8
Well as I just said you know the purpose of this thing is to render the list of cities. 9
So it's definitely going to need to get access to the redox state to get access to it all. 10
All that data. 11
I think that we're going to be making a container here. 12
So inside of our containers folder will make a new file and we'll call it weather list. 13
Yes. 14
And then inside of it we'll put in our usual boiler plate we'll do import re-act component from react 15
and then we'll export default class weather list. 16
It's going to extend component and then we'll add in our render method in here as well. 17
Our list that shows all the different cities is going to be a team table. 18
So we will render a table element in here we'll give it a class name of Table Table hover. 19
And again this is another instance in which we're adding these class names to get some free styling 20
from Bootstrap. 21
Then we'll add our table had added. 22
TR 23
And just one th For now which will just say city and then after the T had We'll a T body call. 24
So just you know basic scaffolding for a table here. 25
We've got just a single header that says C for right now. 26
Before we forget let's make sure that we render this component inside of our app. 27
So all swap over to abduct us and we will import whether list from We'll go up one into containers and 28
then weather list. 29
So we'll go up one into containers and then weather list and then we'll show that component directly 30
underneath the existing search bar. 31
So weather list 32
Okay let's refresh the page and just make sure that everything is showing up. 33
And to shrink down a bit refresh. 34
And it looks like we've got the beginnings of a table here. 35
I can at least see the column header of city. 36
OK so before we do any work let's pop our mockup back up for this application and just double check 37
what we need for our table here are table header. 38
It already has a city we just added that we need a temperature pressure and humidity on here as well 39
. 40
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
do temperature pressure and humidity. 42
OK. 43
So looking good. 44
Now we need to do our individual rows in here the individual rows that are going to end up inside of 45
the table body to do that. 46
We're going to need to get our data into this component because it is a container. 47
You know we've got to get the data in from redux. 48
So we're going to do the same thing that we've done several times now. 49
We're going to import the connect function. 50
We're going to define the function map state to props and then we're going to pull the weather data 51
into our container. 52
So at the top we will import connect from re-act redux and then at the bottom 53
go a little bit bigger area we'll define function map state two props 54
and we will return an object here. 55
Weather is going to be state weather. 56
And remember we specifically are using the state of weather here because we assigned our weather reducer 57
to the weather key and combined reducers. 58
So this is why we're using specifically state weather. 59
OK. 60
So this function right here looks pretty good but we do have a opportunity here to use a little bit 61
of yes syntax to clean it up just a little bit more. 62
You'll notice that we've got one argument and from that argument replying off just one property whether 63
we can get access to weather a little bit more easily by instead of writing state data weather just 64
doing curly braces whether that defines a variable in here of whether it's basically identical to doing 65
something like you know Konst whether equals state DOT Whether same thing. 66
So then we could condense this expression to just be like so. 67
But now with weather weather we can do one more factor here whenever we have a key and the value that 68
are completely identical. 69
We could shrink it to just curly braces weather. 70
So writing that right there is completely identical to do weather totally equal to weather weather. 71
And again this is a little bit of ESX syntax totally optional if you want to do it. 72
But you know if you're going to be working with 6 I suggest you give it a shot. 73
OK. 74
One last step and here we need to actually connect our component with the function map state to prop's 75
at the bottom. 76
So at the bottom we'll say export default connect map state to prop's with our component whose name 77
is weather list. 78
And don't forget two separate sets of parentheses. 79
Last step in here. 80
Don't forget. 81
Never want to forget it. 82
We're not exploring whether list does the default anymore. 83
So we'll just take that out because we're exploiting the connected version of weather list. 84
OK. 85
So this is looking pretty good. 86
I will catch you in the next section.