We've now got our data we've got our data source we can start to work on the actual list view inside
of our component.
We're going to follow the same convention as when we last used the last few where we made a separate
list item component to represent a single employee in our list.
So that will be a pretty darn simple component but we'll still break it out to be something separate
just in case we ever want to give it a bunch of special functionality as an individual row.
So inside of our component I'm going to start off by replacing my view tag with a list view and we're
going to give the list view a healthy number of properties.
The first thing we're going to do is work around a small little issue.
This is an issue with re-act native.
I don't want to talk about it too much because it might be something that goes way in a future version.
Basically just enable empty sections.
Next we're going to give a data source of this data source.
So this is the one that we are crafting every single time that we get a new set of props.
And then next we'll do our rendah wrote this dot Brandur.
So render remember is responsible for rendering a singular row of our of our list.
So let's build that render ROW function say Renda row and from here we will return a list item which
is going to be the component we need to create and we're going to pass it in employee.
And remember that this helper method render row is going to be called with a single employee as well.
So that's where the employee is coming from.
So it gets called with an employee because it's representing a single row.
And we're going to pass that down to list item as a prop called employee.
So now we can create our first we'll import list item at the top and we haven't made it yet or so are
going to import it anyways.
So at the very top we don't need the you or text anymore.
So I'm going to clean those up and then I will import list item from list item list item.
It's a very generic name here.
I might want to call it something a little bit more specific like employee list item just in case I
have any other lists of data inside my application this time around.
We've only got the one list so I feel okay about just client list item but you might want to call it
employee list item instead.
So make a new component called list item and then side if you're where you are going to scaffold out
our list item.
So at the top we'll import react and component from react we'll import text from re-act native and it
will also import our card section from Conon which is our collection of all of our reusable components.
Then we'll make our list item class which will extend component we'll make our render method the list
item itself.
I think it just needs to show the employees name.
It doesn't really make too much maybe it makes sense to show the shift or something like that.
But I think that for the purposes of our app I think it makes sense to show the name on the on here.
So I will pull off the name of the employee which is coming from this stock props start employee then
I will return a card section
S. and inside of there will have are text tag which contains the employee's name.
Then at the bottom I will export the full list item to make sure that this thing can be used in other
files as well.
I think the last thing that I want to do is add a little bit of styling to the text tag itself as it
stands right now we would render all the way to the left of the screen you know kind of butting up against
the edge.
So I think that maybe we should increase the text size of this thing and make sure that it has a little
bit of standoff from the left hand edge as well.
So make a Stiles object at the bottom.
This thing will have a title style and will give it a font size of 18 along with a padding left of 15.
There's padding left is what's going to give us a little stand off in the edge.
Then we can pass that as a style to our text tag.
So styles dot title style like so.
All right let's try this out in the simulator.
So refresh
we will log back in.
And now we get our employees popping up on the screen and that is a mighty fine looking list.
Without a doubt.
So now here's the real test.
Here's the thing we really want to make sure silk works though if I add a new employee I expect to see
it automatically appear in this list and I expected to appear there automatically because remember'd
side of our action creator file we made that employees fetch action creator.
We only have to cull this thing just like the one time and then any time that any new data comes across
from firebase and remember firebase is a live dynamic data store so any time that remote collection
or remote pool of employees gets updated we will get notified by this on value event handler right here.
So any time we get a new employee we should automatically get a dispatch of employees fecche success
along with a new list of employees.
So that is what I expect to have happen.
I'm going to make a new employee.
We need we need a name for this one about Samantha and Samantha is also there all sharing the same phone
number.
Samantha maybe she needs to work on Sunday so that will create this takes us back to our employee list
screen and we automatically get Samantha appended onto the list at the very bottom right there.
It is awesome.
We dont have to do any additional logic to go out and hey refed your list of employees or anything like
that.
So definitely works fantastically.
Lets now continue in the next section and start working on one of our next features.
The ability to edit and delete existing employees