1 00:00:01,080 --> 00:00:03,450 We can now save a new employee over to firebase. 2 00:00:03,450 --> 00:00:08,880 We just need to make sure that after we save a record successfully we kick the user back over to the 3 00:00:08,880 --> 00:00:14,370 employee list screen where they will eventually we'll see the new employee appear on the screen. 4 00:00:14,370 --> 00:00:19,400 Right now we also have a big red error message here that is telling us hey your action create or employed 5 00:00:19,410 --> 00:00:21,080 create isn't really following the rules. 6 00:00:21,090 --> 00:00:28,860 You're not returning an object with a type property on it to solve this issue we're going to use redux 7 00:00:28,860 --> 00:00:32,640 thunk again inside of this little bit inside of this action crate right here. 8 00:00:32,730 --> 00:00:36,830 Well we're going to use real stuff to kind of bend. 9 00:00:36,870 --> 00:00:38,660 Well let's break the rules this time. 10 00:00:38,670 --> 00:00:40,740 We're going to use it to break the rules. 11 00:00:40,800 --> 00:00:46,950 So with firebase we've got this data that we're pushing off to this remote reference right here and 12 00:00:46,980 --> 00:00:50,370 we don't really need a response back from firebase. 13 00:00:50,370 --> 00:00:52,230 Right like the data gets persisted. 14 00:00:52,230 --> 00:00:54,520 That's it we're happy we're done. 15 00:00:54,720 --> 00:00:59,640 When our employee list opponent comes together and we go and get that list of all the different employees 16 00:01:00,450 --> 00:01:05,260 the employee list is going to automatically update itself with the new employee that just get out it 17 00:01:05,370 --> 00:01:06,030 got added. 18 00:01:06,030 --> 00:01:11,500 So I'm trying to say is we don't really need to dispatch an action from this action create or at all. 19 00:01:11,640 --> 00:01:14,790 And we really don't need to send anything out we don't need to do anything with it. 20 00:01:14,820 --> 00:01:21,150 So that means we don't really need to return in action and we don't really need to wrap this with redux 21 00:01:21,150 --> 00:01:23,940 thunked for the sake of getting access to the dispatch method. 22 00:01:23,940 --> 00:01:27,320 We just kind of like want this thing to fade off into nothingness. 23 00:01:27,540 --> 00:01:34,320 So to make that happen we're going to pretend like we're going to use redux thunk but we're really not 24 00:01:35,850 --> 00:01:39,450 going to wrap this with a federal function like so. 25 00:01:39,450 --> 00:01:41,780 So now this will be called by redux thunk. 26 00:01:41,820 --> 00:01:47,220 Right so we're really satisfying the rules of redux thung here but we're not actually using the dispatch 27 00:01:47,220 --> 00:01:49,200 method or anything like that at all. 28 00:01:49,200 --> 00:01:50,720 So that's the idea. 29 00:01:51,120 --> 00:01:55,290 There is one more thing we need to do inside of your However we need to make sure that after an employee 30 00:01:55,290 --> 00:02:01,680 is successfully created we want to navigate them back to the employee list screen where they should 31 00:02:01,680 --> 00:02:03,920 see the new employee pop up. 32 00:02:04,020 --> 00:02:09,490 So to do so we can add on a dot then to this promise. 33 00:02:10,080 --> 00:02:15,780 And inside of that then we will call our actions object to remember the actions object from our routing 34 00:02:15,780 --> 00:02:19,010 library to navigate back to the employee list. 35 00:02:19,050 --> 00:02:23,990 So we've called actions dot employee list. 36 00:02:24,120 --> 00:02:26,940 We also need to make sure that we import actions at the top. 37 00:02:26,940 --> 00:02:35,970 So we'll go to the top and import actions from re-act native router flock's like so. 38 00:02:36,630 --> 00:02:36,870 OK. 39 00:02:36,870 --> 00:02:43,590 So again we are really breaking the rules of redux thunk here by exploiting the fact that we can return 40 00:02:43,590 --> 00:02:47,400 a function but we're not actually dispatching anything here at all. 41 00:02:47,430 --> 00:02:52,710 Just be really clear the reason I'm choosing to wrap this with a federal function at all is to get past 42 00:02:52,770 --> 00:02:55,100 this requirement of redux stuff. 43 00:02:55,950 --> 00:03:00,510 So it's a little bit dishonest but it definitely works out for us. 44 00:03:01,260 --> 00:03:02,780 OK. 45 00:03:03,780 --> 00:03:08,710 I think that we're all ready to give this thing a nice little test. 46 00:03:08,970 --> 00:03:13,070 So I will go ahead and refresh and then we will toss in an email. 47 00:03:13,080 --> 00:03:20,660 Test test dot com and password and then we will add new employees. 48 00:03:20,670 --> 00:03:28,980 So this time let's say we got Alex is out for four four and I'll go with Wednesday we'll create and 49 00:03:28,980 --> 00:03:31,960 then we get kicked back over to the employee less like so. 50 00:03:32,460 --> 00:03:34,680 Well this appears to work. 51 00:03:34,680 --> 00:03:36,890 There's just one little weird thing in here. 52 00:03:36,900 --> 00:03:42,930 You'll notice that when we got navigated over to the employee list we kind of added on to our stack 53 00:03:42,930 --> 00:03:47,220 of current views so we've got this back button here but that doesn't really suit what we're supposed 54 00:03:47,220 --> 00:03:47,820 to be doing here. 55 00:03:47,820 --> 00:03:48,440 Right. 56 00:03:48,450 --> 00:03:51,450 I don't want to go back to the employee creation form. 57 00:03:51,480 --> 00:03:57,980 I really should have gone back so to speak to the employee list in the first place. 58 00:03:58,050 --> 00:04:00,230 So there's two ways that we can handle this. 59 00:04:00,300 --> 00:04:09,840 We can either pass an additional argument to this employee list action right here of reset true or excuse 60 00:04:09,840 --> 00:04:10,090 me. 61 00:04:10,170 --> 00:04:13,770 I got that backwards type reset. 62 00:04:13,800 --> 00:04:14,990 There you go. 63 00:04:15,030 --> 00:04:20,910 So if we pass on an option of type reset that's going to tell our navigation library that we want to 64 00:04:20,910 --> 00:04:25,970 go to the employee list but don't treat it like it's a view that we're going to advance into. 65 00:04:25,980 --> 00:04:31,710 And so it could like you know press the back button to go to the previous one by passing and type reset. 66 00:04:31,710 --> 00:04:37,690 It means go to the employee list screen and just don't pretend like you know we can go back to the previous 67 00:04:37,690 --> 00:04:41,490 screen for just like reset the entire stack. 68 00:04:41,640 --> 00:04:42,920 So let's give this a test now. 69 00:04:45,990 --> 00:04:48,450 Go to test test again. 70 00:04:51,600 --> 00:04:53,100 We'll add a new employee. 71 00:04:53,430 --> 00:04:56,490 Let's see let's do John. 72 00:04:57,540 --> 00:04:59,220 And John has to work on Tuesday. 73 00:04:59,340 --> 00:05:03,680 Now create and get kicked back over to the employee list screen. 74 00:05:03,800 --> 00:05:04,980 This is exactly what we want. 75 00:05:05,010 --> 00:05:11,090 And this time we don't have a back button which is definitely the behavior that we want to have in here. 76 00:05:11,130 --> 00:05:13,430 We can also now go check out our firebase. 77 00:05:13,500 --> 00:05:18,570 If we want to just have a little bit of fun and you now see that for the currently authenticated user 78 00:05:18,930 --> 00:05:21,190 we have two additional employees in here. 79 00:05:21,210 --> 00:05:26,120 So I've now got Alex and John in here as well. 80 00:05:26,130 --> 00:05:26,730 All right. 81 00:05:26,790 --> 00:05:29,050 There is one last little thing that we need to do. 82 00:05:29,080 --> 00:05:31,310 One less thing that we need to think of. 83 00:05:31,320 --> 00:05:36,060 I've said several times that you know hey we don't we don't need to actually dispatch an action from 84 00:05:36,060 --> 00:05:36,590 here. 85 00:05:36,840 --> 00:05:38,350 Well maybe we don't. 86 00:05:38,580 --> 00:05:41,550 But I want you to see something a little bit interesting. 87 00:05:41,580 --> 00:05:43,820 We have now created a actual employee. 88 00:05:43,830 --> 00:05:44,030 Right. 89 00:05:44,030 --> 00:05:45,720 We just created one. 90 00:05:45,830 --> 00:05:51,750 I'm going to go back to the employee creation forum and when I go there you'll notice that very interestingly 91 00:05:52,170 --> 00:05:57,690 our form still has Jaun has the name and the phone number and shifting here as well. 92 00:05:57,950 --> 00:06:01,090 So that's pretty darn interesting. 93 00:06:01,530 --> 00:06:07,230 So it turns out that just because we happen to like save the data right we'd just be happy just because 94 00:06:07,230 --> 00:06:13,440 we created a new record over an firebase that does not automatically clear out all the state that is 95 00:06:13,440 --> 00:06:15,570 in our form reducer for us. 96 00:06:15,590 --> 00:06:20,520 Remember the form is going to show whatever data is sitting inside this reduce are being produced by 97 00:06:20,520 --> 00:06:27,420 this reducer just because we save it does not mean that that state gets automatically or magically cleared 98 00:06:27,420 --> 00:06:28,940 out in any fashion. 99 00:06:29,280 --> 00:06:34,920 So the instant that I go back to the form the form will still be populated with all of the existing 100 00:06:34,920 --> 00:06:36,880 state that we still had in there. 101 00:06:36,900 --> 00:06:39,590 So definitely a little bit unexpected. 102 00:06:39,720 --> 00:06:46,480 We can solve this by saying you know what maybe we do actually want to have an action in here. 103 00:06:46,560 --> 00:06:49,640 We do want to dispatch an action from this file. 104 00:06:49,730 --> 00:06:51,760 Or excuse me from this action creator. 105 00:06:52,050 --> 00:06:58,410 So maybe you will say that after we successfully create an employee we will not only navigate back to 106 00:06:58,410 --> 00:07:04,440 the employee list but we will also dispatch an action that will be responsible for resetting all of 107 00:07:04,440 --> 00:07:06,510 the fields in that form. 108 00:07:06,540 --> 00:07:12,660 So after we create the new user We will reset the form and navigate back to the employee list. 109 00:07:12,660 --> 00:07:14,480 I think that will be a reasonable approach. 110 00:07:14,490 --> 00:07:18,100 So let's go with that to build a dispatching action. 111 00:07:18,120 --> 00:07:23,820 We have to make sure that we receive the dispatch method inside this function right here so I'll add 112 00:07:23,820 --> 00:07:31,500 in dispatch and then in our dot then we will make sure that we not only navigate over to the employee 113 00:07:31,500 --> 00:07:40,140 list we will also dispatch an action let's say it'll be of type about employee creates and makes sense 114 00:07:42,010 --> 00:07:48,280 so we will watch for the type of employee create inside of our form reducer and the instant we see that 115 00:07:48,280 --> 00:07:52,000 type we will reset all the fields inside our form. 116 00:07:52,000 --> 00:07:57,200 So we need to make sure that we create this type so I can scroll up to the top when you get a semi-colon 117 00:07:57,250 --> 00:07:59,690 in there and I'll scroll to the top. 118 00:08:00,310 --> 00:08:08,110 We'll get our employee create and make sure that I add that type inside my type's file. 119 00:08:08,110 --> 00:08:17,230 So here is my types filed export Konst employee create. 120 00:08:17,570 --> 00:08:22,690 Then we can flip back over to our reducer as well and handle it inside of our form reducer. 121 00:08:22,700 --> 00:08:28,180 So we'll pull an employee create and then we'll add in the case for it as well. 122 00:08:28,190 --> 00:08:32,350 So case employee create a lot of employee rates all over the place. 123 00:08:32,840 --> 00:08:38,540 So now inside of our educe right here whenever we see this employee create message come across it means 124 00:08:39,020 --> 00:08:44,300 this user or excuse me this employee has successfully been created we can reset all the properties in 125 00:08:44,300 --> 00:08:51,680 the form or in this reducers So the next time the user looks at the form it'll be completely clear totally 126 00:08:51,680 --> 00:08:52,470 empty. 127 00:08:52,910 --> 00:08:56,740 So here we can just return initial state. 128 00:08:56,750 --> 00:09:00,410 We don't really have to do the DOT DOT DOT state or anything like that. 129 00:09:00,470 --> 00:09:06,010 We can just return the initial state here because we really just want to reset this thing back to how 130 00:09:06,020 --> 00:09:07,090 first existed. 131 00:09:09,180 --> 00:09:09,560 All right. 132 00:09:09,570 --> 00:09:18,520 So let's give this a shot now I will refresh the simulator do test test outcome. 133 00:09:20,060 --> 00:09:21,670 And what's a good name to use this time let's go. 134 00:09:21,690 --> 00:09:31,650 Nick about Nick Nick will also be 5:55 then he'll be on Thursday that will create this we get kickback 135 00:09:31,770 --> 00:09:36,630 to the employee list screen and then when I go back to the ad screen the form is completely empty again 136 00:09:36,900 --> 00:09:43,680 because my employee form inducer no longer holds a name phone or shift from when I just created Nick. 137 00:09:43,890 --> 00:09:45,600 So perfect just what we want. 138 00:09:46,050 --> 00:09:47,970 Let's continue in the next section.