sending mails seems working now

package.json

@@ -86,6 +86,7 @@
     "jsonwebtoken": "^5.7.0",
     "koa": "^1.1.2",
     "koa-better-static": "^1.0.5",
+    "koa-bodyparser": "^2.2.0",
     "koa-favicon": "^1.2.0",
     "koa-onerror": "^1.3.1",
     "koa-proxy": "^0.5.0",

server/app.js

@@ -9,28 +9,33 @@ import zipcodes from './routes/zipcodes';
 import loadI18n from './i18n';
 import verifyJwt from './verify-jwt';
 import onerror from 'koa-onerror';
+import bodyParser from 'koa-bodyparser';
+import mandrillRouter from './routes/mandrill';
 
 export default class App extends KoaApp {
 
   constructor(...args) {
     super(...args);
     onerror(this);
 
+    if (process.env.MAILCHIMP_API_KEY === void 0) {
+      throw new Error(`Can't load MAILCHIMP_API_KEY from environment.`);
+    }
+
     this.use(serve('public'))
       .use(favicon('public/images/home/top-drawer-favicon.png'))
       .use(makeApiProxy())
       .use(makeElasticProxy())
+      .use(bodyParser())
       .use(zipcodes.routes())
       .use(zipcodes.allowedMethods())
+      .use(mandrillRouter(process.env.MAILCHIMP_API_KEY))
       .use(verifyJwt)
       .use(loadI18n)
       .use(renderReact);
   }
 
   start() {
-    if (process.env.MAILCHIMP_API_KEY === undefined) {
-      throw new Error(`Can't load MAILCHIMP_API_KEY from environment.`);
-    }
     const port = process.env.LISTEN_PORT ? Number(process.env.LISTEN_PORT) : 4045;
 
 

server/routes/mandrill.js

@@ -0,0 +1,39 @@
+import makeRouter from 'koa-router';
+import { Mandrill } from 'mandrill-api/mandrill';
+
+function *sendMessage(mandrillClient, params) {
+  return new Promise((resolve, reject) => {
+    mandrillClient.messages.send(params, result => {
+      resolve(result);
+    }, error => {
+      const err = new Error(error.message || error);
+      reject(err);
+    });
+  });
+}
+
+export default function mandrillRouter(apiKey) {
+  const mandrillClient = new Mandrill(apiKey);
+
+  const router = makeRouter()
+    .post('/api/node/mandrill', function*() {
+      const { message } = this.request.body;
+
+      let async = false;
+      let ip_pool = "Main Pool";
+      let send_at = "example send_at";
+
+      console.log("WE ARE SENDING!");
+      yield sendMessage(mandrillClient, {
+        'message': message,
+        'async': async
+      });
+
+      this.body = {};
+    });
+
+  return router.routes();
+}
+
+
+

src/pages/custom/custom.jsx

@@ -8,45 +8,33 @@ import styles from './custom.css';
 import { Form, FormField } from 'ui/forms';
 import { TextInput } from 'ui/inputs';
 import Button from 'ui/buttons';
-import mandrill from 'mandrill-api/mandrill';
+import { api } from 'lib/api';
 
 type State = {
-  mandrill_client: any
+  name: string,
+  email: string,
+  message: string,
 }
 
 class Custom extends Component { 
-  state: Props;
-
-  //const mandrill_client = 
-  componentWillMount() {
-    console.log("Our Key:" + process.env.MAILCHIMP_API_KEY);
-    this.setState({
-      mandrill_client: new mandrill.Mandrill(process.env.MAILCHIMP_API_KEY)
-    });
-  }
+  state: State = {
+    name: '',
+    email: '',
+    message: '',
+  };
 
   @autobind
   sendCustomEmail() {
-    let message = {
-      "html": "<h2>TopDrawer Custom Sock Request</h2><p>The details are below.</p>",
-      "text": "Top Drawer Custom Sock Request.  The details are below.",
-      "from_email": "[email protected]",
-      "to": "[email protected]"
-    }
-
-    let async = false;
-    let ip_pool = "Main Pool";
-    let send_at = "example send_at";
-
-    console.log("WE ARE SENDING!");
-    this.state.mandrill_client.messages.send({
-      "message": message, 
-      "async": async
-    }, function(result) {
-      console.log(result);
-    }, function(e) {
-      console.log('A mandrill error occured:' + e.name + ' - ' + e.message);
-    })
+    const message = {
+      'html': this.state.message,
+      'from_email': this.state.email,
+      'to': [{
+        email: '[email protected]',
+        name: 'Adil Wali'
+      }]
+    };
+
+    api.post('/node/mandrill', { message });
   }
 
   get topBanner(): HTMLElement {
@@ -78,6 +66,14 @@ class Custom extends Component {
     );
   }
 
+  @autobind
+  handleFormChange(event) {
+    const { target } = event;
+    this.setState({
+      [target.name]: target.value,
+    });
+  }
+
   get reachOut(): HTMLElement {
     return (
       <div styleName="reach-out">
@@ -92,24 +88,24 @@ class Custom extends Component {
           </p>
         </div>
         <div styleName="custom-contact-form-container">
-          <Form styleName="custom-contact-form">
-            <FormField styleName="text-field">
-              <TextInput required
+          <Form styleName="custom-contact-form" onSubmit={this.sendCustomEmail} onChange={this.handleFormChange}>
+            <FormField styleName="text-field" required>
+              <TextInput
                 name="name" placeholder="FIRST & LAST NAME" 
               />
             </FormField>
-            <FormField styleName="text-field">
-              <TextInput required
+            <FormField styleName="text-field" required>
+              <TextInput
                 name="email" placeholder="EMAIL ADDRESS" 
               />
             </FormField>        
-            <FormField styleName="text-field">
-              <textarea required
+            <FormField styleName="text-field" required>
+              <textarea
                 name="message" placeholder="TELL US ABOUT YOUR CUSTOM SOCK NEEDS!" 
               />
             </FormField>
             <div styleName="submit-container">
-              <Button styleName="custom-contact-submit" type="submit" onClick={this.sendCustomEmail}>SUBMIT</Button>
+              <Button styleName="custom-contact-submit" type="submit">SUBMIT</Button>
             </div>
           </Form>
         </div>