1
00:00:01,060 --> 00:00:04,600
In this video we're going to start talking about the edits stream page.

2
00:00:04,750 --> 00:00:06,840
So I bet you can guess what this page is going to do.

3
00:00:06,880 --> 00:00:11,470
And any time a user comes to the stream page we're going to allow them the opportunity to edit the title

4
00:00:11,500 --> 00:00:15,000
or the description of a already created Stream.

5
00:00:15,010 --> 00:00:20,140
Now in this video in particular we're going to talk about how a user can get to this page and how we're

6
00:00:20,140 --> 00:00:23,190
going to figure out what stream a user is trying to edit.

7
00:00:23,200 --> 00:00:25,130
Now when I say that it doesn't make a lot of sense.

8
00:00:25,150 --> 00:00:27,660
So let me lay out a little scenario here for you.

9
00:00:28,030 --> 00:00:33,160
If you recall when we show the index page we're going to show that delete an edit button next to any

10
00:00:33,160 --> 00:00:35,290
stream that a user has created.

11
00:00:35,310 --> 00:00:40,390
And so at some point in time a user is going to click on this edit button right here when the user clicks

12
00:00:40,390 --> 00:00:41,090
on edit.

13
00:00:41,110 --> 00:00:45,030
They're going to be navigated over to the edit stream page.

14
00:00:45,160 --> 00:00:50,830
And so when we come over to this page we need to know what stream a user is attempting to edit.

15
00:00:50,860 --> 00:00:56,530
In other words we need to kind of communicate which edit button the user clicked on over here to this

16
00:00:56,530 --> 00:00:57,490
component.

17
00:00:57,490 --> 00:01:01,420
This component needs to know what string the user is trying to edit.

18
00:01:01,480 --> 00:01:05,370
Now in order to do this there's two different approaches we can use.

19
00:01:05,440 --> 00:01:10,660
One approach we've seen earlier on inside discourse and another approach we're going to be able to use

20
00:01:10,720 --> 00:01:14,190
only because we are now making use of re-act router Dom.

21
00:01:14,410 --> 00:01:18,340
So let's talk about these two different approaches that we can use to communicate the stream that the

22
00:01:18,340 --> 00:01:24,110
user is trying to edit from clicking on this button over to the edit stream component.

23
00:01:24,850 --> 00:01:25,200
OK.

24
00:01:25,300 --> 00:01:30,580
So option number one would be to use something like a selection reducer and we've already made use of

25
00:01:30,580 --> 00:01:32,460
a selection reducer before we used it.

26
00:01:32,470 --> 00:01:37,900
Inside the first redux app we put together inside this course if you recall we are that song's application

27
00:01:38,140 --> 00:01:43,930
where a user could click on a song and then we had a selection reducer that recorded which song These

28
00:01:43,930 --> 00:01:44,980
are had clicked on.

29
00:01:45,310 --> 00:01:49,700
So as soon as user clicked on a song we updated the data being returned from that reducer.

30
00:01:50,020 --> 00:01:55,390
And that was then shown on the screen to the user so we can make use of a selection we do at this time

31
00:01:55,420 --> 00:01:56,460
around as well.

32
00:01:56,620 --> 00:02:01,120
We could say that as soon as a user clicks on this edit button we would dispatch an action that says

33
00:02:01,120 --> 00:02:05,910
that a user is trying to select or trying to edit this stream right here.

34
00:02:06,160 --> 00:02:10,300
And then we can make sure that we communicated that information to the edit stream page.

35
00:02:10,300 --> 00:02:13,770
So again that is one approach we could use.

36
00:02:13,840 --> 00:02:18,400
Now the second approach we can use is only going to be available because we are now making use of re-act

37
00:02:18,430 --> 00:02:19,740
router Dom.

38
00:02:19,750 --> 00:02:23,090
So the second approach would be called you l based selection.

39
00:02:23,380 --> 00:02:28,480
With this approach were going to essentially make sure that whenever a user clicks on this link right

40
00:02:28,480 --> 00:02:34,390
here as opposed to just throwing them over to some path like streams slash at it they will instead go

41
00:02:34,390 --> 00:02:40,390
to some address or some path that has the ID of the stream that they are trying to edit inside of the

42
00:02:40,390 --> 00:02:42,120
address bar.

43
00:02:43,150 --> 00:02:47,620
So in other words with you are l base selection were going to put the idea of a stream that is being

44
00:02:47,650 --> 00:02:49,710
edited inside the you or l.

45
00:02:49,720 --> 00:02:53,500
Now that's a bit challenging to understand so let's take a look at a quick diagram to help you understand

46
00:02:53,500 --> 00:02:55,370
what I mean by that.

47
00:02:55,390 --> 00:03:00,630
All right so we looked at this diagram a while ago we looked at this when we were talking about navigation

48
00:03:00,630 --> 00:03:05,230
inside of application and we had said that we had a collection of different paths that would route our

49
00:03:05,230 --> 00:03:07,690
user to a bunch of different components.

50
00:03:07,780 --> 00:03:13,240
So I told you that we would use streams flash at it for stream edit stream flashily stream delete and

51
00:03:13,240 --> 00:03:15,650
streams slash show for streams show.

52
00:03:15,790 --> 00:03:20,980
But if we want to use Eurail based selection then we're going to change these paths right here just

53
00:03:21,040 --> 00:03:22,000
a little bit.

54
00:03:22,030 --> 00:03:26,320
Let me show you how these would change if we want to use your L based selection.

55
00:03:26,500 --> 00:03:30,850
And as a quick reminder here the entire idea is that we're trying to communicate what streamlet user

56
00:03:30,850 --> 00:03:34,570
is trying to edit down into this component.

57
00:03:34,570 --> 00:03:38,670
All right so here's how we would change things if we wanted to use you or L base selection.

58
00:03:38,680 --> 00:03:42,390
So notice how we now have streams slash at it slash ID.

59
00:03:42,400 --> 00:03:46,120
We have streams to ID and streams ID as well.

60
00:03:46,120 --> 00:03:51,400
So the common theme between stream added streams show and stream delete is that each of them are operating

61
00:03:51,430 --> 00:03:57,480
on a very single stream with stream as it were trying to edit a very specific stream with stream delete.

62
00:03:57,490 --> 00:04:02,590
We're going to try to delete a very specific stream and with streams show we're trying to show the user

63
00:04:02,620 --> 00:04:05,020
a very specific stream as well.

64
00:04:05,020 --> 00:04:11,710
So because these are all working with very specific records we could use you are l based selection with

65
00:04:11,710 --> 00:04:13,010
each one.

66
00:04:13,040 --> 00:04:15,850
So you'll notice that they all have their pads changed just a little bit.

67
00:04:15,970 --> 00:04:20,210
Each one of them has a final slash and then a colon ID.

68
00:04:20,500 --> 00:04:26,590
Now Culin idea right here specifically with the colon means that ID or that part of the your L is essentially

69
00:04:26,590 --> 00:04:27,600
a variable.

70
00:04:27,640 --> 00:04:33,230
So rather than having like colon ID we are essentially saying that if a user goes to stream's at it

71
00:04:33,280 --> 00:04:37,970
slash anything a user will be going to stream at it.

72
00:04:38,110 --> 00:04:42,900
So we could have a URL like streams edit slash 50.

73
00:04:43,150 --> 00:04:47,670
And that would indicate that the user is trying to edit the stream with the idea of 50.

74
00:04:47,920 --> 00:04:53,950
If a user went to streams at a 5 that would mean that we should show the stream edit component and that

75
00:04:53,950 --> 00:04:58,500
the user is trying to edit the ID or the record with the idea of 85.

76
00:04:58,660 --> 00:05:01,420
Its the same thing with the other Patsi here as well.

77
00:05:01,590 --> 00:05:07,980
If a user goes to stream's slash 92 it means that we should show streams show and the user is trying

78
00:05:07,980 --> 00:05:10,940
to view the record with an ID of 92.

79
00:05:11,280 --> 00:05:17,010
So again any time that you see colon and then some label inside the path that essentially means it has

80
00:05:17,010 --> 00:05:22,970
a variable so because we can put the idea of the record that the user is trying to edit inside the OR

81
00:05:22,990 --> 00:05:29,220
L we can make use of re-act router Dohm to look at the URL and pull off just that portion of the rail

82
00:05:29,250 --> 00:05:31,350
like just that little variable right there.

83
00:05:31,350 --> 00:05:37,800
And so again if it's something like say 17 then we can take that 17 and pass it as a prop into the stream

84
00:05:37,860 --> 00:05:38,800
edit component.

85
00:05:39,000 --> 00:05:45,510
And so then the stream at a component will know that it needs to show the stream 17 and allow a user

86
00:05:45,510 --> 00:05:49,300
to edit specifically the stream with ID 17.

87
00:05:49,470 --> 00:05:49,790
All right.

88
00:05:49,800 --> 00:05:51,810
So that's pretty much the idea.

89
00:05:51,810 --> 00:05:54,120
Again we had two options here.

90
00:05:54,120 --> 00:05:58,950
We could either use a selection reducer or Eurail based selection wherever possible.

91
00:05:58,950 --> 00:06:04,020
We prefer to use your cell based selection because there are a couple of other benefits around it that

92
00:06:04,050 --> 00:06:07,030
are only going to make sense once we start putting the solution together.

93
00:06:07,170 --> 00:06:10,370
So we are going to come back to this topic once we start working on it a little bit more.

94
00:06:10,470 --> 00:06:15,480
And I'm going to point out some other big benefits around using your L based selection.

95
00:06:15,480 --> 00:06:17,880
All right so enough of the high level concepts here.

96
00:06:17,880 --> 00:06:19,090
Let's take a quick pause right here.

97
00:06:19,110 --> 00:06:23,460
When we come back the next section we're going to start updating our routing configuration to make use

98
00:06:23,460 --> 00:06:27,750
of these kind of variables inside of our you are l and we'll figure out how we can access that piece

99
00:06:27,750 --> 00:06:30,600
of information inside of our stream edit component.

100
00:06:30,720 --> 00:06:32,730
So quick pause and I'll see you in just a moment.