We've added in some amount of code to create our datasource at this point in time.
So each time that we get a new list of users from firebase we will recreate our data source.
There's just one last thing with this chunk of code that I want to draw your attention to.
You remember how when we pulled in our list of employees to the employees reduce or we saw that it was
an object that contained a bunch of employees.
It was an object rather than the array that we expected.
Now the list of data source clone with rows right here.
It has no idea how to work with an object.
It expects to be passed an array of record array of objects to work with.
So that means that not only do we have to add a map state to prop easier to get access to our employees
right because we still haven't done that.
We also have to somehow convert that employees piece of state from from an object of employees to an
array of employees as well.
So we've got to do two things in here and we got to do them outside the props and we also have to make
sure that we convert it from an object or the list of employees from an object to an array.
Let's first define our map state to props because that's going to be the easy part.
So our collection of employees is available in here as state DOT employees.
We're going to somehow have to figure out how to convert this thing from an object to an array.
So this is certainly another location where we're going to throw up a little bit of code on the screen
and figure out what's going on.
The first I'm going to do is flip over to my terminal and I'm going to install a helper library called
Load ash load.
ASH has a whole bunch of helper methods for working with objects and arrays and it has one in particular
that's going to help us out big time with this conversion going from an object to an array.
So one install load Ash I'm sure will complete in just a second.
Then at the top of our file we will import ash
calorically or by convention we represent the ashes and underscore hence the name low Dasch like you
know low down.
Well you get you get the idea you get it never come back down to our maps data props and this is where
we're going to do some magic.
So we're going to do a little bit of very interesting little code.
I mean to say Konst employees is map state employees.
So state employees right here is my object of employees.
And for every element in that object every key value pair.
I'm going to take the employee model which I'm going to represent as just Val and the key which is really
the user id or the you Id not see me not user ID but unique ID of that record.
So the you ID right here is the key of that employee.
So the key and the value key value pair
then inside of this thing you go I'm going to return.
Let's do this like very explicitly.
I will return and put on my curly braces just to make sure it's really clear what's going out the syntax.
So from the saying I will return an object containing all the properties of the employee model.
Right so that's Val and the user id guess.
This is a nasty little chunk of code right here.
What this says is state DOT employees is an object and has many key value pairs for each key value pair
that iteration is done by the map right here.
Run this fat arrow function the federal function will be called with each value and key and the key
in our case is the idea of the record.
Val right here is the user model so it has the name property the shift property and the phone property
as well.
We then create a new object we push in all the values from that from the user model.
So the name the phone and the shift and then we also throw the ID on top.
So the end result will be an object that looks like this something with like you know shift Monday name
ass or whatever and ID of some string of characters like so.
So this is the end result.
We craft this object for each object in the array.
Then we collect all those objects and put them into an array which is then assigned by employees or
assigned to employees.
That last step the like putting them into an array that's what map does automatically for us.
So after map executes the federal function on every record and then takes all of the returned objects
and stuffs them into an array for us.
So now the very last step we can just return employees.
So we will get this array of employees inside of our component as they start props employees which is
exactly what we expected with the create data source method.
So now the very last step is to add the map state to props to our connect helper as the first argument.
So say map state to props like so and then I think maybe you would be good practice to just throw in
a Hans log and verify that this actually works.
So inside of my render method I'm going to convert the log the stock props like so now I'll do my refresh.
Let's get our log here.
Because we just added in the load ash library.
Of course it's going to take a little bit time to refresh.
So now we will like that again.
I will log in the first time.
Here we go.
OK.
So the instant the employee list screen showed up we got the console log because it rendered the first
time it then called our action creator to go fetch some data.
And after that data was fetched we ended up with a second console log down here from the render method
because our component re rendered.
So let's look at the first console log of our prop's object.
You'll see that we have an employees of Mt aurorae right here.
We have not yet loaded any employees.
Then on our second console log we can see that here's our employees problem.
It is an array it has four records in it and each record is an object.
So each record has the name phone number shift and I.D. of that particular employee.
It's imperfect.
This is exactly what our data source object expects.
So we can now move forward and start working on making a list item or a component to show an individual
row for each of our employees that we've loaded up