1 00:00:00,990 --> 00:00:04,860 In the last video we got some good work done on our stream component. 2 00:00:04,860 --> 00:00:06,030 I'm back in my stream list. 3 00:00:06,030 --> 00:00:10,840 I'm going to click on edit again so I see my initial values for my Stream right here. 4 00:00:11,220 --> 00:00:14,040 I'm going to again change those very quickly to some jibberish. 5 00:00:14,190 --> 00:00:18,680 And when I click on submit I see the same console log as what we had at the end of the last video. 6 00:00:18,690 --> 00:00:22,350 Now I had said that there was something a little bit off with the console log right here. 7 00:00:22,350 --> 00:00:24,460 So this is kind of a technicality. 8 00:00:24,570 --> 00:00:28,260 And technically our application would work just fine as is. 9 00:00:28,350 --> 00:00:32,130 But it's something I want to throw out there because this is something that might get you in trouble 10 00:00:32,160 --> 00:00:35,970 when you start working on your own projects and it really comes down to how your back and server is 11 00:00:35,970 --> 00:00:37,020 set up. 12 00:00:37,080 --> 00:00:39,450 So take a look at the console log right here. 13 00:00:39,450 --> 00:00:43,210 Notice how we've got the description and the title which is totally expected. 14 00:00:43,410 --> 00:00:48,440 However we also have the I.D. and a user ID in here as well. 15 00:00:48,440 --> 00:00:50,290 Now why is that an issue. 16 00:00:50,550 --> 00:00:55,890 Well remember our edits stream form right here is about only allowing a user to change a title and a 17 00:00:55,890 --> 00:00:57,060 description. 18 00:00:57,060 --> 00:01:03,210 When we eventually call this on Samit callback right here in site of stream edit we're getting some 19 00:01:03,240 --> 00:01:08,370 object that contains what are supposed to be updates to our stream object. 20 00:01:08,400 --> 00:01:13,980 In other words form values right there is only supposed to contain properties that are supposed to change 21 00:01:14,040 --> 00:01:19,530 on our form so form values is supposed to tell us about the set of changes we want to make to the form 22 00:01:20,310 --> 00:01:24,900 we're going to eventually take that object and push it up to our API and where he essentially telling 23 00:01:24,900 --> 00:01:31,020 our API hey here are some change properties that you should use to update some given Stream. 24 00:01:31,020 --> 00:01:36,870 Now the issue with this is that when we pass in the ID a for a year and the user id it kind of makes 25 00:01:36,870 --> 00:01:40,950 it seem as though we have changed the ID or the user ID. 26 00:01:41,190 --> 00:01:44,490 And those are both properties that we do not at all ever want to change. 27 00:01:44,490 --> 00:01:48,860 Well maybe the user id but we probably don't want to change the idea of the stream at any point. 28 00:01:49,080 --> 00:01:51,290 So again this is really a technicality. 29 00:01:51,330 --> 00:01:55,020 It's not going to cause an issue with the API that we're making use of right now. 30 00:01:55,140 --> 00:02:00,900 But if you ever start to use some other back and server where they expect to receive a put request or 31 00:02:00,930 --> 00:02:07,740 a request to update a record they might do some validation and expect that the change set not contain 32 00:02:07,770 --> 00:02:11,030 an ID or not contain something like user ID. 33 00:02:11,040 --> 00:02:16,200 In other words we don't really want to push up values inside this change object of sorts. 34 00:02:16,200 --> 00:02:21,240 That did not actually change because your back and server you might eventually work with an API that's 35 00:02:21,240 --> 00:02:26,100 going to complain about that and say hey you can't tell me that like you have some different idea here 36 00:02:26,100 --> 00:02:27,620 or something like that. 37 00:02:27,630 --> 00:02:31,920 So essentially all I'm saying here is that we want to kind of trim down the properties that we see inside 38 00:02:31,920 --> 00:02:33,020 the subject. 39 00:02:33,030 --> 00:02:38,700 Now the real question here is why is the ID and the user ID showing up in the first place at all if 40 00:02:38,700 --> 00:02:41,950 we're only supposed to show change properties like description and title. 41 00:02:42,210 --> 00:02:48,990 Well the real issue here is that inside of stream edit when we set up those initial values we put in 42 00:02:48,990 --> 00:02:51,750 the entire stream object right here. 43 00:02:51,750 --> 00:02:57,240 So essentially when we pass in that entire object every property inside there is used as some initial 44 00:02:57,240 --> 00:02:59,340 value for the form. 45 00:02:59,340 --> 00:03:04,470 So even though we don't see inputs for those other properties they are still loaded up in the form or 46 00:03:04,470 --> 00:03:07,720 inside of redux form as some initial values for the form. 47 00:03:07,770 --> 00:03:14,220 I can actually kind of prove that to you if we go back over here to our application on stream and we 48 00:03:14,220 --> 00:03:21,630 open up redux dev tools and select states you can then look at form open up stream form and then you'll 49 00:03:21,720 --> 00:03:26,640 take a look at values values right here is an object that contains all the different current values 50 00:03:26,700 --> 00:03:28,530 for the stream form. 51 00:03:28,770 --> 00:03:33,480 And inside there you'll see that we not only have the title and description we also have the user id 52 00:03:33,510 --> 00:03:34,620 and the ID. 53 00:03:34,620 --> 00:03:39,890 So redux form thinks that our form is supposed to have a field for user ID and for ID as well. 54 00:03:40,050 --> 00:03:46,110 And when we submit this form redux form is going to pass along that user ID and the ID which again not 55 00:03:46,110 --> 00:03:51,750 the worst thing for the application but is just really not appropriate to try to eventually Smet to 56 00:03:51,750 --> 00:03:53,350 some back end API. 57 00:03:53,550 --> 00:03:59,370 So we're only seeing user ID and ID right here because we are passing them in as some initial values. 58 00:03:59,370 --> 00:04:03,680 So long story short long story short here kind of a long section. 59 00:04:03,690 --> 00:04:05,110 Talk about a very small thing. 60 00:04:05,220 --> 00:04:11,130 Essentially we only want to pass in an object here with a title and a description just the properties 61 00:04:11,220 --> 00:04:13,140 we are trying to change. 62 00:04:13,260 --> 00:04:16,290 Now there is more than one way we could do this. 63 00:04:16,290 --> 00:04:21,150 The first way we could do it would be to put an object back in here again as we had previously. 64 00:04:21,210 --> 00:04:27,950 So two sets of curly braces on either side and then we can say the title is coming from this dot prop's 65 00:04:27,960 --> 00:04:29,290 dots Dreamcoat title. 66 00:04:29,550 --> 00:04:33,760 And then we can duplicate that same thing for our description property as well. 67 00:04:33,930 --> 00:04:38,260 Well I'm going to show you another way of handling this that's going to be just a little bit more concise. 68 00:04:38,460 --> 00:04:44,660 So I'm going to delete everything in between those curly braces and then at the very top of this file 69 00:04:44,840 --> 00:04:46,600 We're going to import load ash. 70 00:04:46,610 --> 00:04:50,930 Remember that is that helper library that we've been using quite a bit. 71 00:04:51,000 --> 00:04:56,160 So we're going to use a function from Lotus to basically just pick out the values or the properties 72 00:04:56,160 --> 00:05:01,560 from that stream object that we care about and that we actually want to pass down as initial values 73 00:05:01,560 --> 00:05:03,280 to our form. 74 00:05:03,300 --> 00:05:09,050 So back down at initial values right here I'm going to say underscore dot pick 75 00:05:11,960 --> 00:05:14,070 and then I'm going to put in my stream object. 76 00:05:14,240 --> 00:05:17,150 This dot props start Stream. 77 00:05:17,540 --> 00:05:22,190 And then I will put in a list of all the different properties that I want to essentially pull out of 78 00:05:22,190 --> 00:05:25,490 that object and pass down to initial values. 79 00:05:25,490 --> 00:05:29,350 So in our case we want to pick out title and description. 80 00:05:29,480 --> 00:05:36,160 And let me say this you can see the entire line very easily OK. 81 00:05:36,190 --> 00:05:40,600 Let's test this out very quickly and we'll take a look at a quick example of how pick works just in 82 00:05:40,660 --> 00:05:42,630 a little bit more greater detail. 83 00:05:42,640 --> 00:05:45,710 So I going to save this I'm going to flip back over. 84 00:05:45,880 --> 00:05:53,020 Now I'm back at my form right here and if I look at my redux dev tools and look at my state I can open 85 00:05:53,020 --> 00:05:54,900 up loops form again. 86 00:05:55,090 --> 00:06:00,130 I can look at my stream form I can look at values and I'll see that I only have the title and description 87 00:06:00,190 --> 00:06:02,460 loaded up into redux form. 88 00:06:02,500 --> 00:06:10,350 So now if I change these and submit the form again I see that my essentially kind of like change object 89 00:06:10,350 --> 00:06:16,050 right here only has the title and description no longer is my idea inside there no longer is the user 90 00:06:16,050 --> 00:06:16,990 ID inside there. 91 00:06:17,040 --> 00:06:21,720 It's only the properties that I actually changed inside the form. 92 00:06:21,720 --> 00:06:22,080 All right. 93 00:06:22,080 --> 00:06:25,970 So again we did that by making use of this pick function from loadout. 94 00:06:26,160 --> 00:06:30,180 So just really quickly I want to show you a quick example of what pick is really doing for us even though 95 00:06:30,430 --> 00:06:31,860 I mean you can probably imagine what it's doing. 96 00:06:31,860 --> 00:06:33,050 Let me give you a quick example. 97 00:06:33,060 --> 00:06:40,360 Nonetheless someone to do my favorite thing hearing and a pull up in that little code editor again there 98 00:06:40,360 --> 00:06:45,920 is the link to it if you want to follow along so inside if you're all put together some object like 99 00:06:45,920 --> 00:06:53,650 say profile and I'll give it a name of Sam and age of 18. 100 00:06:53,650 --> 00:06:56,370 And how about a favorite color. 101 00:06:57,670 --> 00:06:58,700 Of green. 102 00:06:59,110 --> 00:07:05,530 So now I can call underscore pic on profile and as the additional arguments into this thing I can list 103 00:07:05,530 --> 00:07:12,070 out the different properties that I want to pull out of this profile object so I can say name like so 104 00:07:12,400 --> 00:07:16,320 and you'll see that on a top right hand side I now get a new object returned. 105 00:07:16,480 --> 00:07:19,510 That has only the name property out of profile. 106 00:07:19,510 --> 00:07:23,340 This does not actually modify the profile object if I printout profile as well. 107 00:07:23,380 --> 00:07:25,910 You'll see that profile itself is completely unchanged. 108 00:07:26,200 --> 00:07:29,830 So profile creates a new object with de-listed properties. 109 00:07:30,250 --> 00:07:36,540 So I could add on a third argument here of age and now I get name of Sam an age of 18. 110 00:07:36,550 --> 00:07:41,890 So again we're doing the same exact thing inside of our form for our initial values right here we are 111 00:07:41,980 --> 00:07:46,350 just picking out the form values that we care about and that we want to actually edit inside that form. 112 00:07:47,140 --> 00:07:51,190 All right so I think that we probably get a good idea of what's going on here with the initial values. 113 00:07:51,190 --> 00:07:53,360 Now let's take a quick pause. 114 00:07:53,470 --> 00:07:58,030 When we come back the next section we're going to wrap up all this stream at stuff by making sure that 115 00:07:58,060 --> 00:08:04,150 our Samit callback right here comes the appropriate action at Kreator to actually edit and update our 116 00:08:04,150 --> 00:08:04,960 stream. 117 00:08:05,020 --> 00:08:07,120 So quick pause and I'll see you in just a minute.