In this video we're going to do one last quick thing to our streamlets component we need to make sure
that if the user is logged in we show a button at the very bottom that says something like create Stream.
And so if a user clicks on this right here they should be taken to a page where they can create a new
stream.
We don't really have a lot of navigation between our different screens right now so this would be pretty
good to put together just to make sure that we have the ability to easily tie together the different
screens of our application.
All right.
So I to flip back over to my component.
And how about right above the render method.
I'm going to define another helper method.
And I'm going to call this thing something like.
How about render create.
So the idea here is that this is going to render a create button of sorts.
Now remember we only want to show this if the user is signed in.
We already have some information about the current seinen status of the user inside the prop's object
of our component in the form of current user ID right here whenever the user is not signed in.
Current User ID is set to No.
And that indicates that the user is not signed into our application now even though we've kind of got
some information about the users current authentication status inside of our application.
I still don't personally really like using current user ID to infer whether or not the user is truly
signed in.
The reason for this is that we actually have a property inside of our state object already that is meant
to be used anytime that we want to check to see if a user is signed in or not signed in.
And that is the is signed in property right here.
So again we can use user ID to kind of infer whether or not the user is signed in.
But the real purpose of putting is signed in inside of here is to be used to decide whether or not the
user is signed in Zangana use is signed in to decide whether or not I want to show this create stream
button.
Now in order to get that is signed in property into my component we of course have to add it to our
map state to prop's function.
So going to add in a new property here called is signed in and thats going to come from state DOT off
dot is signed in.
All right.
So now inside of render create I will say if this Propst is signed in so if the user is signed in I
want to show that button and once more we don't really want to show a button per say we want to show
a link.
Remember any time we do navigation between pages we make use of re-act router dorm's link component
and we've already seen usage of that inside of our Hetter up here a little bit for the all streams and
streaming on the left hand side as well.
So inside of here I want to make use of the link tag from re-act Rotterdam.
So I need to make sure that I import link from the re-act writer Dom library at the top so at the top
my file I'm going to import link from re-act router Dom
and now back down inside of render create I can return a multi-line GSX block.
I'm going to put a div on here.
You'll see why in just a second and then inside of it I'm going to place a link and the link is going
to have the text create Stream.
Now in order for a link to show it properly we have to give it a path or a to property to navigate to
any time that the user clicks on it.
So remember in order for a user to see the form that will allow them to create a new stream they have
to navigate to streams slash new so whenever they go there they'll see the appropriate form on the screen.
Any second now.
All right.
There we go.
So I want to make sure that I pass in a property here of slash streams slash new.
And then I'll give it a class name of UIA button primary to make it appear as though it were a button.
Now the other thing really quickly here remember our mockup showed that button on the far right hand
side.
So in order to get this button to appear on the right hand side really easily.
I was going to manually add on a style property to that div.
That's why we put it inside of here and I'll give it a text a line of.
Right.
And that's just going to make the button right here shift on over to the right hand side of the screen.
All right.
Now the last thing we need to do is make sure that we call render create from inside of our render method.
So after my div that renders out the list I will call this dot render create.
Now we can save this flip back over and go back to our list and there it is right there.
So I now see a nice button that says Create stream I can click on that and then create my stream.
All right.
So we're making some good progress here.
Let's take a quick pause.
When I come back the next video we'll continue working on this application.