1
00:00:01,040 --> 00:00:04,130
In last video we started putting together our streamlets component.

2
00:00:04,220 --> 00:00:09,500
We got the list of streams to render But remember we want to show some buttons on these individual streams

3
00:00:09,710 --> 00:00:15,710
that say delete and edit these buttons should only be visible if I was the person who created the stream.

4
00:00:15,710 --> 00:00:20,930
So in this example I would have created this stream and so I see delete and edit but I did not create

5
00:00:20,930 --> 00:00:21,440
this stream.

6
00:00:21,440 --> 00:00:23,730
And so I don't see any buttons on the right hand side.

7
00:00:23,990 --> 00:00:28,970
So this kind of goes back to the topic of authentication and that also ties on this entire process of

8
00:00:28,970 --> 00:00:30,610
fetching streams and whatnot.

9
00:00:30,770 --> 00:00:35,720
So it's kind of a good tie up for the authentication and fetching the list of streams part of this application

10
00:00:36,470 --> 00:00:42,770
in order to figure out which stream was created by who we need to actually attach a user ID to our streams

11
00:00:42,830 --> 00:00:44,270
when they get created.

12
00:00:44,270 --> 00:00:49,780
At present the general structure of our stream object looks like this right here.

13
00:00:49,820 --> 00:00:54,020
So we've just got the idea of the stream itself title and description.

14
00:00:54,020 --> 00:00:58,440
And so what I think we need to do is add on a new key value pair to this thing.

15
00:00:58,490 --> 00:01:05,840
I think that when we create a stream object we need to attach a user ID and this will be the ID of whoever

16
00:01:05,840 --> 00:01:07,310
created this thing.

17
00:01:07,340 --> 00:01:12,020
Now the user id is going to be coming from our off piece of state.

18
00:01:12,020 --> 00:01:17,120
Remember that when we went through that process we saw that actual user ID.

19
00:01:17,140 --> 00:01:22,550
Now if I actually open up my state tab over here and let's see I don't have my user ID right now but

20
00:01:22,550 --> 00:01:24,720
if I log in really quickly.

21
00:01:24,980 --> 00:01:26,510
Let me just go to that process.

22
00:01:29,160 --> 00:01:30,380
OK there we go.

23
00:01:30,390 --> 00:01:32,640
I now see my user ID is inside of your.

24
00:01:32,790 --> 00:01:37,210
So you and I want to take this user ID and attach it to our stream object.

25
00:01:37,290 --> 00:01:39,970
When we create it through the stream create form.

26
00:01:40,260 --> 00:01:46,930
So essentially inside of our actions index touchiest file here it is right here we can find our create

27
00:01:46,930 --> 00:01:48,880
stream action creator.

28
00:01:48,880 --> 00:01:54,550
So right now whenever the thing gets called it is past our form values from the form that creates the

29
00:01:54,550 --> 00:01:55,260
stream.

30
00:01:55,270 --> 00:02:00,220
So essentially want to take both that form Ballis object and our users.

31
00:02:00,250 --> 00:02:05,650
User ID and then posts that all off to our streams and point.

32
00:02:05,650 --> 00:02:10,480
So its not going to be up to the API or anything like that to manage the user id or attach the user

33
00:02:10,480 --> 00:02:10,940
ID.

34
00:02:10,960 --> 00:02:16,050
It is up to you and me to make sure that the appropriate user ID gets attached to each stream object.

35
00:02:16,420 --> 00:02:16,780
OK.

36
00:02:16,840 --> 00:02:23,890
So to actually do this we need to somehow get our user ID inside of our action creator as a quick reminder

37
00:02:23,920 --> 00:02:29,110
remember that when we return a function from an action creator which this is right here this is what

38
00:02:29,110 --> 00:02:34,330
we return the function gets called automatically by redux thunk with two arguments.

39
00:02:34,330 --> 00:02:38,970
The first argument is the dispatch function which weve seen several times but it also gets called a

40
00:02:38,980 --> 00:02:40,670
second argument as well.

41
00:02:40,780 --> 00:02:46,210
And that second argument is the get state function that gets state function allows us to reach into

42
00:02:46,210 --> 00:02:48,980
the redux store and pull out some piece of information.

43
00:02:49,120 --> 00:02:53,300
In this case it's going to allow us to pull out the user ID.

44
00:02:53,460 --> 00:02:57,040
So let's try this out inside of create Stream right here.

45
00:02:57,300 --> 00:03:02,640
I'm going to add a set of parentheses around dispatch and then I'll get my get state function as the

46
00:03:02,640 --> 00:03:03,930
second argument.

47
00:03:05,070 --> 00:03:11,760
So then inside the first line of that action Creator I'm going to structure our user ID from calling

48
00:03:11,850 --> 00:03:18,280
get state DOT off so good state is going to return the entire state object.

49
00:03:18,330 --> 00:03:25,000
And I'm going to access the off piece of state on there and just pluck out the user ID if you don't

50
00:03:25,030 --> 00:03:29,910
ever quite remember the structure of our redux store you can always go back over to redux step tools

51
00:03:29,920 --> 00:03:34,010
click on the little state button right there and they'll see here is all of our state.

52
00:03:34,060 --> 00:03:39,140
So we've got the property and the user ideas nested inside there.

53
00:03:39,190 --> 00:03:45,550
All right so now back over here we want to take our user ID and our form values and essentially combine

54
00:03:45,550 --> 00:03:47,650
them together inside of a single object.

55
00:03:47,710 --> 00:03:52,500
So to do so we can use a similar syntax to what we have been doing inside of our inducers.

56
00:03:52,870 --> 00:03:57,010
So I'm going to wrap form values with an object.

57
00:03:57,010 --> 00:04:02,140
I'm going to take all the key value pairs that have form values and add it to that object by adding

58
00:04:02,140 --> 00:04:08,110
in the dot dot dot and then I'm also going to add in user id like so.

59
00:04:08,220 --> 00:04:12,990
So now when we post a news stream to our API we're going to be posting up all the values out of our

60
00:04:12,990 --> 00:04:17,090
form along with the ID of the user who just created that stream as well.

61
00:04:18,240 --> 00:04:21,210
So let's now try creating a new stream.

62
00:04:21,360 --> 00:04:25,230
This change that we are making is not going to be applied retroactively to the streams we've already

63
00:04:25,230 --> 00:04:28,180
created which is actually going to be kind of good.

64
00:04:28,230 --> 00:04:33,970
I'll show you in a little bit how we can manually mess around with some of the data inside of our API.

65
00:04:34,050 --> 00:04:38,220
But for right now it would actually be kind of nice to have some streams that do not have a user ID

66
00:04:38,490 --> 00:04:42,550
and some that do have a user id equal to our ID.

67
00:04:42,720 --> 00:04:49,170
So I'm going to save this and then I'm going to go back over to my application and I'm going to manually

68
00:04:49,230 --> 00:04:52,440
navigate to streams slash new.

69
00:04:52,530 --> 00:04:57,930
And then once over here I'm going to create a news stream so I'll give it a title of like I created

70
00:04:58,920 --> 00:05:00,590
this stream.

71
00:05:00,780 --> 00:05:05,270
And how about a description of this was made by me.

72
00:05:06,490 --> 00:05:08,710
And then I'll click on submit.

73
00:05:08,850 --> 00:05:11,700
Now remember when you go to this process you need to be signed in.

74
00:05:11,830 --> 00:05:15,220
At present we don't really have any guards or checks or anything like that to make sure that you are

75
00:05:15,220 --> 00:05:17,200
signed in before you create a stream.

76
00:05:17,200 --> 00:05:18,880
So if you are not currently signed in.

77
00:05:18,940 --> 00:05:23,290
Make sure you do sign in and then attempt to create a stream a second time.

78
00:05:23,290 --> 00:05:29,170
Now after I clicked on Submit I should be able to go back over to my redux step tools and scroll all

79
00:05:29,170 --> 00:05:35,910
the way down to the bottom of the list of actions right here and I'll see the action of create stream.

80
00:05:35,980 --> 00:05:43,360
Now if I go back to my list of streams by clicking on stream me appear at the top I'll see this stream

81
00:05:43,360 --> 00:05:43,990
was created by me.

82
00:05:43,990 --> 00:05:46,790
So this is the one that I just made right here.

83
00:05:46,840 --> 00:05:49,500
In addition I can open up redux dev tools again.

84
00:05:49,630 --> 00:05:51,370
Click on the state button.

85
00:05:51,700 --> 00:05:56,920
Expand my list of streams and see streams with ID 1 2 and 3 inside of here.

86
00:05:56,990 --> 00:06:01,030
And so here is the one that I just created and I can very plainly see that it has the correct title

87
00:06:01,060 --> 00:06:03,620
description and user ID.

88
00:06:03,630 --> 00:06:08,340
OK so now every time that we create a stream we have the ID of the user who created it.

89
00:06:08,400 --> 00:06:14,940
So now we can use that ID to decide whether or not we want to show these two extra buttons over here

90
00:06:14,940 --> 00:06:18,650
on the right hand side to delete and edit a particular stream.

91
00:06:18,690 --> 00:06:22,470
So lets take a quick pause and then we'll come back in the next video and start to make sure that we

92
00:06:22,470 --> 00:06:26,030
show those two buttons on the end of each stream.