In last video we started putting together our streamlets component.
We got the list of streams to render But remember we want to show some buttons on these individual streams
that say delete and edit these buttons should only be visible if I was the person who created the stream.
So in this example I would have created this stream and so I see delete and edit but I did not create
this stream.
And so I don't see any buttons on the right hand side.
So this kind of goes back to the topic of authentication and that also ties on this entire process of
fetching streams and whatnot.
So it's kind of a good tie up for the authentication and fetching the list of streams part of this application
in order to figure out which stream was created by who we need to actually attach a user ID to our streams
when they get created.
At present the general structure of our stream object looks like this right here.
So we've just got the idea of the stream itself title and description.
And so what I think we need to do is add on a new key value pair to this thing.
I think that when we create a stream object we need to attach a user ID and this will be the ID of whoever
created this thing.
Now the user id is going to be coming from our off piece of state.
Remember that when we went through that process we saw that actual user ID.
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
if I log in really quickly.
Let me just go to that process.
OK there we go.
I now see my user ID is inside of your.
So you and I want to take this user ID and attach it to our stream object.
When we create it through the stream create form.
So essentially inside of our actions index touchiest file here it is right here we can find our create
stream action creator.
So right now whenever the thing gets called it is past our form values from the form that creates the
stream.
So essentially want to take both that form Ballis object and our users.
User ID and then posts that all off to our streams and point.
So its not going to be up to the API or anything like that to manage the user id or attach the user
ID.
It is up to you and me to make sure that the appropriate user ID gets attached to each stream object.
OK.
So to actually do this we need to somehow get our user ID inside of our action creator as a quick reminder
remember that when we return a function from an action creator which this is right here this is what
we return the function gets called automatically by redux thunk with two arguments.
The first argument is the dispatch function which weve seen several times but it also gets called a
second argument as well.
And that second argument is the get state function that gets state function allows us to reach into
the redux store and pull out some piece of information.
In this case it's going to allow us to pull out the user ID.
So let's try this out inside of create Stream right here.
I'm going to add a set of parentheses around dispatch and then I'll get my get state function as the
second argument.
So then inside the first line of that action Creator I'm going to structure our user ID from calling
get state DOT off so good state is going to return the entire state object.
And I'm going to access the off piece of state on there and just pluck out the user ID if you don't
ever quite remember the structure of our redux store you can always go back over to redux step tools
click on the little state button right there and they'll see here is all of our state.
So we've got the property and the user ideas nested inside there.
All right so now back over here we want to take our user ID and our form values and essentially combine
them together inside of a single object.
So to do so we can use a similar syntax to what we have been doing inside of our inducers.
So I'm going to wrap form values with an object.
I'm going to take all the key value pairs that have form values and add it to that object by adding
in the dot dot dot and then I'm also going to add in user id like so.
So now when we post a news stream to our API we're going to be posting up all the values out of our
form along with the ID of the user who just created that stream as well.
So let's now try creating a new stream.
This change that we are making is not going to be applied retroactively to the streams we've already
created which is actually going to be kind of good.
I'll show you in a little bit how we can manually mess around with some of the data inside of our API.
But for right now it would actually be kind of nice to have some streams that do not have a user ID
and some that do have a user id equal to our ID.
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
navigate to streams slash new.
And then once over here I'm going to create a news stream so I'll give it a title of like I created
this stream.
And how about a description of this was made by me.
And then I'll click on submit.
Now remember when you go to this process you need to be signed in.
At present we don't really have any guards or checks or anything like that to make sure that you are
signed in before you create a stream.
So if you are not currently signed in.
Make sure you do sign in and then attempt to create a stream a second time.
Now after I clicked on Submit I should be able to go back over to my redux step tools and scroll all
the way down to the bottom of the list of actions right here and I'll see the action of create stream.
Now if I go back to my list of streams by clicking on stream me appear at the top I'll see this stream
was created by me.
So this is the one that I just made right here.
In addition I can open up redux dev tools again.
Click on the state button.
Expand my list of streams and see streams with ID 1 2 and 3 inside of here.
And so here is the one that I just created and I can very plainly see that it has the correct title
description and user ID.
OK so now every time that we create a stream we have the ID of the user who created it.
So now we can use that ID to decide whether or not we want to show these two extra buttons over here
on the right hand side to delete and edit a particular stream.
So lets take a quick pause and then we'll come back in the next video and start to make sure that we
show those two buttons on the end of each stream.