xhr.js:178
POST https://sheltered-plateau-28195.herokuapp.com/api/form 503 (Service Unavailable)
(anonymous) @ xhr.js:178
e.exports @ xhr.js:12
e.exports @ dispatchRequest.js:57
Promise.then (async)
r.request @ Axios.js:51
r.(anonymous function) @ Axios.js:71
(anonymous) @ bind.js:9
(anonymous) @ Contact.js:43
r @ runtime.js:62
(anonymous) @ runtime.js:296
e.(anonymous function) @ runtime.js:114
r @ main.dfd2c54d.js:12166
(anonymous) @ main.dfd2c54d.js:12166
(anonymous) @ main.dfd2c54d.js:12166
e @ main.dfd2c54d.js:12171
value @ reactstrap.es.js:1139
o @ react-dom.production.min.js:15
invokeGuardedCallback @ react-dom.production.min.js:16
invokeGuardedCallbackAndCatchFirstError @ react-dom.production.min.js:16
c @ react-dom.production.min.js:20
d @ react-dom.production.min.js:22
m @ react-dom.production.min.js:22
p @ react-dom.production.min.js:21
v @ react-dom.production.min.js:24
g @ react-dom.production.min.js:24
qe @ react-dom.production.min.js:88
yr @ react-dom.production.min.js:222
J @ react-dom.production.min.js:44
Ve @ react-dom.production.min.js:89
br @ react-dom.production.min.js:223
He @ react-dom.production.min.js:89

createError.js:16 Uncaught (in promise) Error: Request failed with status code 503
    at e.exports (createError.js:16)
    at e.exports (settle.js:18)
    at XMLHttpRequest.d.(anonymous function) (https://sheltered-plateau-28195.herokuapp.com/static/js/main.dfd2c54d.js:1:121252)

import React, { Component } from 'react';
import image5 from '../images/5.jpeg';
import './Contact.css';
import Footer from './footer/Footer';
import { Button, FormGroup, Input, Form } from 'reactstrap';
import axios from 'axios';

class Contact extends Component {
  constructor() {
    super();

    this.state = {
        subject: '',
        name: '',
        email: '',
        message: '',
        leaveMsg: false
    };
    this.onHandleSubmit = this.onHandleSubmit.bind(this)
}

onHandleChangeEmail = (event) => {
    this.setState({
        email: event.target.value
    })
}

async onHandleSubmit(event) {
    event.preventDefault();
    const { subject, name, email, message } = this.state

    const form = await axios.post('/api/form', {
        subject,
        name,
        email,
        message
    })
}

render() {
    return (
        <div>
            <div>
                <img src={image5} alt="" className="contact-image"/>
            </div>

            <Form onSubmit={this.onHandleSubmit} >
                <div className="Contact-container">
                    <div className='col-md-8 push-md-2 col-lg-6 push-lg-3'>
                        <FormGroup>
                            <div className='row form-group'>
                                <div className='col-6'>
                                    <Input
                                        className='form-control'
                                        type="text"
                                        name="subject"
                                        placeholder="Subject"
                                        title="Provide your subject"
                                        value={this.state.subject}
                                        onChange={(event) => this.setState({subject: event.target.value})}
                                    />
                                </div>
                                <br/>
                                <div className='col-6'>
                                    <Input
                                        type="text"
                                        name="name"
                                        placeholder="Your name"
                                        title="Provide your name"
                                        value={this.state.name}
                                        onChange={(event) => this.setState({name: event.target.value})}
                                    />
                                </div>
                                <div className='col-6'>
                                    <Input
                                        className='form-control'
                                        name='formEmail'
                                        id='formEmail'
                                        type='email'
                                        placeholder='Your email address'
                                        title="Please provide your email address"
                                        onChange={this.onHandleChangeEmail}
                                    />
                                </div>
                            </div>
                        </FormGroup>
                        <FormGroup>
                            <Input
                                type="textarea"
                                name="text"
                                id="exampleText"
                                placeholder='What do you want to bark about?'
                                onChange={(event) => this.setState({message: event.target.value})}
                            />
                        </FormGroup>
                        <div className="submit-btn">
                            <Button type="reset">Reset</Button>
                            <Button onClick={this.onHandleSubmit} >Submit</Button>
                        </div>
                    </div>
                </div>
            </Form>
            <Footer />
        </div>
    )}
}
export default Contact

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const xoauth2 = require('xoauth2');
require('./services/passport');
require('dotenv').config();

const app = express();

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

require('./routes/authRoutes')(app);

if (process.env.NODE_ENV === 'production') {
// Express will serve up production assets like out main.js file, or main.css
file
    app.use(express.static('jacob-site/build'));

// Express will serve up the index.html file if it doesn't recognize the route
    const path = require('path');
    app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'jacob-site', 'build', 'index.html'));
});

    app.post('/api/form', (req, res) => {
        nodemailer.createTestAccount((err, account) => {
        const htmlEmail = `
            <h3>Contact Detail</h3>
            <h2>${req.body.subject}</h2>
            <ul>
                <li>Name: ${req.body.name}</li>
                <li>Email: ${req.body.email}</li>
            </ul>
            <h3>Message</h3>
            <p>${req.body.message}</p>
        `

        let transporter = nodemailer.createTransport("SMTP", {
            service: 'gmail',
            auth: {
                type: 'OAuth2',
                user: 'halo88520@gmail.com',

                // clientId: ENV['GOOGLE_CLIENT_ID'],
                clientId: process.env.GOOGLE_CLIENT_ID,
                // clientSecret: ENV['GOOGLE_CLIENT_SECRET'],
                clientSecret: process.env.GOOGLE_CLIENT_SECRET,
                // refreshToken: ENV['GOOGLE_REFRESH_TOKEN'],
                refreshToken: process.env.GOOGLE_REFRESH_TOKEN,
                // accessToken: ENV['GOOGLE_ACCESS_TOKEN']
                accessToken: process.env.GOOGLE_ACCESS_TOKEN
            }
        })

        let mailOptions = {
            // from: 'Johnny <test@gmail.com>',
            to: 'johnny88520@gmail.com', // Change to Jacob address
            subject: req.body.subject,
            replyTo: req.body.email,
            text: req.body.message,
            html: htmlEmail
        }

        transporter.sendMail(mailOptions, (err, info) => {
            if (err) {
                return console.log(err)
            }
            else {
                console.log('Message sent: %s', info.message)
                console.log('Message URL: %s', nodemailer.getTestMessageUrl(info))
            }
        });
    });
  });
}

GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
GOOGLE_REFRESH_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
GOOGLE_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx