WIP form submit animation #13

Author: lorensr

components/SubscribeForm.js

@@ -12,6 +12,11 @@ import { iPadMaxW } from '../lib/styles'
 class SubscribeForm extends React.Component {
   static propTypes = {
     mutate: React.PropTypes.func.isRequired,
+    onSubmit: React.PropTypes.func,
+  }
+
+  static defaultProps = {
+    onSubmit: Function.prototype,
   }
 
   constructor(props) {
@@ -33,17 +38,23 @@ class SubscribeForm extends React.Component {
   }
 
   onSubmit(event) {
+    this.props.onSubmit()
     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 })
-      })
+    if (email.length === 0) {
+      return
+    }
+
+    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 = () => {

data/resolvers.js

@@ -19,13 +19,13 @@ export default {
       let error
 
       if (subscriberExists) {
-        error = 'A subscriber with this email already exists'
+        error = 'Your email has already been submitted'
       } else if (args.email.length === 0) {
-        error = 'The email provided should not be empty'
+        error = 'Empty email address'
       } 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'
+          error = 'Invalid email address'
         }
       }
 

lib/analytics/autotrack.js

@@ -1,5 +1,21 @@
 // From:
 // https://github.com/philipwalton/analyticsjs-boilerplate/blob/777ef6f2695c510a9e8d75ff0b426ee0a87ed18a/src/analytics/autotrack.js
+//
+// ISC License (ISC)
+//
+// Copyright (c) 2017, Philip Walton <[email protected]>
+//
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 /* eslint-disable */
 

pages/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import Paper from 'material-ui/Paper'
@@ -20,13 +20,25 @@ import Email from '../components/email'
 import SubscribeForm from '../components/SubscribeForm'
 import BookLI from '../components/book-li'
 import LogoLI from '../components/logo-li'
-import Ripple from '../components/ripple'
+import RippleComponent from '../components/ripple'
 import Emoji from '../components/emoji'
 
 import muiTheme from '../lib/muitheme'
 import { white, color, grey, iPadMaxW } from '../lib/styles'
 import withData from '../lib/withData'
 
+const DEVELOPING_ANIMATIONS = false
+const showAnimations = (process.env.NODE_ENV !== 'production' && DEVELOPING_ANIMATIONS)
+
+let Ripple = RippleComponent
+const Noop = ({ children }) => <div>{children}</div>
+Noop.propTypes = {
+  children: PropTypes.element.isRequired,
+}
+if (!showAnimations) {
+  Ripple = Noop
+}
+
 // fixes "Warning: Unknown prop `onTouchTap` on <label> tag."
 if (typeof window !== 'undefined') injectTapEventPlugin()
 
@@ -59,6 +71,14 @@ const bookTopics = [
 ]
 
 class Index extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      subscribed: false,
+    }
+  }
+
   componentDidMount() {
     const header = ReactDOM.findDOMNode(this.header)
     const introPara = ReactDOM.findDOMNode(this.introPara)
@@ -135,7 +155,11 @@ class Index extends Component {
       delay: 2,
     })
 
-    animation.play()
+    if (showAnimations) {
+      animation.play()
+    } else {
+      animation.time(animation.endTime())
+    }
   }
 
   render() {
@@ -233,6 +257,7 @@ class Index extends Component {
                 flexDirection: 'column',
                 justifyContent: 'center',
                 alignItems: 'center',
+                perspective: 1400,
               }}
               >
               <p
@@ -380,28 +405,67 @@ class Index extends Component {
               <Paper
                 className="form-container"
                 style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  justifyContent: 'center',
+                  position: 'relative',
                   opacity: 0,
                   paddingTop: 10,
                   paddingBottom: 10,
                   marginBottom: 20,
                   willChange: 'opacity, transform',
+                  transition: this.state.subscribed ? 'transform 1s ease-in-out' : null,
+                  transform: this.state.subscribed ? 'rotateY( 180deg )' : null,
                 }}
                 zDepth={2}
                 ref={(comingSoon) => { this.comingSoon = comingSoon }}
                 >
-                <h2
+                <div className="card-face">
+                  <h2
+                    style={{
+                      margin: 0,
+                      textAlign: 'center',
+                      fontSize: '1.7em',
+                    }}
+                    >
+                    Coming soon
+                  </h2>
+                  <SubscribeForm
+                    onSubmit={() => this.setState({ subscribed: true })}
+                    />
+                </div>
+                <div
+                  className="card-face"
                   style={{
-                    margin: 0,
-                    fontSize: '1.7em',
+                    position: 'absolute',
+                    top: 0,
+                    transform: 'rotateY( 180deg )',
+                    backgroundColor: 'red',
                   }}
                   >
-                  Coming soon
-                </h2>
-                <SubscribeForm />
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                    >
+                    <Emoji
+                      name="pray"
+                      />
+                    {'Thank you'}
+                    <Emoji
+                      name="relaxed"
+                      />
+                  </div>
+                </div>
+                <style jsx>{`
+                  .card-face {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    backface-visibility: hidden;
+                  }
+                `}</style>
               </Paper>
               <div
                 style={{