1 00:00:00,780 --> 00:00:06,220 Our employee edit form is really coming along whenever a user clicks on the Save Changes button. 2 00:00:06,380 --> 00:00:11,930 We're going to run on button press and we have now verified that when we cancel log name phone and shift 3 00:00:12,260 --> 00:00:15,550 we get the updated values out of that form inducer. 4 00:00:15,800 --> 00:00:21,140 So all we have do now is replace this console log with an action creator that will actually save our 5 00:00:21,380 --> 00:00:23,130 new data after firebase. 6 00:00:23,180 --> 00:00:23,910 So let's do that now. 7 00:00:23,930 --> 00:00:29,150 We'll start off by writing the action creator all imported into this file we'll call it from on button 8 00:00:29,150 --> 00:00:32,870 press and then we'll test it all out inside the simulator. 9 00:00:32,870 --> 00:00:38,250 So Step 1 is going to be to open up my employee actions file. 10 00:00:38,420 --> 00:00:45,470 Now we've covered previously on how to create new records and firebase believer or not saving or I should 11 00:00:45,470 --> 00:00:48,180 say updating records is really just as simple. 12 00:00:48,320 --> 00:00:53,940 So we're going to form up a ref to the database and then instead of calling this push method right here 13 00:00:53,990 --> 00:01:00,410 which usually creates a new record we'll use what's called the set property and what it does is it updates 14 00:01:00,410 --> 00:01:01,100 information. 15 00:01:01,100 --> 00:01:02,880 So set is for updating. 16 00:01:03,050 --> 00:01:05,000 So see how that works in practice. 17 00:01:05,420 --> 00:01:09,700 At the bottom of my file I'm going to create a new action creator Randy Khalis. 18 00:01:09,770 --> 00:01:17,820 Employees say I don't expect employees it to be called with a name or phone. 19 00:01:18,130 --> 00:01:20,830 A shift and an ID. 20 00:01:21,200 --> 00:01:26,020 So that last last property of their idea this is the real key right here. 21 00:01:26,030 --> 00:01:32,660 Remember that in the case of saving or really you know updating an employee we are updating an existing 22 00:01:32,660 --> 00:01:33,150 record. 23 00:01:33,170 --> 00:01:37,850 So we have to be very explicit until firebase that we are attempting to you know like a this record 24 00:01:37,850 --> 00:01:41,330 over here the one with this idea this is the one that we are trying to update. 25 00:01:41,420 --> 00:01:46,670 So whenever we call this action creator we need to make sure that we specify the employee that we are 26 00:01:46,670 --> 00:01:47,910 trying to save. 27 00:01:48,000 --> 00:01:55,130 Or I should say update if I flip over to my firebase console just to be 100 percent clear you'll see 28 00:01:55,130 --> 00:02:02,900 that I have on users the first idea that's in here is my user ID that user has an employee's collection. 29 00:02:02,900 --> 00:02:07,100 And this is that you I.D. the idea of that very particular employee right here. 30 00:02:07,100 --> 00:02:10,720 So that's where that is coming from. 31 00:02:10,720 --> 00:02:11,200 All right. 32 00:02:11,200 --> 00:02:16,930 So as far as creating the ref to the database it's going to look very similar to the others. 33 00:02:16,930 --> 00:02:19,540 We're first going to need to get access to the current user 34 00:02:22,720 --> 00:02:29,760 like so I am pretty darn sure that this is going to be an asynchronous action creator again. 35 00:02:29,770 --> 00:02:33,900 So again I'm going to return a function because I know that I do. 36 00:02:33,930 --> 00:02:38,180 I'm not going to have anything to return right away from this from this action creator right. 37 00:02:38,200 --> 00:02:39,420 I don't know anything just yet. 38 00:02:41,160 --> 00:02:44,340 Then inside of here we'll form up our raft to our database. 39 00:02:44,340 --> 00:02:47,170 So firebase start database. 40 00:02:47,190 --> 00:02:49,990 RATH we're going to place our ticks. 41 00:02:50,030 --> 00:02:50,930 So we'll do slash. 42 00:02:50,930 --> 00:02:58,840 Users will designate the current users I.D. employees. 43 00:02:58,860 --> 00:03:00,480 And now here's the interesting part. 44 00:03:00,570 --> 00:03:04,740 We need to specify the exact record that we are trying to update. 45 00:03:04,770 --> 00:03:11,910 So usually before we were just saying like hey yeah go find that employees bucket and you know actually 46 00:03:11,940 --> 00:03:16,940 appear as a better example go find that employees bucket and push on the new record in their right just 47 00:03:16,940 --> 00:03:19,410 through a new record on top this time around. 48 00:03:19,410 --> 00:03:22,710 We are trying to update a very specific record. 49 00:03:22,830 --> 00:03:26,870 So in the ref we are pointing to a very specific record. 50 00:03:27,020 --> 00:03:35,040 I am pointing to the one with this very particular I.D. and once it's found I want to set some new number 51 00:03:35,040 --> 00:03:36,490 of properties on it. 52 00:03:36,540 --> 00:03:41,440 So we're going to set on there the name the phone in the shift. 53 00:03:41,850 --> 00:03:47,760 Finally right now I want to just do a count of log of saved. 54 00:03:47,760 --> 00:03:52,980 So after everything is done all the accounts log of saved and we'll call it get checks are in reality 55 00:03:52,980 --> 00:03:56,540 we're going to want to navigate back to the employee list screen. 56 00:03:56,550 --> 00:03:57,900 I think that would be a good idea. 57 00:03:58,020 --> 00:04:02,200 But right now we'll just kick to use or just a season we'll just do a console log. 58 00:04:02,670 --> 00:04:04,590 All right I think we're ready to do a up. 59 00:04:04,590 --> 00:04:09,250 Almost forgot one last thing we need to make sure that we actually call this action creator from somewhere. 60 00:04:09,360 --> 00:04:12,620 So I'm going to import it over into employee at it. 61 00:04:13,140 --> 00:04:16,370 So I'm going to flip over to employ it at the top. 62 00:04:16,380 --> 00:04:23,400 I've already got an import statement from my employee update action creator of Poland employees save 63 00:04:23,400 --> 00:04:24,030 as well. 64 00:04:25,800 --> 00:04:29,070 And then I'll hook it up to my component down inside the connector paper. 65 00:04:29,600 --> 00:04:32,950 I'll do a new line just to make things look nice. 66 00:04:33,000 --> 00:04:35,760 Here's employee save. 67 00:04:35,930 --> 00:04:43,410 And then finally inside of the button the button handler that is I can call this stop prop's dot employee 68 00:04:43,710 --> 00:04:44,530 save. 69 00:04:44,820 --> 00:04:49,500 And of course I need to pass and the modified name phone shift. 70 00:04:49,500 --> 00:04:50,570 And don't forget. 71 00:04:50,580 --> 00:04:51,930 Here's the really important one. 72 00:04:52,050 --> 00:04:54,880 The ID of the record that we are trying to update. 73 00:04:54,990 --> 00:05:00,070 So as you I.D. to pass and stopped Propst employee you I.D.. 74 00:05:00,420 --> 00:05:03,830 So this last little bit here and that that's the nasty part. 75 00:05:03,840 --> 00:05:06,120 Where did this employee come from. 76 00:05:06,120 --> 00:05:12,180 Remember when ever we come to employee at it the only way you can navigate this thing is by clicking 77 00:05:12,180 --> 00:05:15,340 or tapping pressing on an employee. 78 00:05:15,420 --> 00:05:23,280 And when you do that we have our event handler inside of our list item and the list item transitions 79 00:05:23,280 --> 00:05:27,860 us over to employee had it passing in that employee as a prop. 80 00:05:28,020 --> 00:05:30,090 So that is where this does start. 81 00:05:30,090 --> 00:05:35,130 Props don't employ you ideas coming from it is because whenever we come to this view we are specifying 82 00:05:35,130 --> 00:05:39,330 the very particular employee that we are trying to work on. 83 00:05:39,330 --> 00:05:39,630 All right. 84 00:05:39,660 --> 00:05:41,040 I think we are ready for a test here. 85 00:05:41,050 --> 00:05:47,690 It's going to save this all do a refresh. 86 00:05:47,830 --> 00:05:48,730 I will log in 87 00:05:53,500 --> 00:05:54,270 and here's. 88 00:05:54,290 --> 00:05:56,310 I deleted all my other employees. 89 00:05:56,330 --> 00:06:00,980 I want to have just one in here so that I can see the actual record that is going to get updated. 90 00:06:00,980 --> 00:06:08,220 So here's Jane all by her lonesome on tap and again all of Jane's attributes are pre-filled in the form. 91 00:06:08,240 --> 00:06:11,510 So Jane five five Monday is actually what I expect. 92 00:06:11,510 --> 00:06:12,830 Let's update her phone number. 93 00:06:12,850 --> 00:06:19,640 So she's got a new phone number and I expect her you know let's be really mean let's really to make 94 00:06:19,640 --> 00:06:23,150 scene work on Saturday to read from Jane. 95 00:06:23,670 --> 00:06:27,770 It's now going to click on see if changes are going to expect that this is going to make her request 96 00:06:27,830 --> 00:06:30,400 off to firebase update this record. 97 00:06:30,560 --> 00:06:35,510 And I should see a council log that just says something like Hey safety record looks good. 98 00:06:35,510 --> 00:06:40,520 So I click save changes we get the yellow flash over here which means some data has been updated. 99 00:06:40,550 --> 00:06:40,940 You'll see it. 100 00:06:40,940 --> 00:06:45,950 Now I've got the phone number of 4 4 4 4 4 and my shift is now on Saturday. 101 00:06:45,950 --> 00:06:47,230 Perfect. 102 00:06:47,270 --> 00:06:49,720 Let's see I want to do is verify that we got the concert log. 103 00:06:49,780 --> 00:06:50,150 Yup. 104 00:06:50,210 --> 00:06:50,720 Here it is. 105 00:06:50,720 --> 00:06:53,440 It says saved exactly what I expected. 106 00:06:53,510 --> 00:06:54,300 So it's perfect. 107 00:06:54,320 --> 00:06:55,780 We're working really well right now. 108 00:06:55,820 --> 00:07:00,500 I think the last thing that we need to do is make sure that we navigate the user back over to the employee 109 00:07:00,500 --> 00:07:01,460 list. 110 00:07:01,460 --> 00:07:03,610 Normally I would say let's do it in the next section. 111 00:07:03,620 --> 00:07:07,130 But in this case well you know it lets us handle this event along section. 112 00:07:07,130 --> 00:07:08,690 Let's take care of the next section. 113 00:07:08,780 --> 00:07:13,880 So scene a second we're going to navigate our users back over to the employee list after they successfully 114 00:07:13,880 --> 00:07:15,450 save the changes.