1
00:00:00,810 --> 00:00:06,090
Now that we have our streams associated with the user who created them we're going to update our stream

2
00:00:06,150 --> 00:00:10,350
lists component and make sure that these streams that were created by me have buttons on the right hand

3
00:00:10,350 --> 00:00:11,040
side.

4
00:00:11,310 --> 00:00:15,720
So going to flip on over to my stream list component the first thing we have to do inside of your is

5
00:00:15,720 --> 00:00:21,200
make sure that this component understands the idea of the user who is currently signed into our application.

6
00:00:21,320 --> 00:00:24,510
We've already stored that information inside of our redux store.

7
00:00:24,540 --> 00:00:28,430
Remember we've got the off piece of state whenever a user is signed in.

8
00:00:28,530 --> 00:00:32,700
We have the user id property that has the idea the user right there.

9
00:00:32,700 --> 00:00:37,380
So essentially whenever we iterate through our list of streams and render them out on the screen we

10
00:00:37,380 --> 00:00:41,700
just want to compare the current user's ID with a user id associate at the stream.

11
00:00:41,700 --> 00:00:47,230
And if they are equal then we want to show those buttons on the right hand side of each stream.

12
00:00:47,250 --> 00:00:54,170
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.

13
00:00:54,180 --> 00:00:59,640
So right now our user ID is stored inside of our redux store to get the information into our component

14
00:00:59,700 --> 00:01:02,580
we need to use the map stage props function.

15
00:01:02,580 --> 00:01:08,160
So I'm going to expand that object and I'll add in a user id property and the value for this is going

16
00:01:08,160 --> 00:01:11,950
to come from state DOT DOT user ID.

17
00:01:12,000 --> 00:01:17,490
Now as a quick note it might be a little bit more descriptive to pass this into our component as a property

18
00:01:17,490 --> 00:01:19,540
called Current User ID.

19
00:01:19,560 --> 00:01:23,310
I think I'm going to go ahead with that because it makes it a little bit more obvious that this is the

20
00:01:23,310 --> 00:01:29,350
ID of the person who is currently signed in and using the application.

21
00:01:29,360 --> 00:01:33,010
OK so now we can go back up to our runner list method.

22
00:01:33,010 --> 00:01:37,940
So now somewhere inside of here we're going to want to put together some logic to compare the user id

23
00:01:37,970 --> 00:01:42,660
of the stream that we are iterating over with this dot Propst on user ID.

24
00:01:42,690 --> 00:01:45,820
And again if they are equal we want to show some buttons out on the screen.

25
00:01:46,370 --> 00:01:51,200
So to get this list of buttons to appear I'm going to make a little helper method so that we don't have

26
00:01:51,200 --> 00:01:58,670
to put a ton of checking logic for our user ID inside of this already kind of complicated mapping function.

27
00:01:58,670 --> 00:02:05,600
So above render list I'm going to define a helper method called How about render admin.

28
00:02:05,600 --> 00:02:09,770
Now the reason I'm calling this admin right here is because these two buttons right here are kind of

29
00:02:09,770 --> 00:02:11,670
like administrative buttons.

30
00:02:11,720 --> 00:02:17,010
They are in Minister reading over the stream and they allow the user to edit and delete the stream.

31
00:02:17,240 --> 00:02:22,940
If you don't want to call this render admin you could call it something like render delete an edit buttons

32
00:02:22,940 --> 00:02:24,130
or something like that.

33
00:02:24,320 --> 00:02:28,060
But personally I think that render admin makes a decent amount of sense.

34
00:02:28,670 --> 00:02:34,340
So whenever this render admin function gets called we're going to pass in the stream that we are currently

35
00:02:34,340 --> 00:02:39,860
iterating over we're going to eventually call render admin from the body of our map function.

36
00:02:39,860 --> 00:02:44,330
Again I just made this a separate helper function just to extract the logic and make it a little bit

37
00:02:44,330 --> 00:02:47,660
more clear as to what is going on inside of it.

38
00:02:47,660 --> 00:02:59,720
So now inside of render admin I'm going to say if stream dot user ID is equal to this dot Propst dot

39
00:02:59,780 --> 00:03:11,640
current user ID then for right now let's just return a div that says edit slash delete like so and then

40
00:03:11,670 --> 00:03:15,240
I'm going to call render admen from down inside of render list.

41
00:03:15,240 --> 00:03:22,710
So after the div with the class name of content I'm going to call this dot render admin and I'm going

42
00:03:22,710 --> 00:03:26,280
to pass in the stream that I am currently iterating over.

43
00:03:26,340 --> 00:03:27,720
So now we can save this.

44
00:03:27,900 --> 00:03:30,040
We'll flip back over and do a quick test.

45
00:03:31,370 --> 00:03:32,960
OK so that looks pretty good.

46
00:03:32,960 --> 00:03:37,910
Notice how the first two streams right here even though I created them we never appended the current

47
00:03:37,910 --> 00:03:41,570
user or saying the user id property onto those streams.

48
00:03:41,600 --> 00:03:46,850
So these two streams right here are technically never going to be owned by anyone but I did associate

49
00:03:46,850 --> 00:03:48,930
my user ID with a third one right here.

50
00:03:49,010 --> 00:03:55,220
And so I successfully do see edit and delete appear underneath the stream text for that one.

51
00:03:55,220 --> 00:03:56,570
All right so this looks pretty good.

52
00:03:56,810 --> 00:04:00,740
Let's add on a little bit of styling now just to make sure that this thing looks a little better than

53
00:04:00,740 --> 00:04:02,650
it currently does.

54
00:04:02,750 --> 00:04:05,450
So I'm going to flip back over to my component.

55
00:04:05,870 --> 00:04:14,530
I'm going to delete the div inside of here and I'm going to put in a multi-line GSX lock instead.

56
00:04:14,620 --> 00:04:23,890
So I'm going to place a div with the class name of right floated content and then inside of there we're

57
00:04:23,890 --> 00:04:28,750
going to eventually turn those edit and delete buttons into links that are going to take the user to

58
00:04:28,750 --> 00:04:29,980
some other page.

59
00:04:29,980 --> 00:04:35,350
Remember that was the entire idea here if you clicked on delete or edit it would take you to either

60
00:04:35,350 --> 00:04:39,420
the edit stream form or the delete stream page.

61
00:04:39,520 --> 00:04:44,020
But for right now we'll just place in some buttons just to have something there and once we actually

62
00:04:44,020 --> 00:04:50,820
put those pages together then we can actually hook up some links or functionality to these buttons some

63
00:04:50,940 --> 00:04:55,960
place a button with the class name of UI button primary

64
00:04:59,810 --> 00:05:01,640
closing button tag.

65
00:05:02,540 --> 00:05:10,230
And I'll give this first button about it and I'll do a class name UI button.

66
00:05:10,280 --> 00:05:17,350
Negative negative is going to make the I did it again negative is going to make the button appear red.

67
00:05:17,360 --> 00:05:19,490
So that's going to be the delete button.

68
00:05:19,490 --> 00:05:23,930
And we probably want that wants to be read just so the user understands hey this is kind of like a dangerous

69
00:05:23,930 --> 00:05:27,260
action that's going to delete some resource.

70
00:05:27,260 --> 00:05:27,560
All right.

71
00:05:27,560 --> 00:05:32,960
Now the other thing that we're going to do here this seem a little bit weird but basically to get semantic

72
00:05:32,960 --> 00:05:40,070
UI to style everything correctly we actually have to move this div right here with the two buttons to

73
00:05:40,070 --> 00:05:43,730
the very start of the div with the class name of item.

74
00:05:43,750 --> 00:05:46,810
In other words we have to call the method not down here at the bottom.

75
00:05:46,880 --> 00:05:50,360
We have to call it before the eye tag right there.

76
00:05:50,360 --> 00:05:54,150
In order for semantic UI to style everything appropriately.

77
00:05:54,480 --> 00:05:59,060
So now I'll say this again it looks like I got my code here a little bit reformatted but it's still

78
00:05:59,060 --> 00:06:00,880
the same it was before.

79
00:06:01,160 --> 00:06:03,080
And then if I flip back over to my application.

80
00:06:03,470 --> 00:06:04,630
Yeah there we go.

81
00:06:04,640 --> 00:06:08,500
So I nicely see edit and delete on the right hand side of the string that I created.

82
00:06:08,690 --> 00:06:11,360
So again if we click on these buttons right now nothing happens.

83
00:06:11,450 --> 00:06:14,260
So we're going to eventually have to wire some functionality to them.

84
00:06:14,630 --> 00:06:18,320
Now the other thing I want to check your really quickly is see what happens when we sign out of the

85
00:06:18,320 --> 00:06:20,790
application if we sign out.

86
00:06:21,080 --> 00:06:29,300
Then my current user ID is not going to be equal to this stream's user ID and so I should not see the

87
00:06:29,300 --> 00:06:30,150
buttons anymore.

88
00:06:30,170 --> 00:06:34,730
Once I sign out of the application so I click on the sign out and as a matter of fact those two buttons

89
00:06:34,820 --> 00:06:35,900
go away.

90
00:06:35,900 --> 00:06:42,570
And now if I sign in as the same user again the buttons come back because I'm now logged in.

91
00:06:42,740 --> 00:06:49,930
And again my user ID is equal to the user ID inside of that third stream.

92
00:06:49,940 --> 00:06:51,650
All right so this looks pretty great.

93
00:06:51,650 --> 00:06:58,010
Now there's one less thing we need to take care of we need to make sure that at the bottom of this page

94
00:06:58,070 --> 00:07:02,680
whenever user is logged in we show the button to allow a user to create a stream.

95
00:07:02,690 --> 00:07:05,210
So let's take care of that really quickly in the next video.