1
00:00:00,790 --> 00:00:05,860
Now that we fixed up our navigation issues we can focus on the stream show component again as a quick

2
00:00:05,860 --> 00:00:10,270
reminder the component for streams show is going to show the title and description down at the bottom.

3
00:00:10,450 --> 00:00:15,280
So effectively we have to go through the exact same process that we went through for stream delete and

4
00:00:15,280 --> 00:00:16,560
stream edit as well.

5
00:00:16,720 --> 00:00:19,100
We need to read the ID out of the L.

6
00:00:19,240 --> 00:00:24,280
We need to call the action creator to fetch that particular stream and then use a map state to prop's

7
00:00:24,280 --> 00:00:27,960
function to get that stream out of our redux store and into our component.

8
00:00:28,090 --> 00:00:31,310
So lets get to it inside my code editor.

9
00:00:31,330 --> 00:00:34,900
I'll open up my streams show a component right here at the top.

10
00:00:34,900 --> 00:00:44,480
I'm going to import connect from re-act redux and I'll also get my fetch stream action creator from

11
00:00:44,570 --> 00:00:49,920
up to directory's actions.

12
00:00:49,930 --> 00:00:54,940
Next up I will hook up the connect function down at the bottom so it plays connect and call it and then

13
00:00:55,030 --> 00:00:58,120
OLAP stream show at the second set of parentheses.

14
00:00:58,210 --> 00:01:02,410
We do not yet have a mouse stage props functions all pass and NULL for the first argument and then the

15
00:01:02,410 --> 00:01:06,890
second argument will be a fetch stream inside of an object.

16
00:01:06,910 --> 00:01:11,360
Next up we definitely want to make streams show into a class based component so we can use a lifecycle

17
00:01:11,440 --> 00:01:12,460
method.

18
00:01:12,460 --> 00:01:17,120
So I'm going to just delete the entire functional component and replace it with class stream.

19
00:01:17,140 --> 00:01:21,350
Show extends re-act dot component.

20
00:01:21,940 --> 00:01:23,680
Well defined my render method in there.

21
00:01:23,890 --> 00:01:33,020
And right now I will return a div with the text stream show and then I will also define a component.

22
00:01:33,050 --> 00:01:39,520
Did mt life cycle method and inside if you're going to go through the same process Winther previously.

23
00:01:39,520 --> 00:01:41,970
We want to call this prop's not fetch.

24
00:01:41,990 --> 00:01:47,880
Stream and we need to make sure that we pass in the appropriate ID for the stream that we want to fetch.

25
00:01:48,040 --> 00:01:49,420
So we've seen that once before.

26
00:01:49,420 --> 00:01:51,840
Member to get this little idea right here.

27
00:01:51,850 --> 00:01:58,680
We will reference this dot prop's match harams ID.

28
00:01:59,130 --> 00:02:04,540
OK so let's save this right here and we'll test inside the browser so going to flip back over.

29
00:02:04,710 --> 00:02:09,800
I'm going to open up my network request Lague and filter by ex-aide char requests and then I will refresh

30
00:02:09,800 --> 00:02:16,070
the page while I am looking at streams 4 and so I should see a request right here to get stream with

31
00:02:16,070 --> 00:02:16,660
ID.

32
00:02:16,730 --> 00:02:22,610
For now remember you might not be looking at the stream with an idea for you might have created a number

33
00:02:22,610 --> 00:02:26,450
of different streams so you might be looking at like streams 12 or something like that.

34
00:02:26,480 --> 00:02:30,560
Essentially you just want to make sure that you see a request pop up right here to go and fetch some

35
00:02:30,560 --> 00:02:32,390
given stream.

36
00:02:32,450 --> 00:02:33,880
I guess that looks pretty good.

37
00:02:34,190 --> 00:02:39,150
So now we need to somehow get that stream out of our redux store and get it inside of our component.

38
00:02:39,290 --> 00:02:46,510
So as usual we'll define map state to prop's.

39
00:02:46,660 --> 00:02:52,720
We're going to get both our state argument and own props and then inside of your we will return an object

40
00:02:53,310 --> 00:03:04,600
of stream and that will be states streams and we need to get own prop's dot match BRAMs Id like Zo and

41
00:03:04,760 --> 00:03:06,520
Eclipse's sidebar so you can see that whole line

42
00:03:10,120 --> 00:03:13,580
all right now let's take maps to props and pass it off to our next function.

43
00:03:13,660 --> 00:03:20,080
So map state to prop's And then finally we'll try to show some information about that stream inside

44
00:03:20,090 --> 00:03:21,870
of a render method.

45
00:03:21,870 --> 00:03:27,240
Now let's not forget the same scenario we have gone through many times before if we have not yet fetched

46
00:03:27,240 --> 00:03:29,680
the stream we need to handle that appropriately.

47
00:03:29,700 --> 00:03:38,530
So inside of my render method I'll say if there is no stream so if not this Propst stream then I want

48
00:03:38,530 --> 00:03:47,030
to return a div with the text loading otherwise I'm going to return a little bit of GSX here so I'll

49
00:03:47,090 --> 00:03:49,890
delete that div with just dream show.

50
00:03:50,010 --> 00:03:58,790
I'm going to make a multi-line gests X block right here and I'll put in a div with a h one inside of

51
00:03:58,790 --> 00:04:00,880
the H one will show the stream's title.

52
00:04:00,910 --> 00:04:04,640
So this Scott prop's stream title.

53
00:04:04,900 --> 00:04:12,440
And then after that I'll place about five little bit similar text and inside there will do this up props

54
00:04:12,710 --> 00:04:17,030
stream description get the stream's description on there as well.

55
00:04:17,030 --> 00:04:23,210
Now if you want to we could do a little bit of yes 20:15 destructuring here to avoid the repetition

56
00:04:23,240 --> 00:04:24,870
of this Propst stream.

57
00:04:24,890 --> 00:04:26,480
Let's just do that really quickly.

58
00:04:26,480 --> 00:04:33,800
So we'll pull off title and description from this prop's stream.

59
00:04:34,020 --> 00:04:38,910
And now we don't have to duplicate this not not stream twice inside of that return statement.

60
00:04:38,910 --> 00:04:42,910
So it'll go to be just title and just description like so.

61
00:04:44,190 --> 00:04:45,900
All right let's save this now.

62
00:04:45,900 --> 00:04:52,290
If I flip back over all see my it titled My stream as a H-1 and I'll see the 5 underneath it with the

63
00:04:52,290 --> 00:04:53,790
strings description.

64
00:04:53,790 --> 00:04:58,050
Now I should be able to go back to my list of streams and click on another one and see the title and

65
00:04:58,050 --> 00:04:59,760
description for that stream as well.

66
00:05:00,180 --> 00:05:01,980
And there's another one as well.

67
00:05:02,130 --> 00:05:07,170
And then don't forget we need to also make sure that we can refresh the page and still see the appropriate

68
00:05:07,170 --> 00:05:07,930
stream.

69
00:05:07,950 --> 00:05:11,030
So I will refresh and I still see the stream appear.

70
00:05:11,180 --> 00:05:14,600
And so that ensures that our component is fetching the data that it needs.

71
00:05:14,640 --> 00:05:19,800
And we are not dependent upon going to the stream List screen first getting our list of screens and

72
00:05:19,800 --> 00:05:22,390
then going to a individual page.

73
00:05:22,580 --> 00:05:24,240
OK so this looks fantastic.

74
00:05:24,330 --> 00:05:25,520
So let's take a pause right here.

75
00:05:25,560 --> 00:05:27,320
It will continue in the next video.