1
00:00:00,750 --> 00:00:02,640
-: We've now got our static list of users.

2
00:00:02,640 --> 00:00:05,610
So we'll put together our user list component.

3
00:00:05,610 --> 00:00:07,440
I'm gonna make a new file inside

4
00:00:07,440 --> 00:00:11,613
of our components directory called User List.

5
00:00:13,530 --> 00:00:16,260
Inside of here this is definitely gonna be a container

6
00:00:16,260 --> 00:00:19,200
component. It's going to need to reach out to Redux

7
00:00:19,200 --> 00:00:21,900
and get our current list of users from the Redux store

8
00:00:21,900 --> 00:00:23,753
which means we need to read

9
00:00:23,753 --> 00:00:26,640
from our global application state. To make this happen

10
00:00:26,640 --> 00:00:28,840
we'll definitely turn this into a container.

11
00:00:30,090 --> 00:00:33,090
Let's do our import statements at the top.

12
00:00:33,090 --> 00:00:38,090
So we'll import React and component from React

13
00:00:38,310 --> 00:00:43,223
and we'll also import our Connect helper from React Redux.

14
00:00:44,280 --> 00:00:46,130
Then we'll do our store, or excuse me

15
00:00:46,964 --> 00:00:50,620
our class user list extends component

16
00:00:52,590 --> 00:00:57,510
Put our render method in and let's, let's do our user

17
00:00:57,510 --> 00:00:59,969
list first. Let's build that.

18
00:00:59,969 --> 00:01:01,650
That should be pretty straightforward.

19
00:01:01,650 --> 00:01:04,620
So we want to have a list of users here.

20
00:01:04,620 --> 00:01:07,720
We're going to have definitely kinda like a list, you know

21
00:01:08,602 --> 00:01:10,260
on this dot props, maybe something like this dot Props

22
00:01:10,260 --> 00:01:15,260
dot users and we'll map over that, that list and produce one

23
00:01:15,570 --> 00:01:19,200
kind of card looking thing or one profile for each user

24
00:01:19,200 --> 00:01:20,610
that we have.

25
00:01:20,610 --> 00:01:23,256
So I'm going to assume that we're going to have

26
00:01:23,256 --> 00:01:24,630
a separate helper method that's going to put together

27
00:01:24,630 --> 00:01:27,510
a single profile for one of our users.

28
00:01:27,510 --> 00:01:29,830
Let's put that kinda helper method together

29
00:01:30,900 --> 00:01:34,050
and we'll call it render user.

30
00:01:34,050 --> 00:01:37,230
and we'll pass in a single user to be rendered.

31
00:01:37,230 --> 00:01:41,320
So now all we have to do is put in our route div

32
00:01:42,630 --> 00:01:45,240
and then we can map over our list

33
00:01:45,240 --> 00:01:48,600
of users and for each user that we have

34
00:01:48,600 --> 00:01:50,520
so this dot props dot users dot map

35
00:01:50,520 --> 00:01:54,390
each user that we have will reference this dot render user.

36
00:01:54,390 --> 00:01:59,010
So for each user, call the helper function, render user

37
00:01:59,010 --> 00:02:02,193
and then return it into our jsx right here.

38
00:02:03,510 --> 00:02:06,930
Let's put together the jsx now for our render user.

39
00:02:06,930 --> 00:02:09,810
So again, this is gonna be rendering a single user.

40
00:02:09,810 --> 00:02:10,643
We're gonna make use

41
00:02:10,643 --> 00:02:13,980
of some bootstrap CSS classes here as well, so

42
00:02:13,980 --> 00:02:16,440
that we get a kind of nice looking card available to us.

43
00:02:16,440 --> 00:02:18,273
Nice, nice looking profile.

44
00:02:19,170 --> 00:02:24,120
So let's return a top level div with a class name of card.

45
00:02:25,140 --> 00:02:26,223
Card block.

46
00:02:29,760 --> 00:02:32,070
We'll have, how about a leading H four

47
00:02:32,070 --> 00:02:33,540
for the class name

48
00:02:33,540 --> 00:02:35,223
of card title.

49
00:02:37,320 --> 00:02:39,003
This will be our user name.

50
00:02:41,280 --> 00:02:43,680
And for right now, we don't really have any anything else.

51
00:02:43,680 --> 00:02:45,510
We said that we were gonna put on the company name

52
00:02:45,510 --> 00:02:48,900
and a button to click to email that particular user.

53
00:02:48,900 --> 00:02:50,910
We don't have that data available to us yet

54
00:02:50,910 --> 00:02:53,160
because we're just kinda loading these fake users

55
00:02:53,160 --> 00:02:55,110
with just a name property.

56
00:02:55,110 --> 00:02:58,560
So instead we'll put in some, a fake company name

57
00:02:58,560 --> 00:03:01,950
and a fake acre tag or a fake email link.

58
00:03:01,950 --> 00:03:03,810
and then when we start loading our real data

59
00:03:03,810 --> 00:03:05,160
from our AJA X standpoint

60
00:03:05,160 --> 00:03:08,250
then we'll come back and refresh this component right here.

61
00:03:08,250 --> 00:03:11,490
So I'm gonna put in a paragraph tag with a class name

62
00:03:11,490 --> 00:03:13,210
of card text

63
00:03:15,300 --> 00:03:16,133
and let's say

64
00:03:16,133 --> 00:03:17,080
that they work for a

65
00:03:18,090 --> 00:03:19,470
everyone's gonna work for the same company

66
00:03:19,470 --> 00:03:21,450
since we're gonna hard code it right here

67
00:03:21,450 --> 00:03:22,283
but let's just say

68
00:03:22,283 --> 00:03:24,640
that they work for the, I don't know, cheese factory.

69
00:03:25,590 --> 00:03:26,793
Sounds like good job.

70
00:03:28,320 --> 00:03:29,730
We'll put in our anchor tag.

71
00:03:29,730 --> 00:03:32,430
This will serve as the email link.

72
00:03:32,430 --> 00:03:36,400
Have a class name of button button primary

73
00:03:39,570 --> 00:03:41,550
And we'll say email.

74
00:03:41,550 --> 00:03:43,950
We don't need to put it on an actual HF property.

75
00:03:43,950 --> 00:03:45,810
We'll do that later when we have some actual email

76
00:03:45,810 --> 00:03:47,790
addresses to work with.

77
00:03:47,790 --> 00:03:49,650
Okay, so this looks pretty good for our user list.

78
00:03:49,650 --> 00:03:51,960
Again, our only goal right now is just to show a list

79
00:03:51,960 --> 00:03:54,960
of users, a list of our fake static data.

80
00:03:54,960 --> 00:03:57,690
We're gonna turn our application into fetching its data

81
00:03:57,690 --> 00:04:00,330
from a AJAX resource, and then we're gonna work

82
00:04:00,330 --> 00:04:01,800
on the middleware.

83
00:04:01,800 --> 00:04:04,200
So the last thing we need to do before we can probably

84
00:04:04,200 --> 00:04:07,050
start rendering our app application is define our map state

85
00:04:07,050 --> 00:04:10,590
to props and push our list of users into this component.

86
00:04:10,590 --> 00:04:12,510
So let's do that really quick.

87
00:04:12,510 --> 00:04:15,840
At the bottom of the file, we'll define our function

88
00:04:15,840 --> 00:04:18,010
map state to props

89
00:04:19,410 --> 00:04:20,589
and we will return

90
00:04:21,480 --> 00:04:22,440
users

91
00:04:22,440 --> 00:04:23,943
state dot users.

92
00:04:25,350 --> 00:04:28,140
Then we can finally get around to doing our export

93
00:04:28,140 --> 00:04:30,210
statement, export

94
00:04:30,210 --> 00:04:31,050
default

95
00:04:31,050 --> 00:04:31,883
connect

96
00:04:33,510 --> 00:04:34,900
map state to props

97
00:04:36,720 --> 00:04:38,430
with user list.

98
00:04:38,430 --> 00:04:40,470
All right, I'm gonna save this.

99
00:04:40,470 --> 00:04:41,760
So I'm gonna tell you

100
00:04:41,760 --> 00:04:43,680
that there might be something a little bit funny

101
00:04:43,680 --> 00:04:44,910
about our application right now.

102
00:04:44,910 --> 00:04:46,470
Let's try it out in the browser

103
00:04:46,470 --> 00:04:48,030
and just see what happens really quick.

104
00:04:48,030 --> 00:04:53,030
So I'm going to open our project, I'm gonna refresh the page

105
00:04:53,310 --> 00:04:56,100
and it looks like, huh, nothing, nothing's different yet.

106
00:04:56,100 --> 00:04:58,560
So we made one small mistake.

107
00:04:58,560 --> 00:05:01,500
We didn't actually include user list into our app.

108
00:05:01,500 --> 00:05:02,790
So let's make sure that happens

109
00:05:02,790 --> 00:05:05,880
real quick. I'm gonna go back over to app.

110
00:05:05,880 --> 00:05:08,140
We will import our user list

111
00:05:09,120 --> 00:05:10,420
from user list

112
00:05:11,490 --> 00:05:12,600
and then okay

113
00:05:12,600 --> 00:05:14,760
now we can actually make use of the component.

114
00:05:14,760 --> 00:05:16,240
So user list

115
00:05:17,130 --> 00:05:17,963
like so

116
00:05:19,230 --> 00:05:21,580
and I'm gonna do some formatting here just cuz.

117
00:05:25,260 --> 00:05:26,640
All right, so this looks a little bit better.

118
00:05:26,640 --> 00:05:28,140
Let's give this a shot.

119
00:05:28,140 --> 00:05:30,090
Now we'll refresh and all right

120
00:05:30,090 --> 00:05:31,470
that's what I was expecting.

121
00:05:31,470 --> 00:05:34,200
Nothing on the screen, nothing at all.

122
00:05:34,200 --> 00:05:36,150
So this is not related to middlewares at all.

123
00:05:36,150 --> 00:05:37,380
Just a little bit of a side effect

124
00:05:37,380 --> 00:05:39,900
because the way that we wired everything up

125
00:05:39,900 --> 00:05:42,280
if I look at my element inspector

126
00:05:44,250 --> 00:05:47,520
we can see that we've got our body, we've got a div

127
00:05:47,520 --> 00:05:49,590
and then we've got an inner div here

128
00:05:49,590 --> 00:05:52,920
and this innermost div represents our user list component.

129
00:05:52,920 --> 00:05:55,200
So the user list is definitely showing up.

130
00:05:55,200 --> 00:05:57,660
We just don't really have any users to render

131
00:05:57,660 --> 00:06:00,330
over or iterate over to build our list of users.

132
00:06:00,330 --> 00:06:02,970
So we missed one very critical component in here.

133
00:06:02,970 --> 00:06:06,150
We never actually called our action creator to

134
00:06:06,150 --> 00:06:08,730
kind of seed our list of users.

135
00:06:08,730 --> 00:06:12,810
So we need to define, a component will mount inside

136
00:06:12,810 --> 00:06:15,270
of our user list to seed or kind

137
00:06:15,270 --> 00:06:18,723
of fetch that in this initial list of very static users.

138
00:06:19,860 --> 00:06:20,970
The first thing we need to do

139
00:06:20,970 --> 00:06:23,820
before we do the component will mount is import all

140
00:06:23,820 --> 00:06:25,920
of our action creators into this file

141
00:06:25,920 --> 00:06:29,070
and then wire them up as props to user list.

142
00:06:29,070 --> 00:06:32,673
So let's import star as actions from

143
00:06:32,673 --> 00:06:34,173
from actions.

144
00:06:35,460 --> 00:06:40,083
Then in the second argument to connect, we'll pass actions.

145
00:06:40,950 --> 00:06:44,770
And then finally, inside of component we'll

146
00:06:46,200 --> 00:06:47,033
mount

147
00:06:48,900 --> 00:06:53,700
we can finally call this dot props, dot fetch users.

148
00:06:53,700 --> 00:06:57,210
So this will call our action creator fetch users.

149
00:06:57,210 --> 00:06:59,670
The list of users or the static fake list

150
00:06:59,670 --> 00:07:01,410
of users will flow into the reducer.

151
00:07:01,410 --> 00:07:03,240
It will cause this component to rerender.

152
00:07:03,240 --> 00:07:06,270
And boom, we should have our list of users.

153
00:07:06,270 --> 00:07:08,190
So let's go ahead and give this a shot.

154
00:07:08,190 --> 00:07:10,260
Back in the browser.

155
00:07:10,260 --> 00:07:11,433
A refresh.

156
00:07:12,330 --> 00:07:14,250
And boom, there's our list of users.

157
00:07:14,250 --> 00:07:15,083
Very good.

158
00:07:16,050 --> 00:07:18,750
Now I can already tell that these list of users

159
00:07:18,750 --> 00:07:21,090
it's very wide so to speak.

160
00:07:21,090 --> 00:07:24,150
So let's get into the next section and do just a little bit

161
00:07:24,150 --> 00:07:26,580
of styling just to shorten up the list of users.

162
00:07:26,580 --> 00:07:27,870
And then we'll start on doing some

163
00:07:27,870 --> 00:07:30,420
of the more interesting stuff in this section.

164
00:07:30,420 --> 00:07:31,870
I'll see in the next section.