Now that we have our streams associated with the user who created them we're going to update our stream
lists component and make sure that these streams that were created by me have buttons on the right hand
side.
So going to flip on over to my stream list component the first thing we have to do inside of your is
make sure that this component understands the idea of the user who is currently signed into our application.
We've already stored that information inside of our redux store.
Remember we've got the off piece of state whenever a user is signed in.
We have the user id property that has the idea the user right there.
So essentially whenever we iterate through our list of streams and render them out on the screen we
just want to compare the current user's ID with a user id associate at the stream.
And if they are equal then we want to show those buttons on the right hand side of each stream.
All right so I going to flip back over and then I'm going to go down to my map state to prop's function.
So right now our user ID is stored inside of our redux store to get the information into our component
we need to use the map stage props function.
So I'm going to expand that object and I'll add in a user id property and the value for this is going
to come from state DOT DOT user ID.
Now as a quick note it might be a little bit more descriptive to pass this into our component as a property
called Current User ID.
I think I'm going to go ahead with that because it makes it a little bit more obvious that this is the
ID of the person who is currently signed in and using the application.
OK so now we can go back up to our runner list method.
So now somewhere inside of here we're going to want to put together some logic to compare the user id
of the stream that we are iterating over with this dot Propst on user ID.
And again if they are equal we want to show some buttons out on the screen.
So to get this list of buttons to appear I'm going to make a little helper method so that we don't have
to put a ton of checking logic for our user ID inside of this already kind of complicated mapping function.
So above render list I'm going to define a helper method called How about render admin.
Now the reason I'm calling this admin right here is because these two buttons right here are kind of
like administrative buttons.
They are in Minister reading over the stream and they allow the user to edit and delete the stream.
If you don't want to call this render admin you could call it something like render delete an edit buttons
or something like that.
But personally I think that render admin makes a decent amount of sense.
So whenever this render admin function gets called we're going to pass in the stream that we are currently
iterating over we're going to eventually call render admin from the body of our map function.
Again I just made this a separate helper function just to extract the logic and make it a little bit
more clear as to what is going on inside of it.
So now inside of render admin I'm going to say if stream dot user ID is equal to this dot Propst dot
current user ID then for right now let's just return a div that says edit slash delete like so and then
I'm going to call render admen from down inside of render list.
So after the div with the class name of content I'm going to call this dot render admin and I'm going
to pass in the stream that I am currently iterating over.
So now we can save this.
We'll flip back over and do a quick test.
OK so that looks pretty good.
Notice how the first two streams right here even though I created them we never appended the current
user or saying the user id property onto those streams.
So these two streams right here are technically never going to be owned by anyone but I did associate
my user ID with a third one right here.
And so I successfully do see edit and delete appear underneath the stream text for that one.
All right so this looks pretty good.
Let's add on a little bit of styling now just to make sure that this thing looks a little better than
it currently does.
So I'm going to flip back over to my component.
I'm going to delete the div inside of here and I'm going to put in a multi-line GSX lock instead.
So I'm going to place a div with the class name of right floated content and then inside of there we're
going to eventually turn those edit and delete buttons into links that are going to take the user to
some other page.
Remember that was the entire idea here if you clicked on delete or edit it would take you to either
the edit stream form or the delete stream page.
But for right now we'll just place in some buttons just to have something there and once we actually
put those pages together then we can actually hook up some links or functionality to these buttons some
place a button with the class name of UI button primary
closing button tag.
And I'll give this first button about it and I'll do a class name UI button.
Negative negative is going to make the I did it again negative is going to make the button appear red.
So that's going to be the delete button.
And we probably want that wants to be read just so the user understands hey this is kind of like a dangerous
action that's going to delete some resource.
All right.
Now the other thing that we're going to do here this seem a little bit weird but basically to get semantic
UI to style everything correctly we actually have to move this div right here with the two buttons to
the very start of the div with the class name of item.
In other words we have to call the method not down here at the bottom.
We have to call it before the eye tag right there.
In order for semantic UI to style everything appropriately.
So now I'll say this again it looks like I got my code here a little bit reformatted but it's still
the same it was before.
And then if I flip back over to my application.
Yeah there we go.
So I nicely see edit and delete on the right hand side of the string that I created.
So again if we click on these buttons right now nothing happens.
So we're going to eventually have to wire some functionality to them.
Now the other thing I want to check your really quickly is see what happens when we sign out of the
application if we sign out.
Then my current user ID is not going to be equal to this stream's user ID and so I should not see the
buttons anymore.
Once I sign out of the application so I click on the sign out and as a matter of fact those two buttons
go away.
And now if I sign in as the same user again the buttons come back because I'm now logged in.
And again my user ID is equal to the user ID inside of that third stream.
All right so this looks pretty great.
Now there's one less thing we need to take care of we need to make sure that at the bottom of this page
whenever user is logged in we show the button to allow a user to create a stream.
So let's take care of that really quickly in the next video.