Enable email form, fixes #2

* Supports Subscriber model on Apollo Server

* Better Error Handling on Apollo Server

* Adds FormSubscribe Component

* Minor fixes

* Fix merge

* Fixes after code review

* Fix formatting

* Support for onSubmit

Author: Malek Hakim

.eslintrc

@@ -6,7 +6,7 @@
   "extends": "airbnb",
   "parser": "babel-eslint",
   "rules": {
-    "semi": 0,
+    "semi": ["error", "never"],
     "no-unused-vars": 0,
     "arrow-body-style": 0,
     "react/jsx-filename-extension": 0,

components/SubscribeForm.js

@@ -0,0 +1,94 @@
+import React, { Component, PropTypes } from 'react'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+import RaisedButton from 'material-ui/RaisedButton'
+import Dialog from 'material-ui/Dialog'
+import FlatButton from 'material-ui/FlatButton'
+import Email from './email'
+
+class SubscribeForm extends React.Component {
+  static propTypes = {
+    mutate: React.PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.onSubmit = this.onSubmit.bind(this)
+    this.state = {
+      open: false,
+      error: '',
+    }
+  }
+
+  onSubmit(event) {
+    event.preventDefault()
+    const email = this.formEmail.state.value
+    this.props.mutate({ variables: { email } })
+      .then(({ data }) => {
+        this.formEmail.setState({ value: '' })
+        this.setState({ error: '' })
+        this.handleOpen()
+      })
+      .catch((error) => {
+        this.setState({ error: error.graphQLErrors[0].data.reason })
+      })
+  }
+
+  handleOpen = () => {
+    this.setState({ open: true })
+  }
+
+  handleClose = () => {
+    this.setState({ open: false })
+  }
+
+  render() {
+    return (
+      <form
+        style={{
+          margin: '10px 0 40px 0',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+        onSubmit={this.onSubmit}
+        >
+        <div>
+          <p>{this.state.error}</p>
+        </div>
+        <Email
+          className="form-control"
+          ref={(email) => {
+            this.formEmail = email
+          }}
+          autoFocus
+          />
+        <RaisedButton
+          label="Get early access"
+          primary
+          style={{
+            marginTop: 20,
+          }}
+          type="submit"
+          />
+        <Dialog
+          title="You will hear from us soon!"
+          modal={false}
+          open={this.state.open}
+          onRequestClose={this.handleClose}
+          />
+      </form>
+    )
+  }
+}
+
+const subscribe = gql`
+  mutation subscribe($email: String!) {
+    subscribe(email: $email) {
+      email
+    }
+  }
+`
+
+export default graphql(subscribe)(SubscribeForm)

data/connectors.js

@@ -0,0 +1,39 @@
+import Mongoose from 'mongoose'
+
+const MONGO_URL = process.env.MONGO_URL || 'mongodb://localhost/graphQLGuide'
+
+Mongoose.Promise = Promise
+
+Mongoose.connect(MONGO_URL, {
+  server: {
+    auto_reconnect: true,
+    reconnectTries: Number.MAX_VALUE,
+    reconnectInterval: 1000,
+  },
+}, (err) => {
+  if (err) throw err
+})
+
+Mongoose.connection.on('error', (e) => {
+  if (e.message.code === 'ETIMEDOUT') {
+    console.log(e)
+    Mongoose.connect(MONGO_URL)
+  }
+  console.log(e)
+})
+
+Mongoose.connection.once('open', () => {
+  console.log(`MongoDB successfully connected to ${MONGO_URL}`)
+})
+
+const SubscriberSchema = Mongoose.Schema({ // eslint-disable-line
+  email: String,
+  createdAt: Date,
+  source: String,
+}, {
+  versionKey: false,
+})
+
+const Subscriber = Mongoose.model('subscribers', SubscriberSchema)
+
+export default Subscriber

data/resolvers.js

@@ -1,7 +1,49 @@
+import { createError } from 'apollo-errors'
+import Subscriber from './connectors'
+
+const DbError = createError('DbError', {
+  message: 'An error occured when saving to the database',
+})
+
 export default {
   Query: {
-    foo(root, args, context) {
-      return 'bar'
+    subscriber(root, args, context) {
+      return Subscriber.findOne({ email: args.email })
+    },
+  },
+
+  Mutation: {
+    async subscribe(root, args, context) {
+      const subscriberExists = await Subscriber.findOne({ email: args.email })
+
+      let error
+
+      if (subscriberExists) {
+        error = 'A subscriber with this email already exists'
+      } else if (args.email.length === 0) {
+        error = 'The email provided should not be empty'
+      } else {
+        const isValid = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(args.email)
+        if (!isValid) {
+          error = 'Provide a valid email'
+        }
+      }
+
+      if (error) {
+        throw new DbError({
+          data: {
+            reason: error,
+          },
+        })
+      }
+
+      const subscriber = new Subscriber({
+        email: args.email,
+        createdAt: new Date(),
+        source: 'prelaunch-landing',
+      })
+
+      return subscriber.save()
     },
   },
 }

data/schema.js

@@ -1,9 +1,20 @@
 export default [`
+type Subscriber {
+  email: String,
+  createdAt: String,
+  source: String,
+}
+
 type Query {
-  foo: String
+  subscriber (email: String!): Subscriber
+}
+
+type Mutation {
+  subscribe(email: String!): Subscriber
 }
 
 schema {
   query: Query
+  mutation: Mutation
 }
 `]

lib/initClient.js

@@ -0,0 +1,27 @@
+import ApolloClient, { createNetworkInterface } from 'apollo-client'
+
+let apolloClient
+
+function createClient(headers) {
+  return new ApolloClient({
+    ssrMode: !process.browser,
+    headers,
+    dataIdFromObject: result => result.id || null,
+    networkInterface: createNetworkInterface({
+      uri: '/graphql',
+      opts: {
+        credentials: 'same-origin',
+      },
+    }),
+  })
+}
+
+export default (headers) => {
+  if (!process.browser) {
+    return createClient(headers)
+  }
+  if (!apolloClient) {
+    apolloClient = createClient(headers)
+  }
+  return apolloClient
+}

lib/initStore.js

@@ -0,0 +1,18 @@
+import { createStore } from 'redux'
+import getReducer from './reducer'
+import createMiddleware from './middleware'
+
+let reduxStore = null
+
+export default (client, initialState) => {
+  let store
+  if (!process.browser || !reduxStore) {
+    const middleware = createMiddleware(client.middleware())
+    store = createStore(getReducer(client), initialState, middleware)
+    if (!process.browser) {
+      return store
+    }
+    reduxStore = store
+  }
+  return reduxStore
+}

lib/middleware.js

@@ -0,0 +1,9 @@
+import { applyMiddleware, compose } from 'redux'
+
+export default function createMiddleware(clientMiddleware) {
+  const middleware = applyMiddleware(clientMiddleware)
+  if (process.browser && window.devToolsExtension) {
+    return compose(middleware, window.devToolsExtension())
+  }
+  return middleware
+}

lib/reducer.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux'
+
+export default function getReducer (client) {
+  return combineReducers({
+    apollo: client.reducer()
+  })
+}

lib/withData.js

@@ -0,0 +1,55 @@
+import { ApolloProvider, getDataFromTree } from 'react-apollo'
+import React from 'react'
+import 'isomorphic-fetch'
+import initClient from './initClient'
+import initStore from './initStore'
+
+export default Component => (
+  class extends React.Component {
+    static async getInitialProps(ctx) {
+      const headers = ctx.req ? ctx.req.headers : {}
+      const client = initClient(headers)
+      const store = initStore(client, client.initialState)
+
+      const props = {
+        url: { query: ctx.query, pathname: ctx.pathname },
+        ...await (Component.getInitialProps ? Component.getInitialProps(ctx) : {}),
+      }
+
+      if (!process.browser) {
+        const app = (
+          <ApolloProvider client={client} store={store}>
+            <Component {...props} />
+          </ApolloProvider>
+        )
+        await getDataFromTree(app)
+      }
+
+      const state = store.getState()
+      return {
+        initialState: {
+          ...state,
+          apollo: {
+            data: state.apollo.data,
+          },
+        },
+        headers,
+        ...props,
+      }
+    }
+
+    constructor(props) {
+      super(props)
+      this.client = initClient(this.props.headers)
+      this.store = initStore(this.client, this.props.initialState)
+    }
+
+    render() {
+      return (
+        <ApolloProvider client={this.client} store={this.store}>
+          <Component {...this.props} />
+        </ApolloProvider>
+      )
+    }
+  }
+)