In the last video we set up our cent. API keys and we also set up the send grid.
No J.S. module the no class module authored by said it is all about helping us create our Meilleur object
and send it off to the send grid API.
Remember send grid is our e-mail provider.
They are the people who are going to actually send e-mails out to our users.
Now we've spoken about the mailer a little bit so far in this video we're going to continue by starting
to put this mailer together.
Now I gotta tell you right now just a little bit of a disclaimer I'm going to tell you right now the
Meilleur code there we're going to work on in this video in the next couple is some of the more complicated
logic that we're going to have inside this course and maybe even saying complicated isn't the best way
of putting it.
Maybe I'll just say there's going to be a lot of code inside this Meilleur object that we take essentially
helper's from that said grinde module.
And so there's going to be a lot of stuff where it looks like we're just pulling these functions out
of thin air.
In reality they're all coming from second grade.
Now I tell you this not to scare you off but just to let you know there's going to be just a little
bit of kind of interesting stuff going on here and at the end of the day if you are curious what's happening
or what's going on inside the.
A lot of the time the answer to your question is really just going to be this is what sand grid wants
us to do for better or for worse.
OK.
So with that in mind I least want to give you a little bit of guidance on exactly what's going to go
on inside this mailer.
So I need to make sure I always do my best job to inform you about what's going on.
So this big old box right here represents our Meilleur object.
We are going to set up this mailer as in six or as 2015 javascript class.
So whenever we want to create a new email and send it out to people we will import this class or will
it required in one of our route files we will create a new instance of the mailer will customize it
in some fashion and then we will somehow send it off to the outside world.
And so some of the code that we write around the mailer is going to make it look a little bit like a
reactive component because you're going to see stuff like the classic keyword and the constructor method
and all that kind of good stuff too.
I guess that's kind of what's going to go on inside the mailer or at least how it's overall going to
be architected it's going to be a class.
And then inside of there we're going to do a couple of different setup of a few different properties.
So these are the different properties that we're going to have to send a set up in order to send this
e-mail out.
First off we have to specify the subject of the e-mail.
This one's obvious right.
Every e-mail me needs a subject so we need to make sure that we set the subject of the e-mail.
This subject is going to come directly from our survey model which we've already created inside of our
file our mailer also needs to know what e-mails it needs to be sent to.
So essentially the list of recipients.
Now we've already created this list of recipients we're already dealing with them a little bit inside
of our survey model instance.
And so the list of recipients inside the mailer is going to come from our survey object as well.
Next the body of that e-mail.
So the actual text that goes inside of it.
Remember this is where that outside template comes in.
We had said that the template.
And let's find a diagram for it really quick.
It's buried in here somewhere right here.
So it said that the e-mail template is what's actually providing the HVM l body of the email.
The stuff that users actually see when they open up the e-mail.
So to make sure that we put the Krutz content inside the template we're going to pass in a property
two or two from the survey model into the template.
The template is going to produce some each email that's going to display as the body of the email.
And so we're then going to take that template and pass it in as the body property to our mailer.
Finally we need to specify a from e-mail.
Now this one's a little bit tricky.
OK.
The from e-mail is the e-mail that will be the e-mail address that will be displayed on the From field
inside of our e-mails.
So in other words we're never an end user gets one of these survey e-mails.
There has to be some From address in there right something that says hey this e-mail is sent from X
Y Z.
And so we need to make sure that we set some default e-mail inside of there.
Now after we set all these different properties up we're going to call a function on the mailer object
called to Jaison.
So remember the mailer represents the actual e-mail.
It's the thing that we actually want to send off to send grid.
So after we've set up all these different properties we're going to call this to Jason function which
takes all the different configuration all the different we've set up we've done inside the mailer.
It's going to turn it all into some data and we're going to take that song and send it off to send grid
to actually author and send out our e-mail.
OK.
So again this is going to be a little bit of a tricky practice.
You know give me a lot of code flying around here.
But I've got great faith that we can definitely pull it off and certainly understand what's happening
along the way.
So with all this in mind let's get started right now.
You know hey why wait.
All right let's start right now.
We're going to change on over to my code editor and I'm going to find my services directory.
Now we previously put one single service into this directory the passport service and so that was all
about setup and configuration of passport.
We're now going to create a new file inside of the services directory called Meilleur Dot.
Yes.
And so I view e-mail as another service to my application or another kind of discrete unit of logic.
You might also see some other applications split off e-mail to a completely separate directory if you
want to take that approach.
That's totally fine but to me again I really view e-mail as another service to the application.
And so I like to stuff all the email logic into my services directory.
Now again you'll notice our naming convention throughout our project coming into play here.
Meilleur has a capital M because exports a class passport has a lower case P because it doesn't actually
export anything at all.
OK.
Now inside of Meilleur J.S. we're going to first require in the send grade module that we just installed
at the very top.
So we'll say Konst said grid is require send grid like so we're going to immediately pull a property
off of this sand grid object it call this helper will say send grid and this helper property right here
is going to be coming from said grid dot mail.
Now traditionally we would use 60 structuring for something like this right here right.
We are really just taking a property off of the send grid object and assigning it to a variable called
helper.
So we could have just as easily done something like mail like this if we had wanted to call this property
mail.
But really I want to call it helper because that's kind of convention throughout all the send great
documentation they usually refer to this thing as helper because it's a Helper Object that helps us
create the Meyler.
Now immediately after this we're also going to import in our API key from our keys file which exists
inside of our config directory as you might imagine.
Yes we are going to eventually send email from inside of this mailer J.S. file.
So we need our API key that we just wired up from grid.
So then at the very top for now we'll just import the keys file and then we'll worry about how we use
it later on.
I just want to have it imported or required and done with for now.
So we'll say Konski is require up one directory config slash keys like so.
OK so now the very last step inside this section at least we're going to set up our mailer class.
So again I want you to think of this thing as kind of being set up like a re-act component and you'll
see why in just a second we're going to say class Meilleur extends helper Daut capital in mail like
so.
OK.
So what's going on here.
So the helper Daut capital in mail property is an object that takes a lot of configuration and spits
out a mailer.
We want to take that mailer class or that male class right here and we want to add onto it.
We want to provide some additional customization to it.
So we are setting up a class called Maler.
This is something we are creating and we are extending the male class provided inside of this and grade
library.
So now our mailer object right here our class of Meilleur it now contains a bunch of functionality and
a bunch of code in a bunch of setup that is closely tied or inherited so to speak from this mail object
right here.
So again remember react when we're looking at this and react.
We create our own custom component and it extends the component base class from the reactivates library
when we extend that base class we get a bunch of free functionality from the re-act library added into
our new customize subclass.
OK.
So again a little bit of advanced javascript here.
But just remember.
Think back to react.
We can treat this just like a normal reactive component in terms of syntax and set up and all that kind
of good stuff.
OK.
So I think that's enough set up for this section.
Let's take a quick break.
When we come back in the next section we're going to start to set up a couple of these different properties
so I'll see you in just a minute.