default.js

import React from 'react'
import Router from 'next/router'
import bucket from '../config'
import Page from '../components/page'
import PageNotFound from '../components/404'
import Header from '../components/header'
import Footer from '../components/footer'
import Nav from '../components/nav'
class DefaultPage extends React.Component {
  static async getInitialProps({ req, query }) {
    let slug = query.slug
    if (!slug)
      slug = 'home'
    let page
    try {
      const res = await bucket.getObject({ slug })
      page = res.object
    } catch(e) {
      page = {
        title: 'Page not found',
        component: '404'
      }
    }
    return { page }
  }
  handleSubmit(e) {
    e.preventDefault()
    const email = e.target.email.value
    const first_name = e.target.first_name.value
    const last_name = e.target.last_name.value
    var url = 'https://your-cosmic-function-endpoint-here.lambda.aws.com' // ADD YOUR ENDPOINT HERE
    var data = {
      to: 'your_email@gmail.com', // EDIT THIS TO YOUR EMAIL
      from: email,
      subject: `Contact form submission: ${first_name} ${last_name}`,
      text_body: `Contact form submission: ${first_name} ${last_name}`,
      html_body: `Contact form submission: <br /><b>${first_name} ${last_name}</b><br />${email}`
    }
    fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));
  }
  render() {
    return (
      <div>
        <Header page={ this.props.page }/>
        <div className="main">
          {this.props.page.component && this.props.page.component==='404' ? (
            <PageNotFound />
          ) : (
            <Page page={this.props.page} />
          )}
          <Nav />
          <form onSubmit={this.handleSubmit}>
            <div>
              <input type="email" name="email" placeholder="Email"/>
            </div>
            <div>
              <input type="text" name="first_name" placeholder="First Name"/>
            </div>
            <div>
              <input type="text" name="last_name" placeholder="Last Name"/>
            </div>
            <div>
              <button type="submit">Send Email</button>
            </div>
          </form>
        </div>
        <Footer />
      </div>
    );
  }
}

export default DefaultPage