1
00:00:00,480 --> 00:00:06,140
In the last video we started putting together our mailer class now between the last video and this one.

2
00:00:06,180 --> 00:00:11,460
I was just sitting here for a little bit and I realized that it might be a little bit challenging to

3
00:00:11,490 --> 00:00:14,500
understand exactly what the mailer does.

4
00:00:14,610 --> 00:00:19,430
If we just dive face first into it and start putting together it's internal implementation.

5
00:00:19,740 --> 00:00:24,120
So I'm thinking that maybe we need to first change gears just a little bit.

6
00:00:24,120 --> 00:00:30,270
Maybe we need to first kind of see where the mailer would be used inside of our application and see

7
00:00:30,270 --> 00:00:34,630
what type of data we would pass into it once we see what data we would pass in.

8
00:00:34,650 --> 00:00:41,850
Once we see some of exactly how we would make use of the mailer I think that what we do inside the mailer

9
00:00:41,850 --> 00:00:45,690
ourselves like the code we write in here will make a lot more sense.

10
00:00:45,690 --> 00:00:51,450
So right now I'm thinking we'll put a very temporary break or a quick pause on working on the mailer

11
00:00:52,090 --> 00:00:52,730
for now.

12
00:00:52,770 --> 00:00:56,940
We will imagine for just a second that it is 100 percent complete.

13
00:00:56,970 --> 00:01:01,450
Like let's just imagine that we sat down and finished all the code inside this thing.

14
00:01:01,830 --> 00:01:06,990
So let's imagine that it's all done and we now want to use it somewhere inside of our codebase.

15
00:01:06,990 --> 00:01:08,980
So let's go through that kind of process.

16
00:01:09,060 --> 00:01:15,020
And I think as we do it you'll get a better idea of exactly what we have to accomplish inside the mailer.

17
00:01:15,060 --> 00:01:18,680
So before we pretend that's going that it's going to be used anywhere.

18
00:01:18,810 --> 00:01:24,150
I do want to put an export statement at the bottom of this file so that we can actually import it into

19
00:01:24,150 --> 00:01:27,330
a different file and really truly pretend.

20
00:01:27,330 --> 00:01:29,970
Exactly how are we going to make use of it.

21
00:01:29,970 --> 00:01:33,790
So my first question to you is where do we want to use this mailer.

22
00:01:33,900 --> 00:01:35,530
Like we're inside of our project.

23
00:01:35,670 --> 00:01:38,310
Do we want to create and send a new mail.

24
00:01:38,670 --> 00:01:43,810
Well probably in the rat handler that we are just working on right inside of the routes survey redstart

25
00:01:43,850 --> 00:01:44,920
G-S file.

26
00:01:45,120 --> 00:01:47,070
We've got our route handler right here.

27
00:01:47,340 --> 00:01:51,980
Here's where it Kirt where we created our survey and we had said that right after we created our survey

28
00:01:52,260 --> 00:01:57,420
we would create an attempt to send an email and then immediately after that after the email was successfully

29
00:01:57,420 --> 00:02:00,780
sent we would save that survey to our database.

30
00:02:00,780 --> 00:02:06,720
So I think that we should require the mailer into this file and get a very solid a very clear example

31
00:02:06,930 --> 00:02:09,180
of how we might actually make use of it.

32
00:02:09,750 --> 00:02:15,630
So at the top of this file underneath our existing require statements I'm going to require in that mail

33
00:02:15,690 --> 00:02:18,440
mailer helper or the mailer class.

34
00:02:18,440 --> 00:02:26,620
So we'll say Konst Mailer is require dot dot slash services slash mailer like so.

35
00:02:27,200 --> 00:02:30,700
So now we'll scroll back down towards the bottom of our handler.

36
00:02:31,170 --> 00:02:36,380
Here's where we create our survey and we're going to imagine that right after we create our survey.

37
00:02:36,540 --> 00:02:43,380
Maybe right here would be a great place to send an e-mail OK.

38
00:02:43,840 --> 00:02:49,470
So the first thing I want to think about is exactly how do we send an email how do we create that mailer

39
00:02:49,480 --> 00:02:54,490
how do we use a class to somehow make something here and send off an email.

40
00:02:54,830 --> 00:03:00,550
Well anytime we use a class inside of javascript to create a new instance of a class or to create an

41
00:03:00,610 --> 00:03:03,980
object that represents an email that we want to send off to send grid.

42
00:03:04,210 --> 00:03:06,550
We always use the new keyword.

43
00:03:06,790 --> 00:03:15,290
So maybe right here we would say something like Konst Meilleur equals new Meyler like so.

44
00:03:15,490 --> 00:03:21,310
And then to customize exactly how the mailer gets set up to customize what content it shows to the user

45
00:03:21,310 --> 00:03:25,150
to customize who or what email addresses we're sending it to.

46
00:03:25,180 --> 00:03:29,490
We need to make sure that we pass it some amount of configuration as an argument.

47
00:03:29,530 --> 00:03:32,180
So remember we haven't wired this stuff up yet.

48
00:03:32,200 --> 00:03:37,270
I'm just kind of imagining to myself exactly how I would want to use this mailer object.

49
00:03:37,540 --> 00:03:43,060
So I'm going to assume that as a first argument to the mailer when I create a new instance of it I'm

50
00:03:43,060 --> 00:03:49,300
going to pass in some data that describes like the title of the email or maybe the subject line maybe

51
00:03:49,300 --> 00:03:54,380
I'll pass on something that specifies who the e-mail is from and so on.

52
00:03:55,180 --> 00:04:01,390
So to the mailer I'm going to pass in the entire survey object right now because that contains a lot

53
00:04:01,390 --> 00:04:06,580
of data that kind of specifies exactly what data or what e-mail we want to create and who we want to

54
00:04:06,580 --> 00:04:07,420
send it to.

55
00:04:07,420 --> 00:04:12,210
So let's just imagine for a second that we pass in the entire survey.

56
00:04:12,280 --> 00:04:17,150
Now the other thing we need to be aware of inside the survey is we need to or soon excuse me the mailer.

57
00:04:17,250 --> 00:04:18,610
The thing we need to be aware of.

58
00:04:18,790 --> 00:04:23,980
When you think about what content we actually want to sort of the user like what actual each T.M. should

59
00:04:23,980 --> 00:04:29,070
be displayed inside the email for that we need to think back to this diagram over here.

60
00:04:29,110 --> 00:04:35,320
So I've updated just a little bit to add on a couple extra or next extra step here to represent the

61
00:04:35,320 --> 00:04:36,380
template.

62
00:04:36,610 --> 00:04:42,370
So the template is going to be the thing that produces the actual body of the email the actual age T.M.

63
00:04:42,790 --> 00:04:47,680
that shows the user some amount of content when they open the email and sign their email client.

64
00:04:47,770 --> 00:04:53,950
So we're going to centralize all of this logic inside of a function that we're going to call the template

65
00:04:54,820 --> 00:05:00,190
we will receive some data into the template like maybe the body from the survey because remember we've

66
00:05:00,190 --> 00:05:05,930
been saying all along that the survey model contains the body of the email.

67
00:05:05,950 --> 00:05:11,500
So we said yes the survey will receive this body thing and that was give me the text to show inside

68
00:05:11,500 --> 00:05:12,840
the survey.

69
00:05:13,120 --> 00:05:18,490
So we're going to pass in survey body to his template function thing and then we're going to assume

70
00:05:18,550 --> 00:05:25,030
that the template should return some Each T.M. to assign to the body property of the mailer which will

71
00:05:25,030 --> 00:05:28,900
eventually be the actual body of the e-mail itself.

72
00:05:28,900 --> 00:05:33,730
So how about let's put together a template thing and get a slightly better idea of how that's going

73
00:05:33,730 --> 00:05:36,030
to work as well.

74
00:05:36,040 --> 00:05:40,030
So just to before we start that really quickly I want to mention we're going to assume that we're going

75
00:05:40,030 --> 00:05:45,880
to pass in the template or the H.T. male to use for the body of this e-mail as the second argument to

76
00:05:45,880 --> 00:05:46,600
it.

77
00:05:48,860 --> 00:05:50,630
So I'm going to pass in as the second argument.

78
00:05:50,630 --> 00:05:54,030
We're going to say template like so.

79
00:05:54,680 --> 00:05:58,760
So let's now create this template thing and get a better sense of exactly what it's going to look like

80
00:05:59,750 --> 00:06:04,640
since this is closer closely related to emails and closely related to my mailer.

81
00:06:04,640 --> 00:06:10,910
I'm going to make a new folder inside the services directory and I'm going to call it email templates

82
00:06:11,510 --> 00:06:15,800
so we all imagine that if we eventually have many different email templates inside of our application

83
00:06:16,160 --> 00:06:18,750
we'll place them all inside of this directory right here.

84
00:06:19,130 --> 00:06:24,380
Now inside this file folder I'm going to make a new file that's going to serve as the template for any

85
00:06:24,380 --> 00:06:26,650
survey email I send out.

86
00:06:26,660 --> 00:06:30,300
I'm going to call this thing survey template.

87
00:06:30,420 --> 00:06:32,140
Yes.

88
00:06:32,420 --> 00:06:36,840
Now inside of here we're going to define an export function.

89
00:06:36,890 --> 00:06:43,070
And whenever you call this function and we return some e-mail to be used as the body of any survey email

90
00:06:43,070 --> 00:06:45,070
that our application sends out.

91
00:06:45,080 --> 00:06:52,790
So at the very top we'll define and return an arrow function and and this thing is going to contain

92
00:06:52,880 --> 00:06:59,120
all the actual H.T. mail that will be displayed inside of any email we send out.

93
00:06:59,120 --> 00:07:02,670
So right now I think that we can start off pretty easy pretty straightforward.

94
00:07:02,780 --> 00:07:07,190
And once we get a better sense of how all this email stuff works we'll come back to the template and

95
00:07:07,190 --> 00:07:12,830
really kind of enhance its functionality over time so we'll add in a lot more markup over time.

96
00:07:12,830 --> 00:07:18,900
For right now I think that we can just return a string that will function as the body of the email.

97
00:07:19,010 --> 00:07:21,720
So the actual HVM of the email.

98
00:07:21,970 --> 00:07:23,500
So let's give it like just a div.

99
00:07:23,500 --> 00:07:27,850
How about that and we'll say hello there.

100
00:07:27,870 --> 00:07:30,500
Lexa OK.

101
00:07:30,560 --> 00:07:32,520
So that's a good place to start.

102
00:07:32,550 --> 00:07:38,490
Now we have said several times however that we want to make sure that we communicate some data from

103
00:07:38,490 --> 00:07:40,990
the survey model itself over to the template.

104
00:07:41,010 --> 00:07:45,780
So maybe we should kind of forge this link right here and assume that the template function will be

105
00:07:45,780 --> 00:07:47,010
called with a survey.

106
00:07:47,260 --> 00:07:53,250
So OK let's say that the survey is going to be passed in here and we'll say that we'll take the body

107
00:07:53,250 --> 00:07:57,340
property off the survey and show it inside the template.

108
00:07:57,630 --> 00:08:03,930
So I'm going to assume that we're going to receive the survey as an argument remember that our survey

109
00:08:04,020 --> 00:08:12,440
model has a body property and that is the actual body text that our user wants to show inside the email.

110
00:08:12,810 --> 00:08:17,100
So we'll take that property and we'll show it inside this div right here.

111
00:08:17,100 --> 00:08:23,700
So rather than saying hello there let's show a string and we'll just do some simple string concatenation

112
00:08:23,760 --> 00:08:29,020
and say serve a dot body like so OK.

113
00:08:29,050 --> 00:08:34,690
Now this would definitely be a good place to use a little bit of E.S. six string interpolation if you

114
00:08:34,690 --> 00:08:35,120
want to.

115
00:08:35,140 --> 00:08:37,780
We will come back later and refactor this to use that.

116
00:08:37,870 --> 00:08:41,460
But right now I'm thinking let's just keep things straightforward and easy.

117
00:08:41,590 --> 00:08:41,810
OK.

118
00:08:41,830 --> 00:08:47,730
So we've now got a function that takes a survey and returns a string that represents the actual age

119
00:08:47,810 --> 00:08:50,290
email that we want to show in the body of our email.

120
00:08:50,290 --> 00:08:51,850
So I think this is looking good.

121
00:08:52,150 --> 00:08:58,990
Let's now close out that file will import that survey template helper into our survey route's file at

122
00:08:58,990 --> 00:09:05,680
the very top and we'll make sure that we pass that along to our mailer so the top will now require in

123
00:09:06,280 --> 00:09:21,080
survey template it will require that from dot dot slash services email templates serve a template like

124
00:09:21,080 --> 00:09:21,360
so

125
00:09:25,050 --> 00:09:27,860
Snel survey template downside the mailer.

126
00:09:27,880 --> 00:09:30,400
So here's the mailer right here.

127
00:09:30,400 --> 00:09:33,400
We're going to say that this is not going to be this template we're going to say this is going to be

128
00:09:33,400 --> 00:09:35,860
specifically serve a template.

129
00:09:35,920 --> 00:09:42,340
We said that it was a function and we expect that function to be called with the survey object like

130
00:09:42,340 --> 00:09:44,480
so or the survey model.

131
00:09:45,240 --> 00:09:45,880
OK.

132
00:09:46,330 --> 00:09:50,520
So I know that this has been kind of a very huge leap of faith at this point.

133
00:09:50,530 --> 00:09:55,060
It's been a huge leap of faith but I wanted to make sure before we start to started to fill out any

134
00:09:55,060 --> 00:10:00,370
of the internal implementation side the mailer that you got a better sense of exactly how it would be

135
00:10:00,370 --> 00:10:02,340
used inside of our application.

136
00:10:02,350 --> 00:10:07,150
So at this point we are assuming that any time in our application that we want to send out an e-mail

137
00:10:07,540 --> 00:10:13,910
we're going to pass in some object that contains a subject property and a body property or something

138
00:10:13,930 --> 00:10:18,220
just a subject property really that's what we care about the subject property and the recipient's property.

139
00:10:18,220 --> 00:10:24,010
So the subject line to use for the e-mail and the people that send it to and then as a second argument

140
00:10:24,340 --> 00:10:30,010
will pass in the content of the actual e-mail like the body of the e-mail that each T.M. to show inside

141
00:10:30,010 --> 00:10:32,130
the the e-mail itself.

142
00:10:32,140 --> 00:10:37,240
So we now have a very definite method signature here for whenever we create a new mailer.

143
00:10:37,240 --> 00:10:40,990
First argument is going to be an object with subject and recipients.

144
00:10:41,080 --> 00:10:46,160
Second argument will be the age to e-mail to use inside the body of the e-mail.

145
00:10:46,210 --> 00:10:51,750
So we've now got a much better idea of what the mailer itself is going to look like.

146
00:10:51,790 --> 00:10:53,010
So let's take a quick break.

147
00:10:53,020 --> 00:10:57,490
We'll continue in the next section and we'll start to fill out the actual implementation of the mailer

148
00:10:57,490 --> 00:10:58,390
itself.

149
00:10:58,390 --> 00:11:00,020
So I'll see you in just a minute.