1
00:00:00,720 --> 00:00:05,940
In this video we're going to start updating your application to make use of your L based selection to

2
00:00:05,940 --> 00:00:08,330
do so there's two separate things we need to do.

3
00:00:08,340 --> 00:00:13,290
First off we need to make sure that any time that a user clicks on this edit button next to a stream

4
00:00:13,560 --> 00:00:19,500
they go to a route of something like streams flash edit and then the idea of the stream that the user

5
00:00:19,500 --> 00:00:21,550
just clicked on the button for.

6
00:00:21,660 --> 00:00:26,610
After that we need to make sure that we also update our routing information inside of our apt Yes file

7
00:00:26,940 --> 00:00:32,820
to make sure that anytime that a user goes to a URL like streams edits slash ID it shows the stream

8
00:00:32,850 --> 00:00:33,860
edit component.

9
00:00:34,080 --> 00:00:39,520
At present we have wired up our routing rules to say that any time a user goes to stream slash at it

10
00:00:39,720 --> 00:00:41,400
they see the stream edit component.

11
00:00:41,490 --> 00:00:44,610
So word is going to do a little tweak around our routing rules.

12
00:00:44,790 --> 00:00:48,400
So let's first start off by updating our button right here.

13
00:00:48,420 --> 00:00:50,120
The edit stream button.

14
00:00:50,370 --> 00:00:55,190
So I'm going to open up my streams stream list component.

15
00:00:55,230 --> 00:01:01,310
Here it is right here and then going to scroll down a little bit and find render list.

16
00:01:01,310 --> 00:01:06,350
Now you'll recall that inside of Brender list we are calling render admen with each individual stream

17
00:01:06,470 --> 00:01:09,480
and it's up to render admin to return the appropriate buttons.

18
00:01:09,710 --> 00:01:12,230
Let's find the render admen method.

19
00:01:12,230 --> 00:01:14,320
Here it is right here.

20
00:01:14,510 --> 00:01:19,890
So at present we have two button components or two button elements being rendered inside of your.

21
00:01:20,060 --> 00:01:25,250
We no longer want to have button elements we want to have an actual link tag from re-act router dom

22
00:01:25,550 --> 00:01:29,720
so that we can navigate a user to some different page inside of application.

23
00:01:30,140 --> 00:01:33,920
So I'm going to collapse my sidebar here.

24
00:01:33,920 --> 00:01:39,320
Notice how we've already imported the link component from reactor at her dumb language to delete the

25
00:01:39,410 --> 00:01:41,230
edit button right here entirely.

26
00:01:41,390 --> 00:01:45,330
And I'm going to replace it with a link instead.

27
00:01:45,800 --> 00:01:50,080
I'm going to again give it the same text it had before of edit.

28
00:01:50,120 --> 00:01:57,770
I'm going to give it a class name of UI button primary and then I'm going to make sure that also gets

29
00:01:57,770 --> 00:01:59,720
the two property.

30
00:01:59,870 --> 00:02:03,580
Now in this case the two is not going to be some fixed value.

31
00:02:03,710 --> 00:02:10,190
Instead we need to essentially take the idea of the stream and insert it into the two string that we

32
00:02:10,190 --> 00:02:10,960
generate.

33
00:02:10,970 --> 00:02:14,230
So we want to end up with a two prop of streams at it.

34
00:02:14,420 --> 00:02:20,420
And then the idea of the stream that we passed into our render admin function.

35
00:02:20,420 --> 00:02:25,700
So essentially we want to do a little calculation here as opposed to passing in a fixed string.

36
00:02:25,790 --> 00:02:29,450
We're going to use a 2015 template string to do so.

37
00:02:29,450 --> 00:02:36,770
We have to use our curly braces like so then put in my back to X and then I will say slash streams at

38
00:02:36,770 --> 00:02:42,460
it and then I want to put in the ID of the stream that we are iterating over soldier dollar sign clearly

39
00:02:42,470 --> 00:02:50,130
brace stream Id like so now again make sure that you have back Tick's here not single quotes and once

40
00:02:50,130 --> 00:02:53,090
we've got this all put together I'm going to save this file when I do.

41
00:02:53,100 --> 00:02:56,430
You're going to see the code jump here really quickly just to reformat it like the

42
00:02:59,390 --> 00:02:59,800
now issue.

43
00:02:59,900 --> 00:03:05,120
If we flip back over to our application and we hover over that edit button you'll notice the L that

44
00:03:05,120 --> 00:03:09,810
pops up on the bottom left inside says stream's slash at it slash 3.

45
00:03:09,830 --> 00:03:15,830
So if I click on that I want to go to the stream edit component or that page and the information here

46
00:03:15,830 --> 00:03:20,480
is trying to convey or the L is trying to convey that we want to edit the stream with an idea of three.

47
00:03:20,870 --> 00:03:25,470
So now the next thing we need to do is make sure that we update our routing rules inside of my apt.

48
00:03:25,490 --> 00:03:33,260
J.S. file we need to find the route that is defining our stream edit component we need to make sure

49
00:03:33,260 --> 00:03:39,230
that this thing understands that if a user ever goes to streams at it and then some ID we still want

50
00:03:39,230 --> 00:03:40,970
to show stream at it.

51
00:03:40,970 --> 00:03:46,490
So to do so we're going to put on another forward slash at the very end and we'll say Colin Id just

52
00:03:46,490 --> 00:03:48,350
like we saw it in the diagram.

53
00:03:48,350 --> 00:03:55,570
So now if a user goes to streams edit slash anything we're going to show the stream edit component.

54
00:03:55,700 --> 00:03:58,370
Let's save this file and we'll test that out.

55
00:03:58,370 --> 00:04:00,400
So I'm going to save the uptalk just file.

56
00:04:00,440 --> 00:04:01,470
Flip back over.

57
00:04:01,730 --> 00:04:07,070
I'll do a quick refresh just to make sure I got that update and then I'll click on my edit button right

58
00:04:07,070 --> 00:04:10,850
here and when I do so I will see stream edit appear on the screen.

59
00:04:11,060 --> 00:04:11,740
Perfect.

60
00:04:11,930 --> 00:04:17,420
So now we can show stream edits regardless of the ID that we have inside of you or else I can try going

61
00:04:17,420 --> 00:04:23,210
to edit one and all still see the same component on the screen.

62
00:04:23,280 --> 00:04:24,490
I could go to Edit too.

63
00:04:24,510 --> 00:04:25,880
I still see the same thing.

64
00:04:25,910 --> 00:04:31,350
I can even go to edit some really long number like so and I'll still see that component on the screen.

65
00:04:31,350 --> 00:04:38,040
So I remember as soon as he put in Colin and then anything inside the OR l That means that this is going

66
00:04:38,040 --> 00:04:42,670
to be essentially a variable and he could have any value that you want for that part of the URL.

67
00:04:42,670 --> 00:04:47,540
Now one quick thing I want to mention here we did not have to say specifically ID here.

68
00:04:47,550 --> 00:04:51,030
This could have been Kolin anything that you want.

69
00:04:51,030 --> 00:04:54,050
It's essentially the colon that is the magical character here.

70
00:04:54,060 --> 00:04:57,470
The colon is what turns us into a variable of sorts.

71
00:04:58,270 --> 00:04:58,570
OK.

72
00:04:58,590 --> 00:04:59,790
So I'm going to save that.

73
00:04:59,820 --> 00:05:04,800
Now the next thing we need to do is to make sure that any time that a user comes to this page we somehow

74
00:05:04,920 --> 00:05:10,280
get that number out of the Eurail like the three and we communicate that number down into stream at

75
00:05:10,280 --> 00:05:15,300
it so that the stream at a component knows exactly what STREAM it is trying to change.

76
00:05:15,300 --> 00:05:18,840
So let's take a quick pause right here and we'll figure out how to do that in the next video.