1 00:00:00,950 --> 00:00:02,480 Blessing we do around editing. 2 00:00:02,510 --> 00:00:07,550 A stream is making sure that inside of stream edit Whenever on Samit right here gets called with our 3 00:00:07,550 --> 00:00:12,420 brand new title and description inside that form Bally's object rather than doing that console log. 4 00:00:12,430 --> 00:00:15,070 We need to call some appropriate action creator. 5 00:00:15,200 --> 00:00:20,030 Now recall that we already wired up the edit stream action creator to our stream edit form. 6 00:00:20,090 --> 00:00:25,370 So inside of an submit all we really have to do here is call that action creator before we do I want 7 00:00:25,370 --> 00:00:29,960 to very quickly pull up the edit stream action creator itself and just get a quick reminder on how it 8 00:00:29,960 --> 00:00:31,280 works. 9 00:00:31,280 --> 00:00:36,900 So if I open up my actions index not just file heres at it Stream right here. 10 00:00:37,340 --> 00:00:39,320 So take a look at the different arguments. 11 00:00:39,320 --> 00:00:43,900 The first argument is actually going to be the ID of the stream that we are trying to edit. 12 00:00:43,940 --> 00:00:49,670 Remember when we make a request to our API the expectation if we are following restful conventions is 13 00:00:49,670 --> 00:00:56,240 that we are going to make a put request to the API specifically to the route streams slash and then 14 00:00:56,240 --> 00:00:58,800 the idea of the stream that we're trying to update. 15 00:00:58,820 --> 00:01:02,990 So that's why we need to pass and the idea of the stream we're trying to update as the first argument 16 00:01:02,990 --> 00:01:03,980 right here. 17 00:01:04,310 --> 00:01:09,170 And then the second argument is going to be the new changed values that we want to update our stream 18 00:01:09,170 --> 00:01:09,880 with. 19 00:01:09,950 --> 00:01:15,620 Remember that prior to the last video we accidentally had a form belly's object that had the ID and 20 00:01:15,620 --> 00:01:17,400 the user id of the stream as well. 21 00:01:17,510 --> 00:01:22,170 Foreign values is really just supposed to be the change properties of the stream. 22 00:01:22,250 --> 00:01:26,210 And so that's why the last video we had that long discussion around making sure that we only set up 23 00:01:26,420 --> 00:01:33,660 title and description inside the form so form values should contain only title and description. 24 00:01:33,680 --> 00:01:33,980 All right. 25 00:01:33,980 --> 00:01:38,260 So let's go back over to our component and we're going to make sure that we call it with our ID and 26 00:01:38,270 --> 00:01:39,860 form formalities. 27 00:01:40,650 --> 00:01:45,470 So back inside the stream at it I'm going to remove the console log we have in there and then I will 28 00:01:45,470 --> 00:01:50,830 call this stop Propp start at it Stream. 29 00:01:50,900 --> 00:01:53,720 Now is the first argument we need to pass in our ID. 30 00:01:53,720 --> 00:01:59,420 Remember we've already got access to our id very easily as this prop's not matched up pro-ams ID will 31 00:01:59,660 --> 00:02:00,850 say easily because. 32 00:02:01,130 --> 00:02:04,650 Yeah that's a pretty long little thing right there but whatever. 33 00:02:04,790 --> 00:02:07,250 So we're going to pass on that idea first. 34 00:02:09,590 --> 00:02:13,100 And then as the second argument we're going to pass in the change form value. 35 00:02:13,110 --> 00:02:15,830 So it's going to be the form values object right there. 36 00:02:17,080 --> 00:02:17,380 Right. 37 00:02:17,410 --> 00:02:19,510 And that is pretty much it. 38 00:02:19,600 --> 00:02:23,560 Now before we test this I want to point out one thing very quickly that's going to save us just a little 39 00:02:23,560 --> 00:02:24,570 bit of time. 40 00:02:24,580 --> 00:02:29,980 Remember after we submit a form the expectation is that we're going to make a request and then hopefully 41 00:02:29,980 --> 00:02:31,530 give our users some feedback. 42 00:02:31,540 --> 00:02:36,580 Essentially you don't tell them that something just changed or maybe transition them or navigate them 43 00:02:36,580 --> 00:02:39,200 to some other page inside of our application. 44 00:02:39,220 --> 00:02:45,010 We already went over this topic in great detail which creates dream up year remember with great stream 45 00:02:45,010 --> 00:02:50,680 we said that after we made our request and dispatch in action we were then going to forcibly navigate 46 00:02:50,680 --> 00:02:53,740 our user back to the main list of streams. 47 00:02:53,920 --> 00:02:58,800 So I think that we should probably definitely do the same thing with added stream as well. 48 00:02:59,200 --> 00:03:04,540 So back inside of it it Stream after we make our request successfully after we then dispatch an action 49 00:03:05,030 --> 00:03:07,210 I'm then going to call history push 50 00:03:10,340 --> 00:03:16,250 and forcibly navigate our user back to the root route of our application write their history push. 51 00:03:16,680 --> 00:03:21,620 OK let's save this and then we'll flip back over to the browser and we'll do a quick test. 52 00:03:21,620 --> 00:03:26,600 So going to first refresh the page just in case and then I'll make a change to how about just my description 53 00:03:26,600 --> 00:03:27,040 right here. 54 00:03:27,050 --> 00:03:31,360 I'll say this stream is about refactoring. 55 00:03:32,180 --> 00:03:37,490 And then I will submit that now as soon as I submit it you'll notice that I get this dream is about 56 00:03:37,490 --> 00:03:38,690 refactoring right here. 57 00:03:38,840 --> 00:03:45,380 But you'll also notice that I've now lost my edit and my delete buttons over here as well which is pretty 58 00:03:45,380 --> 00:03:47,180 darn interesting. 59 00:03:47,630 --> 00:03:50,510 So the input or the update took hold. 60 00:03:50,600 --> 00:03:51,330 That's good. 61 00:03:51,410 --> 00:03:54,890 But the fact that I don't see edit and delete any more even though that is a string that was created 62 00:03:54,890 --> 00:03:58,210 by me is a little bit disconcerting. 63 00:03:58,220 --> 00:03:59,610 So let's take a quick pause right here. 64 00:03:59,630 --> 00:04:04,390 When we come back the next section will figure out why edit and delete decided to up and disappear.