1 00:00:00,650 --> 00:00:06,520 In last video we made sure that a user goes to your l like streams to lead and then an idea any time 2 00:00:06,520 --> 00:00:08,110 they attempt to delete a stream. 3 00:00:08,120 --> 00:00:11,190 So now we need to start to refactor the stream delete component. 4 00:00:11,320 --> 00:00:15,610 We are going to turn it into a class based component and we're going to make sure that any time it gets 5 00:00:15,610 --> 00:00:21,070 rendered to the screen it attempts to fetch the stream with the idea of three or whatever is actually 6 00:00:21,070 --> 00:00:21,610 up year. 7 00:00:21,730 --> 00:00:26,400 So we can show the title of it inside the body or content area of this modal. 8 00:00:26,790 --> 00:00:27,220 All right. 9 00:00:27,220 --> 00:00:30,560 So to get started I'm going to open up my stream delete component. 10 00:00:30,670 --> 00:00:35,320 We're going to have to react to this over to a class based component because now we want to make use 11 00:00:35,320 --> 00:00:37,980 of a lifecycle method component in Mt. 12 00:00:37,990 --> 00:00:41,730 So we know when we should attempt to fetch or load up our stream. 13 00:00:41,860 --> 00:00:47,770 So I'm going to delete the stream delete you're at the top and I will replace it with class stream delete 14 00:00:47,980 --> 00:00:54,260 extends re-act component and then I'll open up a curly brace. 15 00:00:56,390 --> 00:01:03,770 Then inside of this mishmash of syntax inside of here right now we need to place our render function. 16 00:01:03,920 --> 00:01:06,710 We're going to put actions right here inside of a helper method. 17 00:01:06,890 --> 00:01:11,690 So I'm going to first find the return keyword right here and I'm going to wrap it with a render method 18 00:01:12,160 --> 00:01:15,150 so I can in place render opening curly brace. 19 00:01:15,350 --> 00:01:20,380 I'll then go to the far side of the return statement and place a closing curly brace like so. 20 00:01:20,510 --> 00:01:26,090 So there's the opening and there's the closing and then technically I really should indent the entire 21 00:01:26,090 --> 00:01:32,690 return statement like so I can also remove the semi-colon at the very end of the class because semi-colons 22 00:01:32,750 --> 00:01:38,360 are not typically required with class statements although technically we can't throw them in there. 23 00:01:38,360 --> 00:01:44,120 Next I'm going to make sure that I wrap actions right here inside of a helper method as well. 24 00:01:44,120 --> 00:01:53,370 So I will say something like render actions and will wrap up actions all indented and then finally we 25 00:01:53,370 --> 00:01:55,390 don't really need to assign this to a variable anymore. 26 00:01:55,560 --> 00:01:58,710 So I'm going to just return parentheses. 27 00:01:58,900 --> 00:02:01,190 Print the C with the re-act fragment like so. 28 00:02:02,410 --> 00:02:07,680 So now down inside the render method last little part of the refactor here when we say actions right 29 00:02:07,680 --> 00:02:10,860 here and pass off the actions variable there is no more actions variable. 30 00:02:10,950 --> 00:02:17,210 I'm going to instead call this render actions and make sure you call it like so we're not trying to 31 00:02:17,210 --> 00:02:21,560 pass a reference off to this function we're trying to call it and pass the result of it to the actions 32 00:02:21,570 --> 00:02:23,070 Propp. 33 00:02:23,100 --> 00:02:27,540 All right let's do a quick Savior and that will refresh our browser and make sure that our refactor 34 00:02:27,540 --> 00:02:29,250 was done successfully. 35 00:02:29,250 --> 00:02:33,140 OK so I can come back over refreshed the page and I do not see any error message. 36 00:02:33,330 --> 00:02:37,620 So if you see any error message right now as usual please read that error message it's going to tell 37 00:02:37,620 --> 00:02:41,710 you exactly what typo you put inside of this class when we refactored it. 38 00:02:42,900 --> 00:02:47,620 All right so now that we have refactored over to a class based component we can now add in a lifecycle 39 00:02:47,730 --> 00:02:52,200 method that will attempt to call the action creator to go and fetch the stream that we're trying to 40 00:02:52,200 --> 00:02:57,270 delete because remember we can not assume that the stream has already been loaded up. 41 00:02:57,300 --> 00:03:01,290 We have to make sure that every component that gets rendered by react dam attempts to fetch its own 42 00:03:01,290 --> 00:03:02,590 data. 43 00:03:02,640 --> 00:03:09,150 So at the top the class I'm going to define component did mount and inside if you're going to have to 44 00:03:09,150 --> 00:03:18,080 call our action creator to fetch the stream with this ID right here as a quick reminder we can get that 45 00:03:18,110 --> 00:03:24,020 little kind of variable out of the L by referencing our props match Paramo object. 46 00:03:24,110 --> 00:03:29,030 And that's a really hard path of sorts to remember so let's just do a console log right here to get 47 00:03:29,030 --> 00:03:32,480 a quick reminder on how we're going to get access. 48 00:03:32,710 --> 00:03:37,590 Just stop prop's how we're going to get access to that sort of variable inside of the path. 49 00:03:37,700 --> 00:03:40,940 So consol log this up prop's in inside of component and mount. 50 00:03:40,940 --> 00:03:46,230 I'll save this and will flip back over and take a look at our cons.. 51 00:03:46,370 --> 00:03:48,590 All right so here's my counsel Lague. 52 00:03:48,590 --> 00:03:55,550 So here's the entire prop's object remember we have the match object harams ID and that has three right 53 00:03:55,550 --> 00:03:59,770 there because we are visiting the path for the stream with the idea 3. 54 00:03:59,870 --> 00:04:05,900 Now as a reminder at the pre-amps object right here has the key of ID inside of it specifically because 55 00:04:05,900 --> 00:04:07,630 inside of our apt. 56 00:04:07,670 --> 00:04:13,260 J.S. file we had just updated the route right here to put in Colon ID. 57 00:04:13,350 --> 00:04:19,130 Remember if we changed the name of this thing to like jibberish or whatever we want whatever value we 58 00:04:19,130 --> 00:04:23,730 put inside there is going to be what shows up inside of that program's object. 59 00:04:23,750 --> 00:04:28,090 But traditionally any sign that we're trying to get reference to an ID we're just going to call it id. 60 00:04:28,130 --> 00:04:33,080 So don't forget it's really the colon on here that gives you access to or turns that part of the path 61 00:04:33,110 --> 00:04:34,860 into a kind of variable of sorts. 62 00:04:35,690 --> 00:04:42,060 OK so going to take it back over to ID and I should see match prams Id just like we had before. 63 00:04:42,370 --> 00:04:42,600 OK. 64 00:04:42,610 --> 00:04:44,590 So we now know how to get the ID. 65 00:04:44,780 --> 00:04:51,180 So back inside of stream delete I'm going to move that console log and I'll just put in this stop prop's 66 00:04:51,630 --> 00:04:56,150 dot match path or zoomy harams ID. 67 00:04:56,150 --> 00:04:57,740 So that's our idea right there. 68 00:04:57,960 --> 00:05:05,460 So we're going to want to call a action creator to attempt to fetch the stream with that ID as a reminder 69 00:05:05,520 --> 00:05:07,960 inside of our actions index file. 70 00:05:08,040 --> 00:05:13,650 We have that action creator called fetch stream and if we call this with the ID this action crater's 71 00:05:13,650 --> 00:05:16,510 going to fetch the appropriate stream from our API server. 72 00:05:16,530 --> 00:05:18,720 So very similar to what we were doing on stream edit. 73 00:05:18,780 --> 00:05:24,060 We just want to call fast stream with the given ID so lets make sure that we wire up that action creator 74 00:05:24,060 --> 00:05:25,100 to this component. 75 00:05:25,360 --> 00:05:33,070 I'm going to first get started by importing Kinect from re-act redux at the top and then I will import 76 00:05:33,340 --> 00:05:41,770 fetch stream from up to directory's into the actions file our actions folder for the index file. 77 00:05:42,010 --> 00:05:46,910 So now we can hook up this action creator with CONNECT at the bottom of the file. 78 00:05:47,140 --> 00:05:48,260 So go down to the bottom. 79 00:05:48,280 --> 00:05:53,870 I'll place my connect a place a second set of prints around stream delete. 80 00:05:54,050 --> 00:05:58,630 We do not yet have a map state to prop's we will in just a moment but we don't have it yet. 81 00:05:58,990 --> 00:06:05,290 So put in NULL for map state to props and then the second argument is going to be an object with fetch 82 00:06:05,410 --> 00:06:06,520 stream. 83 00:06:06,520 --> 00:06:07,960 Now remember I can't say it enough. 84 00:06:07,960 --> 00:06:13,440 Remember we are fetching a single stream right here so we won't fetch stream not fetch streams. 85 00:06:13,450 --> 00:06:14,340 No s on the end. 86 00:06:14,350 --> 00:06:15,740 Just fecche stream. 87 00:06:15,880 --> 00:06:19,000 Make sure you have the same thing appear at the top as well just fetch stream. 88 00:06:19,090 --> 00:06:20,980 No s. 89 00:06:21,270 --> 00:06:25,690 All right so now that we've wired up our action creator we can call it inside of component and mount. 90 00:06:25,710 --> 00:06:32,100 So I'm going to call this prop's dot fetch stream and I'll pass in that idea that we got from our you 91 00:06:32,100 --> 00:06:35,300 are el Stout's time to test this thing out. 92 00:06:35,350 --> 00:06:38,270 I'm going to save this file a flip back over. 93 00:06:38,740 --> 00:06:43,550 And now it's kind of hard to tell whether or not that action creator is fetching our stream successfully. 94 00:06:43,630 --> 00:06:49,840 But in order to confirm that we can open up our network request tab we can filter by our requests. 95 00:06:50,110 --> 00:06:55,840 And if you do a quick refresh of the page you should see a request right here to localhost 2001 slash 96 00:06:55,900 --> 00:06:57,790 streams slash 3. 97 00:06:57,910 --> 00:07:04,940 And if I select that I can look at either a preview or response and I'll see my description title user 98 00:07:04,940 --> 00:07:11,100 ID and ID for the stream of 3 Perfect's are now fetching the stream with ID 3. 99 00:07:11,120 --> 00:07:16,280 So now we can define a map state to prop's function get this stream out of our redux store and into 100 00:07:16,280 --> 00:07:16,940 our component. 101 00:07:16,970 --> 00:07:21,510 And then finally show some details about that stream inside the content area of this motile. 102 00:07:21,620 --> 00:07:24,510 So quick pause right here and we'll take care of that in the next video.