1
00:00:00,950 --> 00:00:05,120
Now that we've got our fette user action creator put together we're going to start to create our component

2
00:00:05,630 --> 00:00:08,590
that is going to display just the author's name.

3
00:00:08,600 --> 00:00:11,770
And again we're going to called out the user Hetter.

4
00:00:11,800 --> 00:00:16,120
So back inside of my components directory I will make a new file called user header.

5
00:00:16,220 --> 00:00:17,420
Yes.

6
00:00:17,560 --> 00:00:22,150
And then inside of here we're going to put together some boilerplate for a class based component.

7
00:00:22,150 --> 00:00:25,060
So I'm going to import re-act from react.

8
00:00:25,300 --> 00:00:34,260
I'll create class User Hetter that extends re-act component and then inside of here I will define my

9
00:00:34,320 --> 00:00:36,610
render method inside the render method.

10
00:00:36,630 --> 00:00:43,970
Right now we'll just return a simple div that has a text like user Hetter And then as usual at the bottom

11
00:00:44,180 --> 00:00:47,270
we will place our export default user header.

12
00:00:47,690 --> 00:00:48,560
All right.

13
00:00:48,560 --> 00:00:52,730
So we're going to want to make sure that this thing eventually is going to call an action creator to

14
00:00:52,730 --> 00:00:54,890
fetch the user that it needs to show on the screen.

15
00:00:55,130 --> 00:00:56,780
We'll get around to that in just a second.

16
00:00:56,780 --> 00:01:01,850
But for now let's make sure that the user Hetter gets displayed inside of our posts list at the appropriate

17
00:01:01,850 --> 00:01:02,870
location.

18
00:01:03,320 --> 00:01:10,910
So going to flip back over to my posts list component at the top I'm going to import user Hetter rom

19
00:01:11,000 --> 00:01:19,090
user Hetter and then down inside of my render list method we're going to create a new instance of this

20
00:01:19,090 --> 00:01:25,300
component right after the closing div on the H-2 and that paragraph tax.

21
00:01:25,360 --> 00:01:30,440
So right you're right underneath one div I'm going to put user Hetter.

22
00:01:30,670 --> 00:01:36,150
Now when we create this component we need to tell it exactly what user id it needs to show.

23
00:01:36,340 --> 00:01:39,950
Or excuse me the idea of the user that it needs to show.

24
00:01:40,000 --> 00:01:42,850
So we need to pass that down as a prop.

25
00:01:42,860 --> 00:01:45,310
Now we could certainly pass down a prop called ID.

26
00:01:45,350 --> 00:01:49,670
But just to make the terminology inside of you're a little bit easier to follow I'm going to call this

27
00:01:49,670 --> 00:01:52,290
Propp user id just make sure it's really clear.

28
00:01:52,300 --> 00:01:57,590
We are working with the idea of some particular user and then for the value of that I'm going to reference

29
00:01:57,740 --> 00:02:00,860
post user ID.

30
00:02:00,900 --> 00:02:07,830
Now we are able to pass in post user id recall because if we go back over to the post and point every

31
00:02:07,830 --> 00:02:14,860
posts object has a user id property and that is the ID of the user that made that post.

32
00:02:14,900 --> 00:02:22,990
All right so now if we save this we should be able to flip back over to our application and hopefully

33
00:02:24,670 --> 00:02:30,860
if you refresh the page I think that I kind of have my development server not running right now.

34
00:02:31,090 --> 00:02:34,660
Believe it or not you know I definitely just change this but I'm not seeing that update so I'll tell

35
00:02:34,660 --> 00:02:35,230
you what.

36
00:02:35,230 --> 00:02:36,000
There we go.

37
00:02:36,010 --> 00:02:36,250
All right.

38
00:02:36,250 --> 00:02:36,820
That's better.

39
00:02:36,820 --> 00:02:37,860
Fun see the update.

40
00:02:38,110 --> 00:02:42,010
I had stopped my server between the last Wii on this one that's why I thought maybe I hadn't started

41
00:02:42,010 --> 00:02:42,600
back up.

42
00:02:42,650 --> 00:02:45,400
Anyways we now see the text user header here on the screen.

43
00:02:45,400 --> 00:02:47,080
So that definitely looks pretty reasonable.

44
00:02:47,080 --> 00:02:48,990
Now let's keep going with these are Hetter.

45
00:02:49,070 --> 00:02:51,840
So I got to go back over here into the user header component.

46
00:02:51,970 --> 00:02:56,710
We want to make sure that we call an action creator inside of here that's going to fetch the appropriate

47
00:02:56,770 --> 00:02:57,820
user.

48
00:02:57,820 --> 00:03:02,520
So at the top we're going to make sure that we import the connect function and the action creator itself

49
00:03:02,820 --> 00:03:06,980
and we will use the connect tag to wire up the action creator to the component.

50
00:03:06,980 --> 00:03:16,150
So at the top I'm going to import connect from re-act redux and I'll import fetch user from actions.

51
00:03:19,490 --> 00:03:25,000
So now down at the bottom I'll place the connect function and make sure I wrap my component with a second

52
00:03:25,000 --> 00:03:26,780
set parentheses.

53
00:03:26,860 --> 00:03:29,630
Right now we did not have a map state to prop's function.

54
00:03:29,640 --> 00:03:34,300
I'm going to pass a null as the first argument and then for the second argument I'll do an object with

55
00:03:34,300 --> 00:03:37,450
fecche user OK.

56
00:03:37,450 --> 00:03:40,700
It's now the last thing we do inside of our component.

57
00:03:40,740 --> 00:03:45,370
When ever this component appears on the screen we're probably going to want to make sure that we attempt

58
00:03:45,360 --> 00:03:48,780
to patch the given user that this thing is supposed to show.

59
00:03:49,000 --> 00:03:54,210
So I'm going to define that component did mount inside of here when whenever user header is displayed.

60
00:03:54,220 --> 00:03:56,830
I'm going to call my action Creator through this stuff.

61
00:03:56,850 --> 00:03:58,570
Propst fetch user.

62
00:03:58,830 --> 00:04:03,280
And then remember we need to pass than the ID of the user that we want to fetch.

63
00:04:03,550 --> 00:04:08,920
And as we saw just a second ago we are passing in the idea the user that we want to fetch as a prop

64
00:04:08,920 --> 00:04:18,770
called user id so back over here I'll make sure I call fetch user with this stuff Propst user id OK.

65
00:04:18,780 --> 00:04:20,780
And that's pretty much it.

66
00:04:20,790 --> 00:04:27,090
So we can save this and flip back over to my application and it looks like everything still works.

67
00:04:27,090 --> 00:04:31,650
Now we don't have any redo sir to actually pick up the data from the request that we are making and

68
00:04:31,650 --> 00:04:34,090
eventually get access to it and show it on the screen.

69
00:04:34,110 --> 00:04:38,120
So we'll take a quick pause right here and start to tackle that in the next video.

70
00:04:38,160 --> 00:04:43,500
Now before we move on I want to remind you I told you that we were going to run into one or two little

71
00:04:43,500 --> 00:04:44,370
challenges.

72
00:04:44,520 --> 00:04:49,980
So if you are looking at some aspect of this application right now and saying Hey Stephen you know what

73
00:04:50,010 --> 00:04:52,500
I don't think this is working the way we expect it to work.

74
00:04:52,560 --> 00:04:53,260
That is fine.

75
00:04:53,270 --> 00:04:57,200
I'm not going to tell you exactly what it is because I kind of want you to stumble into it yourself.

76
00:04:57,210 --> 00:05:01,890
But again if you see something that looks weird that is totally fine and we're going to fix it up in

77
00:05:01,890 --> 00:05:03,100
a couple of videos.

78
00:05:03,180 --> 00:05:03,410
OK.

79
00:05:03,420 --> 00:05:07,170
So let's take a pause right here and we'll start working on a redo in the next video.