1
00:00:00,960 --> 00:00:05,360
In this video we're going to do one last quick thing to our streamlets component we need to make sure

2
00:00:05,360 --> 00:00:11,070
that if the user is logged in we show a button at the very bottom that says something like create Stream.

3
00:00:11,150 --> 00:00:15,710
And so if a user clicks on this right here they should be taken to a page where they can create a new

4
00:00:15,710 --> 00:00:16,590
stream.

5
00:00:16,640 --> 00:00:21,050
We don't really have a lot of navigation between our different screens right now so this would be pretty

6
00:00:21,050 --> 00:00:25,880
good to put together just to make sure that we have the ability to easily tie together the different

7
00:00:25,880 --> 00:00:28,220
screens of our application.

8
00:00:28,220 --> 00:00:28,500
All right.

9
00:00:28,510 --> 00:00:30,430
So I to flip back over to my component.

10
00:00:30,650 --> 00:00:33,320
And how about right above the render method.

11
00:00:33,320 --> 00:00:35,190
I'm going to define another helper method.

12
00:00:35,390 --> 00:00:37,380
And I'm going to call this thing something like.

13
00:00:37,400 --> 00:00:39,900
How about render create.

14
00:00:39,920 --> 00:00:44,330
So the idea here is that this is going to render a create button of sorts.

15
00:00:44,330 --> 00:00:47,510
Now remember we only want to show this if the user is signed in.

16
00:00:47,810 --> 00:00:53,120
We already have some information about the current seinen status of the user inside the prop's object

17
00:00:53,180 --> 00:00:59,330
of our component in the form of current user ID right here whenever the user is not signed in.

18
00:00:59,420 --> 00:01:01,790
Current User ID is set to No.

19
00:01:01,970 --> 00:01:06,440
And that indicates that the user is not signed into our application now even though we've kind of got

20
00:01:06,440 --> 00:01:10,570
some information about the users current authentication status inside of our application.

21
00:01:10,580 --> 00:01:16,250
I still don't personally really like using current user ID to infer whether or not the user is truly

22
00:01:16,250 --> 00:01:17,360
signed in.

23
00:01:17,390 --> 00:01:22,640
The reason for this is that we actually have a property inside of our state object already that is meant

24
00:01:22,640 --> 00:01:26,930
to be used anytime that we want to check to see if a user is signed in or not signed in.

25
00:01:26,960 --> 00:01:30,040
And that is the is signed in property right here.

26
00:01:30,050 --> 00:01:34,880
So again we can use user ID to kind of infer whether or not the user is signed in.

27
00:01:34,940 --> 00:01:40,100
But the real purpose of putting is signed in inside of here is to be used to decide whether or not the

28
00:01:40,100 --> 00:01:46,340
user is signed in Zangana use is signed in to decide whether or not I want to show this create stream

29
00:01:46,340 --> 00:01:48,200
button.

30
00:01:48,360 --> 00:01:53,250
Now in order to get that is signed in property into my component we of course have to add it to our

31
00:01:53,310 --> 00:01:55,320
map state to prop's function.

32
00:01:55,320 --> 00:02:02,010
So going to add in a new property here called is signed in and thats going to come from state DOT off

33
00:02:02,310 --> 00:02:08,000
dot is signed in.

34
00:02:08,080 --> 00:02:08,490
All right.

35
00:02:08,500 --> 00:02:17,200
So now inside of render create I will say if this Propst is signed in so if the user is signed in I

36
00:02:17,200 --> 00:02:22,510
want to show that button and once more we don't really want to show a button per say we want to show

37
00:02:22,540 --> 00:02:23,610
a link.

38
00:02:23,620 --> 00:02:30,160
Remember any time we do navigation between pages we make use of re-act router dorm's link component

39
00:02:30,420 --> 00:02:37,450
and we've already seen usage of that inside of our Hetter up here a little bit for the all streams and

40
00:02:37,450 --> 00:02:39,730
streaming on the left hand side as well.

41
00:02:39,730 --> 00:02:44,320
So inside of here I want to make use of the link tag from re-act Rotterdam.

42
00:02:44,380 --> 00:02:50,190
So I need to make sure that I import link from the re-act writer Dom library at the top so at the top

43
00:02:50,210 --> 00:02:56,290
my file I'm going to import link from re-act router Dom

44
00:02:59,700 --> 00:03:06,490
and now back down inside of render create I can return a multi-line GSX block.

45
00:03:06,880 --> 00:03:08,560
I'm going to put a div on here.

46
00:03:08,560 --> 00:03:16,220
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

47
00:03:16,220 --> 00:03:19,490
to have the text create Stream.

48
00:03:19,580 --> 00:03:24,560
Now in order for a link to show it properly we have to give it a path or a to property to navigate to

49
00:03:24,590 --> 00:03:26,390
any time that the user clicks on it.

50
00:03:26,600 --> 00:03:31,430
So remember in order for a user to see the form that will allow them to create a new stream they have

51
00:03:31,430 --> 00:03:38,690
to navigate to streams slash new so whenever they go there they'll see the appropriate form on the screen.

52
00:03:38,970 --> 00:03:41,090
Any second now.

53
00:03:41,110 --> 00:03:41,350
All right.

54
00:03:41,350 --> 00:03:42,200
There we go.

55
00:03:42,610 --> 00:03:48,500
So I want to make sure that I pass in a property here of slash streams slash new.

56
00:03:49,120 --> 00:03:55,690
And then I'll give it a class name of UIA button primary to make it appear as though it were a button.

57
00:03:55,690 --> 00:04:01,000
Now the other thing really quickly here remember our mockup showed that button on the far right hand

58
00:04:01,000 --> 00:04:01,710
side.

59
00:04:01,720 --> 00:04:05,060
So in order to get this button to appear on the right hand side really easily.

60
00:04:05,100 --> 00:04:08,380
I was going to manually add on a style property to that div.

61
00:04:08,470 --> 00:04:12,510
That's why we put it inside of here and I'll give it a text a line of.

62
00:04:12,600 --> 00:04:13,380
Right.

63
00:04:13,590 --> 00:04:19,730
And that's just going to make the button right here shift on over to the right hand side of the screen.

64
00:04:19,770 --> 00:04:20,050
All right.

65
00:04:20,050 --> 00:04:24,850
Now the last thing we need to do is make sure that we call render create from inside of our render method.

66
00:04:25,230 --> 00:04:34,690
So after my div that renders out the list I will call this dot render create.

67
00:04:34,710 --> 00:04:41,150
Now we can save this flip back over and go back to our list and there it is right there.

68
00:04:41,150 --> 00:04:46,230
So I now see a nice button that says Create stream I can click on that and then create my stream.

69
00:04:46,280 --> 00:04:46,540
All right.

70
00:04:46,540 --> 00:04:48,100
So we're making some good progress here.

71
00:04:48,260 --> 00:04:49,580
Let's take a quick pause.

72
00:04:49,580 --> 00:04:52,910
When I come back the next video we'll continue working on this application.