1
00:00:00,950 --> 00:00:06,170
Now that we have fetched our appropriate stream anytime that we come to our streams delete slash ID

2
00:00:06,410 --> 00:00:11,630
route we can show some details about that stream on the motile so that the user knows exactly what stream

3
00:00:11,630 --> 00:00:16,730
they are actually deleting as usual to get some information from our redux store into our component.

4
00:00:16,730 --> 00:00:19,170
We're going to define a map state to prop's function.

5
00:00:19,400 --> 00:00:22,050
So I will flip back over to it stream delete.

6
00:00:22,220 --> 00:00:32,500
I'm going to go down to the bottom and I will define map state to prop's right now what should we call

7
00:00:32,650 --> 00:00:37,870
essentially doing the same exact thing that we went through back on the stream edit components.

8
00:00:37,870 --> 00:00:42,640
So when we call map stage props right here or when this function gets called by re-act redux it's going

9
00:00:42,640 --> 00:00:48,970
to be called with both the state out of our redux store and the second argument of own props and remember

10
00:00:48,970 --> 00:00:54,790
own props right here is the exact same props object that is going to be passed to our component.

11
00:00:54,790 --> 00:01:00,280
The reason we want props is so that we can look at that match prop right there and pull out the idea

12
00:01:00,280 --> 00:01:03,440
of the stream that we're supposed to be showing on this page.

13
00:01:05,590 --> 00:01:11,210
So inside of Matt state the props are going to return an object with the key of stream.

14
00:01:11,230 --> 00:01:13,570
We're going to look at state DOT streams.

15
00:01:13,570 --> 00:01:17,660
Remember state that streams is an object with all of the different streams that we've loaded up.

16
00:01:17,770 --> 00:01:22,510
And if you need a quick reminder that you can always flip back over to your redux step tools click on

17
00:01:22,510 --> 00:01:25,560
that state button right there and then expand streams.

18
00:01:25,570 --> 00:01:30,550
So remember we've got an object right here where the keys are the IDs of each stream.

19
00:01:30,580 --> 00:01:37,900
So now I will reference state data streams and I want to get States streams which specifically the key

20
00:01:37,900 --> 00:01:44,350
of three and we can get that key of three by looking at own props and pulling out the match forams id

21
00:01:44,350 --> 00:01:54,300
property out there from the Ural essentially I'll say square brackets own props match Priam's Id like

22
00:01:54,350 --> 00:01:58,020
the.

23
00:01:58,070 --> 00:01:58,450
All right.

24
00:01:58,450 --> 00:02:02,500
Now I'm not going to forget the next step even though I forgot it like three or four times in this course

25
00:02:02,500 --> 00:02:03,130
so far.

26
00:02:03,220 --> 00:02:05,920
We're going to make sure that we pass maps straight to prop's into connect.

27
00:02:05,920 --> 00:02:07,050
As the first argument.

28
00:02:07,060 --> 00:02:11,670
So map state to prop's like so.

29
00:02:11,680 --> 00:02:17,290
All right so now we can make sure that we attempt to show this stream or some details about the stream

30
00:02:17,320 --> 00:02:18,810
inside of our motile.

31
00:02:18,960 --> 00:02:23,470
Now a quick reminder when this component first gets rendered to the screen it's entirely possible that

32
00:02:23,470 --> 00:02:26,200
we will not have our stream loaded up just yet.

33
00:02:26,440 --> 00:02:31,730
Because remember the component is going to be rendered to the screen one time then our component in

34
00:02:31,760 --> 00:02:33,930
MT lifecycle method will be called.

35
00:02:33,940 --> 00:02:39,100
So the first time this thing gets rendered It's entirely possible that we will not have our stream yet.

36
00:02:39,310 --> 00:02:42,150
So to handle that there's a couple of different things we can do.

37
00:02:42,280 --> 00:02:46,540
We can either take a similar approach to what we've done in the past where we can do something like

38
00:02:46,600 --> 00:02:54,600
if there is no destock props thought stream then return a div with a text loading.

39
00:02:55,140 --> 00:02:57,230
But this is just a little bit awkward.

40
00:02:57,240 --> 00:03:02,160
The reason for that is that now anytime the user first loads up our application they're going to see

41
00:03:02,160 --> 00:03:07,440
like that div with loading up here and then the modem is going to appear it would be maybe just a little

42
00:03:07,440 --> 00:03:12,690
bit better if we showed the motile right away and maybe we just don't have the text for the stream that

43
00:03:12,690 --> 00:03:13,980
is supposed to be displayed.

44
00:03:14,250 --> 00:03:19,260
So the user will see a modal right away and then like a half second later the title of the stream will

45
00:03:19,260 --> 00:03:20,630
appear inside the content.

46
00:03:20,640 --> 00:03:25,020
I think that would be a little bit less jarring to the user rather than showing them like some loading

47
00:03:25,020 --> 00:03:30,010
text up here and then popping up the modal but realistically we could do it absolutely either way.

48
00:03:30,510 --> 00:03:35,070
So in order to always show the modal and then just make sure that we update the content field with the

49
00:03:35,130 --> 00:03:41,650
title of the stream I'm going to delete that if statements and I'm going to define another helper method

50
00:03:41,650 --> 00:03:48,040
inside of your called render content so as you might guess render content is going to produce whatever

51
00:03:48,040 --> 00:03:52,210
text it's a post be passed up to the content Propp of modal.

52
00:03:52,230 --> 00:03:58,970
So now inside if you're all say if we do not yet have a stream loaded up then return.

53
00:03:59,020 --> 00:04:02,230
Are you sure you want to get single quotes in here.

54
00:04:02,230 --> 00:04:03,510
Not double.

55
00:04:03,550 --> 00:04:07,590
Are you sure you want to delete this stream.

56
00:04:07,840 --> 00:04:11,530
And then if we have loaded that thing up we can return.

57
00:04:11,530 --> 00:04:18,070
Are you sure you want to delete the stream with title and then we can protect the title inside of your.

58
00:04:18,220 --> 00:04:18,760
To print that out.

59
00:04:18,760 --> 00:04:21,290
We should probably use a E.S. 20:15 template string.

60
00:04:21,430 --> 00:04:27,840
So going to replace those single quotes with back to X and then after that what we say.

61
00:04:27,840 --> 00:04:33,600
Are you sure you want to delete the stream title colon and then we'll do some interpellation here and

62
00:04:33,600 --> 00:04:36,710
we'll say this not prop's stream title.

63
00:04:37,140 --> 00:04:42,140
OK that's a really long line Salumi zoom out so you can see the entire thing.

64
00:04:42,180 --> 00:04:46,830
So again render content is going to say if we do not yet have a stream just print out this kind of like

65
00:04:46,830 --> 00:04:52,560
standon message and then once we actually fetch the stream put the title of the stream into the message

66
00:04:56,330 --> 00:04:57,260
and zoom back in.

67
00:04:57,380 --> 00:05:02,780
And now for content right here rather than just directly assigning a string we can instead place some

68
00:05:02,780 --> 00:05:09,970
curly braces and then make a call to this dot render content like so.

69
00:05:09,970 --> 00:05:13,660
Now last thing I want to point out here is that inside of a render method we currently have the text

70
00:05:13,660 --> 00:05:15,070
stream delete.

71
00:05:15,160 --> 00:05:19,540
And you'll notice that inside of our browser that text is showing up right over here in the background

72
00:05:19,810 --> 00:05:22,330
which is really probably not ideal.

73
00:05:22,330 --> 00:05:24,370
We just don't need to show that text at all.

74
00:05:24,430 --> 00:05:28,420
So I'm going to delete that text of stream delete from the render method.

75
00:05:28,420 --> 00:05:30,620
In addition we've got the wrapping div right here.

76
00:05:30,670 --> 00:05:34,690
We really don't even need the wrapping div at all as well there's no point to that div because nothing

77
00:05:34,690 --> 00:05:36,270
actually shows up inside of it.

78
00:05:36,280 --> 00:05:39,170
Remember our modal uses a re-act portal.

79
00:05:39,250 --> 00:05:43,900
So anything that gets rendered by the modal is going to go directly to the div that we had put into

80
00:05:43,900 --> 00:05:49,420
our indexed HTL file the one with the ID of modal that was the entire point of that portal.

81
00:05:49,630 --> 00:05:52,390
So there's really no point to having this device here at all.

82
00:05:52,500 --> 00:05:58,810
So I going to delete that wrapping as well and I'm left with just returning our modal component.

83
00:05:58,820 --> 00:05:59,090
All right.

84
00:05:59,090 --> 00:06:00,390
I think it's time for a test here.

85
00:06:00,440 --> 00:06:03,960
So going to save this and we'll flip back over it and we'll see how we're doing.

86
00:06:05,860 --> 00:06:06,200
OK.

87
00:06:06,230 --> 00:06:08,450
So back over here my reload kicked in right away.

88
00:06:08,570 --> 00:06:09,230
And I see.

89
00:06:09,230 --> 00:06:11,160
Are you sure you want to delete the stream a title.

90
00:06:11,180 --> 00:06:15,080
I created this stream and so now we could click delete or cancel.

91
00:06:15,080 --> 00:06:19,310
Of course clicking those don't do anything just yet but we'll wired that up in just a second just to

92
00:06:19,310 --> 00:06:20,890
make sure that this works correctly.

93
00:06:20,900 --> 00:06:25,440
I'm going to refresh the page and I still see the title appear right there.

94
00:06:25,460 --> 00:06:31,130
You can also notice that the text can have very suddenly changes like instantaneously because when we

95
00:06:31,130 --> 00:06:35,080
first render the modal to the screen we've got that initial content of.

96
00:06:35,090 --> 00:06:39,890
Are you sure you want to delete the stream and then only after we fetch the thing do we add in the title

97
00:06:39,890 --> 00:06:40,430
at the end.

98
00:06:40,460 --> 00:06:42,640
That's why you see that kind of little blink inside there.

99
00:06:43,470 --> 00:06:44,740
OK so this looks pretty good.

100
00:06:44,910 --> 00:06:48,600
Now the user knows exactly what stream they are attempting to delete.

101
00:06:48,610 --> 00:06:53,010
So unless we have to do is make sure that we wire up the delete and cancel buttons right here.

102
00:06:53,010 --> 00:06:54,950
So let's take care of that in the next video.