From b1371e0f429fee33db508e53acc82b5ad409c0a8 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Sun, 12 Feb 2017 21:02:36 +0000
Subject: [PATCH] Remove 2nd RSVP button on home page, auto validates and
 submits now

---
 src/components/RsvpButton/RsvpButton.css | 10 ----------
 src/components/RsvpButton/RsvpButton.js  | 24 +++++++++++++++++-------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/RsvpButton/RsvpButton.css b/src/components/RsvpButton/RsvpButton.css
index 4676a31..7744262 100644
--- a/src/components/RsvpButton/RsvpButton.css
+++ b/src/components/RsvpButton/RsvpButton.css
@@ -23,16 +23,6 @@
 
 .formGroup {
   margin-bottom: 15px;
-  display: inline-block;
-}
-
-.rsvpGroup {
-  width: 65%;
-}
-
-.rsvpButtonGroup {
-  width: 30%;
-  float: right;
 }
 
 .label {
diff --git a/src/components/RsvpButton/RsvpButton.js b/src/components/RsvpButton/RsvpButton.js
index 5ec340c..b53e069 100644
--- a/src/components/RsvpButton/RsvpButton.js
+++ b/src/components/RsvpButton/RsvpButton.js
@@ -36,10 +36,17 @@ class RsvpButton extends React.Component {
 
   handleRsvpChange = () => {
     this.setState({ inputInvalidMsg: null });
+    if (this.rsvpInput.value && this.rsvpInput.value.length === 4) {
+      this.validateRsvp();
+    }
   }
 
   handleFormSubmit = (event) => {
     event.preventDefault();
+    this.validateRsvp();
+  }
+
+  validateRsvp = () => {
     fetch(`rsvp/${this.rsvpInput.value}`)
       .then(data => {
         if (data.status === 200) {
@@ -82,8 +89,13 @@ class RsvpButton extends React.Component {
             this.state.showRsvpForm ? s.rsvpFormVisible : null,
           ].join(' ')}
         >
-          <form method="post" action="/rsvp" onSubmit={this.handleFormSubmit}>
-            <div className={[s.formGroup, s.rsvpGroup].join(' ')}>
+          <form
+            method="post"
+            action="/rsvp"
+            ref={(form) => { this.rsvpForm = form; }}
+            onSubmit={this.handleFormSubmit}
+          >
+            <div className={s.formGroup}>
               <label className={s.label} htmlFor="code">
                 Enter your RSVP code
               </label>
@@ -99,14 +111,12 @@ class RsvpButton extends React.Component {
                 id="code"
                 type="text"
                 name="code"
+                minLength="4"
+                maxLength="4"
                 placeholder="Enter your RSVP code"
+                autoComplete="off"
               />
             </div>
-            <div className={[s.formGroup, s.rsvpButtonGroup].join(' ')}>
-              <button className={s.button} type="submit">
-                RSVP
-              </button>
-            </div>
           </form>
           <div
             className={[