1
00:00:00,690 --> 00:00:05,820
We've now got our data we've got our data source we can start to work on the actual list view inside

2
00:00:05,820 --> 00:00:07,040
of our component.

3
00:00:07,110 --> 00:00:12,000
We're going to follow the same convention as when we last used the last few where we made a separate

4
00:00:12,000 --> 00:00:16,380
list item component to represent a single employee in our list.

5
00:00:16,380 --> 00:00:20,850
So that will be a pretty darn simple component but we'll still break it out to be something separate

6
00:00:21,210 --> 00:00:26,530
just in case we ever want to give it a bunch of special functionality as an individual row.

7
00:00:27,330 --> 00:00:35,130
So inside of our component I'm going to start off by replacing my view tag with a list view and we're

8
00:00:35,130 --> 00:00:38,780
going to give the list view a healthy number of properties.

9
00:00:38,790 --> 00:00:43,050
The first thing we're going to do is work around a small little issue.

10
00:00:43,830 --> 00:00:45,630
This is an issue with re-act native.

11
00:00:45,720 --> 00:00:49,470
I don't want to talk about it too much because it might be something that goes way in a future version.

12
00:00:49,470 --> 00:00:53,130
Basically just enable empty sections.

13
00:00:53,130 --> 00:00:58,150
Next we're going to give a data source of this data source.

14
00:00:58,260 --> 00:01:02,460
So this is the one that we are crafting every single time that we get a new set of props.

15
00:01:02,850 --> 00:01:07,920
And then next we'll do our rendah wrote this dot Brandur.

16
00:01:08,470 --> 00:01:15,100
So render remember is responsible for rendering a singular row of our of our list.

17
00:01:15,120 --> 00:01:23,220
So let's build that render ROW function say Renda row and from here we will return a list item which

18
00:01:23,220 --> 00:01:29,440
is going to be the component we need to create and we're going to pass it in employee.

19
00:01:30,210 --> 00:01:35,690
And remember that this helper method render row is going to be called with a single employee as well.

20
00:01:35,690 --> 00:01:37,920
So that's where the employee is coming from.

21
00:01:37,920 --> 00:01:41,190
So it gets called with an employee because it's representing a single row.

22
00:01:41,310 --> 00:01:45,710
And we're going to pass that down to list item as a prop called employee.

23
00:01:45,750 --> 00:01:50,420
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

24
00:01:50,430 --> 00:01:52,070
going to import it anyways.

25
00:01:52,560 --> 00:01:56,960
So at the very top we don't need the you or text anymore.

26
00:01:57,000 --> 00:02:06,140
So I'm going to clean those up and then I will import list item from list item list item.

27
00:02:06,180 --> 00:02:07,790
It's a very generic name here.

28
00:02:07,800 --> 00:02:12,570
I might want to call it something a little bit more specific like employee list item just in case I

29
00:02:12,570 --> 00:02:16,170
have any other lists of data inside my application this time around.

30
00:02:16,170 --> 00:02:20,760
We've only got the one list so I feel okay about just client list item but you might want to call it

31
00:02:20,790 --> 00:02:22,890
employee list item instead.

32
00:02:22,890 --> 00:02:29,880
So make a new component called list item and then side if you're where you are going to scaffold out

33
00:02:29,880 --> 00:02:31,050
our list item.

34
00:02:31,490 --> 00:02:43,740
So at the top we'll import react and component from react we'll import text from re-act native and it

35
00:02:43,740 --> 00:02:53,850
will also import our card section from Conon which is our collection of all of our reusable components.

36
00:02:53,900 --> 00:03:04,010
Then we'll make our list item class which will extend component we'll make our render method the list

37
00:03:04,010 --> 00:03:04,730
item itself.

38
00:03:04,730 --> 00:03:07,350
I think it just needs to show the employees name.

39
00:03:07,550 --> 00:03:11,770
It doesn't really make too much maybe it makes sense to show the shift or something like that.

40
00:03:12,050 --> 00:03:17,130
But I think that for the purposes of our app I think it makes sense to show the name on the on here.

41
00:03:17,570 --> 00:03:26,180
So I will pull off the name of the employee which is coming from this stock props start employee then

42
00:03:26,180 --> 00:03:30,140
I will return a card section

43
00:03:34,620 --> 00:03:44,910
S. and inside of there will have are text tag which contains the employee's name.

44
00:03:45,360 --> 00:03:50,550
Then at the bottom I will export the full list item to make sure that this thing can be used in other

45
00:03:50,550 --> 00:03:51,680
files as well.

46
00:03:51,690 --> 00:03:56,820
I think the last thing that I want to do is add a little bit of styling to the text tag itself as it

47
00:03:56,820 --> 00:04:01,860
stands right now we would render all the way to the left of the screen you know kind of butting up against

48
00:04:01,860 --> 00:04:02,640
the edge.

49
00:04:02,670 --> 00:04:06,360
So I think that maybe we should increase the text size of this thing and make sure that it has a little

50
00:04:06,360 --> 00:04:09,030
bit of standoff from the left hand edge as well.

51
00:04:09,160 --> 00:04:12,680
So make a Stiles object at the bottom.

52
00:04:12,680 --> 00:04:22,720
This thing will have a title style and will give it a font size of 18 along with a padding left of 15.

53
00:04:22,820 --> 00:04:26,670
There's padding left is what's going to give us a little stand off in the edge.

54
00:04:26,670 --> 00:04:30,490
Then we can pass that as a style to our text tag.

55
00:04:30,530 --> 00:04:35,060
So styles dot title style like so.

56
00:04:35,970 --> 00:04:38,100
All right let's try this out in the simulator.

57
00:04:38,100 --> 00:04:39,060
So refresh

58
00:04:42,880 --> 00:04:49,740
we will log back in.

59
00:04:50,220 --> 00:04:54,780
And now we get our employees popping up on the screen and that is a mighty fine looking list.

60
00:04:54,880 --> 00:04:56,290
Without a doubt.

61
00:04:56,290 --> 00:04:57,540
So now here's the real test.

62
00:04:57,540 --> 00:05:02,880
Here's the thing we really want to make sure silk works though if I add a new employee I expect to see

63
00:05:02,880 --> 00:05:07,930
it automatically appear in this list and I expected to appear there automatically because remember'd

64
00:05:07,950 --> 00:05:12,900
side of our action creator file we made that employees fetch action creator.

65
00:05:12,900 --> 00:05:19,860
We only have to cull this thing just like the one time and then any time that any new data comes across

66
00:05:19,860 --> 00:05:25,980
from firebase and remember firebase is a live dynamic data store so any time that remote collection

67
00:05:25,980 --> 00:05:34,410
or remote pool of employees gets updated we will get notified by this on value event handler right here.

68
00:05:34,560 --> 00:05:40,440
So any time we get a new employee we should automatically get a dispatch of employees fecche success

69
00:05:40,770 --> 00:05:42,710
along with a new list of employees.

70
00:05:42,720 --> 00:05:44,890
So that is what I expect to have happen.

71
00:05:44,910 --> 00:05:47,530
I'm going to make a new employee.

72
00:05:48,050 --> 00:05:55,350
We need we need a name for this one about Samantha and Samantha is also there all sharing the same phone

73
00:05:55,350 --> 00:05:56,800
number.

74
00:05:56,880 --> 00:06:01,980
Samantha maybe she needs to work on Sunday so that will create this takes us back to our employee list

75
00:06:01,980 --> 00:06:07,920
screen and we automatically get Samantha appended onto the list at the very bottom right there.

76
00:06:07,920 --> 00:06:08,610
It is awesome.

77
00:06:08,640 --> 00:06:13,170
We dont have to do any additional logic to go out and hey refed your list of employees or anything like

78
00:06:13,170 --> 00:06:13,520
that.

79
00:06:13,650 --> 00:06:15,640
So definitely works fantastically.

80
00:06:15,930 --> 00:06:21,180
Lets now continue in the next section and start working on one of our next features.

81
00:06:21,270 --> 00:06:25,190
The ability to edit and delete existing employees