1 00:00:00,660 --> 00:00:05,190 We are now able to send e-mails to our users and the email that we're sending out actually looks you 2 00:00:05,190 --> 00:00:08,900 know reasonably good something that we can at least move forward with. 3 00:00:08,910 --> 00:00:11,610 However there are still many rough edges to our application. 4 00:00:11,760 --> 00:00:16,530 So we still have a lot of polish to do on our back end before we move over to the rock side and allow 5 00:00:16,530 --> 00:00:18,990 users to create surveys over there. 6 00:00:19,020 --> 00:00:21,210 So let's review our flow at this point. 7 00:00:21,210 --> 00:00:24,630 We have created a new survey instance inside of our handler. 8 00:00:24,780 --> 00:00:28,740 We then attempt to create and send an email through our mailer. 9 00:00:28,740 --> 00:00:33,630 We do need to still in at times still add in some air checking code but after we do that we need to 10 00:00:33,630 --> 00:00:39,360 make sure that we save the survey to our database and then eventually respond from the handler. 11 00:00:39,360 --> 00:00:43,650 Now there's one other step inside of here as well that I forgot to mark on the diagram and that is to 12 00:00:43,650 --> 00:00:49,260 make sure that we subtract 1 credit from our users after the survey is successfully sent out. 13 00:00:49,260 --> 00:00:52,770 So remember we're charging users for this after we send the survey. 14 00:00:52,770 --> 00:00:54,580 We're going to build the money. 15 00:00:54,720 --> 00:00:59,400 So let's flip on over to our handler and make sure we take care of all these extra steps in there as 16 00:00:59,400 --> 00:01:00,450 well. 17 00:01:00,500 --> 00:01:06,420 I'm going to open up my code editor or find my routes survey routes file and then just for reference 18 00:01:06,480 --> 00:01:12,410 I'm also going to open up my services mailer J.S. file as well. 19 00:01:12,670 --> 00:01:17,960 Back inside Servais routes I'll scroll on down towards the bottom where we have our mailer sent. 20 00:01:18,010 --> 00:01:22,990 So I think that the first thing that we need to do inside of here is make sure that after we successfully 21 00:01:22,990 --> 00:01:28,780 send out this mailer right here we then take the survey that we created and we call save on it to save 22 00:01:28,780 --> 00:01:30,450 it to our database. 23 00:01:30,460 --> 00:01:36,630 Now one quick thing one quick thing to keep in mind when we called Meilleur does send right here. 24 00:01:36,700 --> 00:01:38,670 This isn't a sync function. 25 00:01:38,800 --> 00:01:44,380 And so we have to wait for the API request inside of it to conclude or for that mailer to be sent off 26 00:01:44,380 --> 00:01:46,010 to send grid. 27 00:01:46,120 --> 00:01:52,990 Before we go ahead and send the survey so mailer does send is in a sync function and we want to make 28 00:01:52,990 --> 00:01:58,710 sure that we kind of pause and say Hey wait for this thing to finish what it's doing before going onto 29 00:01:58,750 --> 00:02:00,060 the next line of code. 30 00:02:00,160 --> 00:02:05,780 So we need to not only mark the mailer send function which is down here right here. 31 00:02:05,920 --> 00:02:11,540 We need to not only mark this as being a sink but we also need to mark our route handler as being a 32 00:02:11,680 --> 00:02:15,900 as well because it's also going to contain some asynchronous code. 33 00:02:15,970 --> 00:02:22,780 So inside of our row handler will find the actual aero function that we passed in to abduct post. 34 00:02:22,810 --> 00:02:28,230 Here it is way far over here and I'm going to make sure that I mark this thing as being async as well. 35 00:02:30,170 --> 00:02:36,440 Now down at the very bottom of the handler we can successfully mark this thing as being a sync by saying 36 00:02:36,500 --> 00:02:38,440 a weight right in front of it. 37 00:02:38,450 --> 00:02:43,940 So before we start to do any saving or of any surveys or anything like that down here make sure that 38 00:02:43,940 --> 00:02:49,400 the async code inside of Meilleur don't send is completed as well. 39 00:02:49,400 --> 00:02:54,640 Now one quick thing one quick thing that we kind of neglected to do inside the send function we did 40 00:02:54,650 --> 00:03:00,020 Mark send is being async and we've got the key word right here but we forgot to mark any individual 41 00:03:00,020 --> 00:03:02,630 request in here with the a wait keyword. 42 00:03:02,660 --> 00:03:03,590 Completely my mistake. 43 00:03:03,590 --> 00:03:05,280 I completely forgot about it. 44 00:03:05,330 --> 00:03:08,840 So this send off to the API right here at the request. 45 00:03:08,930 --> 00:03:11,330 This is the actual API request right here. 46 00:03:11,330 --> 00:03:15,520 So we're going to make sure that we put the a weight key word in front of that line like so. 47 00:03:16,550 --> 00:03:24,050 OK so now when we call Meilleur don't send send will be executed and this overall request handler is 48 00:03:24,050 --> 00:03:29,810 just paused not truly paused remember remember the way that there still promises behind the scenes here 49 00:03:29,840 --> 00:03:31,000 stuff is still happening. 50 00:03:31,190 --> 00:03:37,090 But we can kind of imagine that the overall handler is paused when this line of code hits the Meilleur 51 00:03:37,100 --> 00:03:40,740 don't send function is then executed the request is created. 52 00:03:40,820 --> 00:03:42,190 The request is sent out. 53 00:03:42,380 --> 00:03:45,880 And then this send function pauses as well. 54 00:03:46,460 --> 00:03:53,750 After we get a response back from the API control then flows back to the handler and we progressed past 55 00:03:53,840 --> 00:04:00,200 this line right here so we can kind of stack up a sync awaits in async await statements like this to 56 00:04:00,200 --> 00:04:06,260 make sure we have some kind of enhanced control flow as we start to call helper functions that are themselves 57 00:04:06,340 --> 00:04:08,050 async away as well. 58 00:04:08,660 --> 00:04:15,200 OK so after we take care of sending out the mailer after we have sent it out and we've now finished 59 00:04:15,200 --> 00:04:21,740 the request off to the send grid API we can then immediately after save our survey. 60 00:04:21,980 --> 00:04:27,410 So we're going to save our survey to a database by calling survey dog safe. 61 00:04:27,410 --> 00:04:31,790 Again this is an asynchronous function as well and we want to wait for the entire thing to finish before 62 00:04:31,790 --> 00:04:34,760 we attempt to do anything else inside the request handler. 63 00:04:34,760 --> 00:04:38,110 So we will also mark this as being an asynchronous operation. 64 00:04:38,280 --> 00:04:45,680 I'll say a weight survey that's safe and then after this we want to deduct 1 credit from our user and 65 00:04:45,680 --> 00:04:48,900 then save our user as well. 66 00:04:49,010 --> 00:05:03,100 So we'll say rec dot user dot credits Linus equals one we will then save our user as redcoat user save 67 00:05:04,000 --> 00:05:07,480 We'll mark this as being async as well. 68 00:05:07,540 --> 00:05:13,270 And then remember whenever we save the user on our request object we can now consider this user right 69 00:05:13,270 --> 00:05:15,180 here to be Stael so to speak. 70 00:05:15,220 --> 00:05:21,400 And so from this point on through our request handler we will use the user model that has returned from 71 00:05:21,400 --> 00:05:23,010 the Save operation. 72 00:05:23,410 --> 00:05:28,060 So whenever we do this save this will be eventually resolved with our user and this is going to be the 73 00:05:28,060 --> 00:05:31,790 user that we use from now on. 74 00:05:31,790 --> 00:05:37,910 So then at the very bottom we'll send back the updated user model. 75 00:05:38,240 --> 00:05:43,010 We're going to send back the updated user model right here to specifically indicate like hey here is 76 00:05:43,010 --> 00:05:48,510 the new value of credits just in the same way that we handled the credit EDITION earlier on. 77 00:05:48,530 --> 00:05:53,750 Remember whenever a user pays us some money we send back the user model with the updated number of credits. 78 00:05:53,870 --> 00:05:57,980 We do that so that the header inside of our application will automatically update. 79 00:05:58,010 --> 00:06:02,990 So by sending back the user here as well we can make sure that we catch this updated user model inside 80 00:06:02,990 --> 00:06:07,230 of our author reducer and get the header number of credits to update as well. 81 00:06:07,730 --> 00:06:08,060 OK. 82 00:06:08,060 --> 00:06:08,990 So this is looking good. 83 00:06:08,990 --> 00:06:14,090 One last thing to do we need to make sure that we have some amount of error handling inside of here. 84 00:06:14,180 --> 00:06:16,880 So there's a lot of places where things could go wrong. 85 00:06:16,880 --> 00:06:24,260 We could accidentally send out a mailer that doesn't make it over Sangar it maybe says hey it looks 86 00:06:24,260 --> 00:06:28,690 like something's wrong maybe something is wrong with the survey maybe something's wrong with the user. 87 00:06:28,700 --> 00:06:34,310 So there's a lot of places where something can go that try catch syntax that we always use with the 88 00:06:34,310 --> 00:06:40,160 async await key words to watch these three await keywords and say hey if anything goes wrong with these 89 00:06:40,160 --> 00:06:45,130 three async statements just catch the request and immediately send back a response. 90 00:06:45,200 --> 00:06:55,350 So I'm going to wrap all this stuff inside of a try block like so if anything goes wrong we will catch 91 00:06:55,350 --> 00:07:01,620 the air and then we will immediately send a response back to the user. 92 00:07:01,620 --> 00:07:05,770 Now in this case the status that we'll use here is a little bit ambiguous. 93 00:07:05,780 --> 00:07:09,690 There's a lot of different things that can go wrong but we are in general are just going to assume that 94 00:07:09,690 --> 00:07:14,630 the user might have sent us a poorly formed survey or something like that. 95 00:07:14,670 --> 00:07:20,880 So we will say status 4:22 which means an process on process Sipple entity which in other words means 96 00:07:21,090 --> 00:07:23,280 something is wrong with the data you sent us. 97 00:07:23,280 --> 00:07:28,020 So we're going to tell the user hey you did something wrong and we will just send back the entire error 98 00:07:28,020 --> 00:07:30,290 message like so. 99 00:07:31,190 --> 00:07:31,650 OK. 100 00:07:31,680 --> 00:07:33,980 So this is looking pretty good. 101 00:07:34,140 --> 00:07:36,560 I think that we're ready for one more test out. 102 00:07:36,570 --> 00:07:42,240 So once we test this stuff will then be able to verify and say OK did we create a survey inside of our 103 00:07:42,240 --> 00:07:42,930 database. 104 00:07:42,930 --> 00:07:46,750 Did the number of credits get deducted all that kind of stuff. 105 00:07:46,770 --> 00:07:49,410 So let's check our terminal make sure nothing's going wrong over here. 106 00:07:49,470 --> 00:07:50,260 Looks good. 107 00:07:50,550 --> 00:07:53,900 I'll flip back over to my re-act application. 108 00:07:54,000 --> 00:07:55,830 I don't need to refresh the reac side. 109 00:07:55,830 --> 00:08:00,870 I can just immediately make another post request over to X-ers with the same survey that we were using 110 00:08:00,870 --> 00:08:02,190 previously. 111 00:08:02,190 --> 00:08:08,730 So I'm going to clear up my request log will send the survey and I get back a status 200 that contains 112 00:08:08,730 --> 00:08:10,730 the updated user inside of here. 113 00:08:10,740 --> 00:08:17,100 You'll see that we now have nine credits because we just used one credit to update or to send out that 114 00:08:17,100 --> 00:08:18,040 new survey. 115 00:08:18,420 --> 00:08:23,070 If I go over to my Gmail account you'll see that I've now got a new e-mail over here. 116 00:08:23,070 --> 00:08:27,540 So here's the second survey that we just followed up with. 117 00:08:27,540 --> 00:08:30,670 And then we can also go back over to our lab database. 118 00:08:30,810 --> 00:08:32,690 You might not have any lab open anymore. 119 00:08:32,720 --> 00:08:37,740 Soooo if you want to pause the video pull up in lab but you can just look at mine and you know hey confirm 120 00:08:37,740 --> 00:08:40,080 or get a good idea of what happened. 121 00:08:40,080 --> 00:08:47,280 So if I now refreshed my database we should see that first survey appear inside of our surveys collection. 122 00:08:47,280 --> 00:08:49,800 So here's our brand new surveys collection. 123 00:08:50,040 --> 00:08:55,190 If I look into it I will see my survey right here. 124 00:08:55,710 --> 00:08:58,080 So I should be able to kind of zoom in on this. 125 00:08:58,080 --> 00:08:58,740 Here we go. 126 00:08:58,770 --> 00:09:01,540 So I've got the title to survey the subject the body. 127 00:09:01,710 --> 00:09:03,960 Here's the link to the user who owns it. 128 00:09:03,990 --> 00:09:05,620 Here's the date that it was sent. 129 00:09:05,700 --> 00:09:07,060 The number of clicks on it. 130 00:09:07,170 --> 00:09:14,040 And then here is my sub document collection every sub document inside of the recipient list has the 131 00:09:14,100 --> 00:09:14,980 email property. 132 00:09:15,030 --> 00:09:17,300 So here's the e-mail of the recipient. 133 00:09:17,550 --> 00:09:23,600 Here's the idea of this very particular sub document and the responded property as well. 134 00:09:24,030 --> 00:09:24,830 Awesome. 135 00:09:25,230 --> 00:09:27,570 So looks like we are on a great track here. 136 00:09:27,570 --> 00:09:30,060 It looks like everything is starting to come together. 137 00:09:30,090 --> 00:09:35,730 Let's continue in the next section where we're going to kind of go back to the grid API and figure out 138 00:09:35,790 --> 00:09:39,400 a little bit more on the klick tracking side of things specifically. 139 00:09:39,420 --> 00:09:45,720 I just want to make sure that said grid is aware of who is clicking on these emails whenever someone 140 00:09:45,720 --> 00:09:47,910 clicks on yes or no inside them. 141 00:09:47,970 --> 00:09:50,910 So let's take a quick break and continue in the next section.