1
00:00:00,680 --> 00:00:05,040
In-class video we learn that when we use re-act router we need to make sure that every component is

2
00:00:05,040 --> 00:00:10,890
going to fetch its own data because if we don't if we rely upon the user first going to page A and then

3
00:00:10,920 --> 00:00:15,960
over to page B eventually a user is going to go straight to page B and the data that you might expect

4
00:00:15,960 --> 00:00:18,570
to have is not going to actually exist.

5
00:00:18,570 --> 00:00:23,010
All right so now that we've learned that lesson we're going to open up our stream edit component again.

6
00:00:23,080 --> 00:00:26,180
We're going to make sure that this thing starts to fetch its own data.

7
00:00:26,250 --> 00:00:31,950
Now as a quick reminder if we also open up our actions index not J.S. file you'll recall that we have

8
00:00:31,950 --> 00:00:37,620
an action crater called fetch stream and if we call the thing with an ID this action critter will fetch

9
00:00:37,620 --> 00:00:39,380
that particular stream.

10
00:00:39,390 --> 00:00:44,280
So essentially Anytime our stream edit component is mounted on the screen or is rendered to the screen

11
00:00:44,550 --> 00:00:49,140
we want to make sure we call that stream with the idea of the stream that we want to fetch and that's

12
00:00:49,140 --> 00:00:50,520
pretty much it.

13
00:00:50,520 --> 00:00:55,410
So again if we flip back or stream edit Step one is going to be to refactor this thing into a class

14
00:00:55,410 --> 00:01:01,830
based component so we can use the component did mt life cycle method I to remove the can stream at it

15
00:01:01,890 --> 00:01:10,890
and replace it with class stream at it extends re-act component and then going to wrap those two lines

16
00:01:10,890 --> 00:01:17,660
inside of a render method like so I'm going to remove the semi-colon at the very end of the class that

17
00:01:17,660 --> 00:01:19,330
I don't need anymore.

18
00:01:19,830 --> 00:01:21,380
I'll then define a component.

19
00:01:21,380 --> 00:01:23,300
Did mt life cycle method.

20
00:01:23,390 --> 00:01:29,470
And inside there I'm going to call this prop's dot fetch stream.

21
00:01:29,630 --> 00:01:33,890
Singular no s there are just stream because we want to fetch the one stream that we're trying to show

22
00:01:33,890 --> 00:01:38,750
on the screen and then we're going to call that and we need to make sure that we pass in the ID of the

23
00:01:38,750 --> 00:01:42,240
stream that we're trying to fetch.

24
00:01:42,770 --> 00:01:51,170
Remember our prop's object has the match Puranas id property that's the ID coming out of our YOU l up

25
00:01:51,170 --> 00:01:52,520
you're at the top.

26
00:01:52,520 --> 00:01:59,670
So when we call fecche stream I'm going to pass in destock props dot match harams ID.

27
00:01:59,690 --> 00:02:00,930
That's a long one right there.

28
00:02:01,130 --> 00:02:03,640
But that's pretty much what we want to pass in.

29
00:02:04,100 --> 00:02:04,360
All right.

30
00:02:04,370 --> 00:02:05,620
Now let's test this out.

31
00:02:05,840 --> 00:02:08,320
Now it's incredibly likely that we might see an error here.

32
00:02:08,330 --> 00:02:13,010
I don't know you know we'll see what happens but let's just try to save this and see what happens.

33
00:02:13,010 --> 00:02:16,780
All right so I'll flip back over and sure enough quick your message here.

34
00:02:16,790 --> 00:02:18,130
So looks like my render method.

35
00:02:18,140 --> 00:02:19,670
I had a reference to props.

36
00:02:19,670 --> 00:02:23,830
Remember when we make use of a class based component it has to be destock props.

37
00:02:24,020 --> 00:02:25,280
That's better.

38
00:02:25,280 --> 00:02:26,500
So now I'll save again.

39
00:02:26,600 --> 00:02:29,570
I'll flip back over and again I see an error message.

40
00:02:29,600 --> 00:02:30,080
All right.

41
00:02:30,080 --> 00:02:31,520
Looks like I'm going too quickly here.

42
00:02:31,520 --> 00:02:33,420
I need to slow down just a little bit.

43
00:02:33,470 --> 00:02:37,340
So I tried to call fecche dream by never actually wired up that action creator.

44
00:02:37,340 --> 00:02:45,980
So at the top I'll make sure that I import fetch stream from up to directory's actions and then I need

45
00:02:45,980 --> 00:02:49,130
to make sure that I pass off that stream to connect down at the bottom.

46
00:02:53,650 --> 00:02:55,310
I'll get funding now.

47
00:02:55,450 --> 00:02:58,310
So if we go into workouts let's try this one more time.

48
00:02:58,370 --> 00:02:59,800
All right so I can flip back over.

49
00:02:59,870 --> 00:03:03,500
You'll notice I now see two consulates here in the page first loads up.

50
00:03:03,530 --> 00:03:08,330
The reason I see two is because our component renders to the screen one time and we see the console

51
00:03:08,330 --> 00:03:10,550
log from the render method right there.

52
00:03:10,550 --> 00:03:15,070
We then attempt to fetch our stream after we successfully get our stream from the API.

53
00:03:15,200 --> 00:03:20,390
Our component is rendered again and that's why we see the console log appear a second time.

54
00:03:20,420 --> 00:03:25,160
So if you look in the first console log right here we're going to see that stream is undefined.

55
00:03:25,700 --> 00:03:29,120
So that's the first console log where we have not yet gotten our stream.

56
00:03:29,210 --> 00:03:33,950
Then if we expand a second console log I'll see that the stream has now been successfully fetched and

57
00:03:33,950 --> 00:03:36,500
is showing up inside of my component.

58
00:03:36,500 --> 00:03:42,040
Perfect couple errors there my mistake on that but it looks like we got everything working as expected.

59
00:03:42,320 --> 00:03:49,560
So now if we really wanted to complete our little task here we could attempt to say printout this prop

60
00:03:49,620 --> 00:03:51,100
starts Dreamcoat title.

61
00:03:51,170 --> 00:03:53,160
There's just one thing to be aware of here.

62
00:03:53,180 --> 00:03:57,870
Remember when our component is first rendered this Propst dot stream will be undefined.

63
00:03:58,070 --> 00:04:02,880
So if we tried to print out title when we don't have the stream inside of our component we're going

64
00:04:02,870 --> 00:04:07,150
to see that classic error message something like Yeah.

65
00:04:07,220 --> 00:04:10,330
Here it is right here cannot read property of undefined.

66
00:04:10,700 --> 00:04:14,860
So it's something that we need to do inside of here's something we've done many times before.

67
00:04:14,870 --> 00:04:23,710
Essentially we just need to put in a little statement and say if we do not have our stream then return

68
00:04:24,730 --> 00:04:28,870
like a div that says loading or something like that like so.

69
00:04:29,200 --> 00:04:33,540
So if we have not yet loaded up our stream no problem where Id turn the div with voting.

70
00:04:33,580 --> 00:04:39,190
Otherwise if we do have our stream attempt to print out the title so now we can save this again and

71
00:04:39,190 --> 00:04:43,780
we'll see the name of the stream that I'm trying to edit which is I created distrain.

72
00:04:43,810 --> 00:04:45,010
All right.

73
00:04:45,010 --> 00:04:48,760
So that's pretty much going to take care of our data loading stuff.

74
00:04:48,880 --> 00:04:54,460
Now everything you see inside a stream at it right now is going to essentially be repeated almost line

75
00:04:54,460 --> 00:05:02,680
for line over to our other two components of stream delete and stream show because remember both stream

76
00:05:02,680 --> 00:05:07,990
delete and stream show need to load up the appropriate stream in order to show some details about it

77
00:05:08,020 --> 00:05:08,860
on the screen.

78
00:05:09,100 --> 00:05:13,600
So for example when we try to show a window or a message to the user that says Are you sure you want

79
00:05:13,600 --> 00:05:14,660
to delete that stream.

80
00:05:14,680 --> 00:05:17,970
Will probably end up wanting to put like the title of this stream on there as well.

81
00:05:17,980 --> 00:05:21,180
So we'll need to fetch the stream ahead of time and then for streams show.

82
00:05:21,220 --> 00:05:24,840
Same thing very obvious in that case whenever a user is looking at a stream.

83
00:05:24,850 --> 00:05:30,640
Yeah we need to load it up so we need to make sure that we wire up the streams show component to fetch

84
00:05:30,730 --> 00:05:32,410
the data that it needs as well.

85
00:05:32,410 --> 00:05:37,960
So again what you see inside of here is going to be just about duplicated into those other two components

86
00:05:37,960 --> 00:05:41,010
as well in the future when we start to work with them.

87
00:05:41,020 --> 00:05:41,270
All right.

88
00:05:41,280 --> 00:05:43,720
So let's take a pause here now that we've got our data.

89
00:05:43,720 --> 00:05:49,060
When we come back the next section we're going to start to put together the actual edit stream form.

90
00:05:49,090 --> 00:05:52,900
And there's going to be a little fun twist around this component that we haven't quite spoken about

91
00:05:52,900 --> 00:05:56,420
just yet so let's take a pause and we'll get to it in the next video.