From ab18c0b5caf882ebdd1ac1c60f29a78e8612b9c3 Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Fri, 11 Oct 2019 00:45:00 +0530
Subject: [PATCH] Add RSVP Form in MLH

---
 .../mlh-hack-day/components/registration.js   |  73 +-----------
 .../mlh-hack-day/components/rsvpForm.js       | 109 ++++++++++++++++++
 src/events/mlh-hack-day/index.js              |  28 ++++-
 src/pages/index.js                            |   2 +-
 4 files changed, 134 insertions(+), 78 deletions(-)
 create mode 100644 src/events/mlh-hack-day/components/rsvpForm.js

diff --git a/src/events/mlh-hack-day/components/registration.js b/src/events/mlh-hack-day/components/registration.js
index 7e09476..26a5f16 100644
--- a/src/events/mlh-hack-day/components/registration.js
+++ b/src/events/mlh-hack-day/components/registration.js
@@ -112,78 +112,7 @@ class Registration extends React.Component {
                   <h2 className="my-4 text-light">
                     <span>{this.state.count}</span> Already Registered.<br />
                     {this.state.count < 60 ? <><span>{this.state.slotsLeft>=0 ? this.state.slotsLeft: 0}</span> Slots Left.<br /></>: <><span> Join the WaitList</span><br/></>}
-                    Register <span>Now</span></h2>
-                  <p className="text-light">
-                    Sign up for the MLH Local Hack Day: Learn for free by filling up the form below,
-                    and make sure you do that fast as we have very limited seats to fit you
-                    all in! Also, don't forget to bring in your friends as well :)
-                  </p>
-                  <p style={{ color: 'yellow'}}>* Meetup only open for students of Amritapuri Campus</p>
-                  <form
-                    className="form-group"
-                    onSubmit={e => {
-                      this.setState({loading: true});
-                      this.register();
-                      e.preventDefault();
-                    }}>
-                    <div className="row">
-                      <div className="col-12 p-0">
-                        <div className="m-2">
-                          <input type="text" placeholder="Enter Full Name" name="name" className="form-control" onChange={this.handleNameChange} />
-                        </div>
-                      </div>
-                      <div className="col-sm-6 p-0">
-                        <div className="m-2">
-                          <input type="text" placeholder="Enter Roll Number" name="Roll No" className="form-control" onChange={this.handleRollChange} />
-                        </div>
-                      </div>
-                      <div className="col-sm-6 p-0">
-                        <div className="m-2">
-                          <input type="text" placeholder="Enter Email" name="email" className="form-control" onChange={this.handleEmailChange} />
-                        </div>
-                      </div>
-                      <div className="col-sm-6 p-0">
-                        <div className="m-2">
-                          <input type="text" placeholder="Enter Phone" name="phoneno" className="form-control" onChange={this.handlePhoneChange} />
-                        </div>
-                      </div>
-                      <div className="col-sm-6 p-0">
-                        <div className="m-2">
-                          <select className="form-control text-light" onChange={this.handleGenderChange}>
-                            <option value="" hidden disabled selected>Select Gender</option>
-                            <option value="male">Male</option>
-                            <option value="female">Female</option>
-                          </select>
-                        </div>
-                      </div>
-                      <div className="col-sm-6 p-0">
-                        <div className="m-2" />
-                      </div>
-                      <div className="col-12 form-check">
-                        <div className="m-2 text-light text-center d-flex justify-content-center">
-                          <label className="form-check-label" htmlFor="undertaking">
-                            By submitting this application, I agree to the <a href="#">Code of Conduct</a> & <a href="#">Privacy Policy</a> of the organizers.
-                          </label>
-                        </div>
-                      </div>
-                      {
-                        this.state.errorText !== '' ?
-                          <div className="w-100 w-100 text-center m-2 alert alert-danger" role="alert">
-                            {this.state.errorText}
-                          </div> : null
-                      }
-                      <div className="col-12 p-0 text-center text-md-right">
-                        <div className="m-2">
-                          <button
-                            type="submit"
-                            className="button btn-block px-4"
-                          >
-                            REGISTER
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </form>
+                    RSVP <span>Now</span></h2>
                 </div>) : this.state.successText !== '' ?
                 this.state.status === "U" ?
                   (<div className="alert alert-success">
diff --git a/src/events/mlh-hack-day/components/rsvpForm.js b/src/events/mlh-hack-day/components/rsvpForm.js
new file mode 100644
index 0000000..9b69927
--- /dev/null
+++ b/src/events/mlh-hack-day/components/rsvpForm.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import dataFetch from "../../../utils/dataFetch";
+
+const query = `
+mutation($formID: Int!, $hash: String!,$phone: String!, $response: Boolean!)
+{
+  submitRSVP(formID:$formID, hash: $hash, phone: $phone, response: $response)
+  {
+    status
+  }
+}
+`
+
+class RSVPForm extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      phone: '',
+      response: true,
+      loading: false,
+      successText: '',
+      errorText: ''
+    }
+  }
+  submit = async() =>
+  {
+    const variables = {
+      'formID': 2,
+      'hash': this.props.hash,
+      'phone': this.state.phone,
+      'response': this.state.response
+    };
+    const response = await dataFetch({ query, variables });
+    if (Object.prototype.hasOwnProperty.call(response, 'errors')) {
+      this.setState({ loading: false, errorText: response.errors[0].message});
+    } else {
+      this.setState({
+        successText: response.data.submitRSVP.status,
+        errorText: ''
+      })
+    }
+  }
+
+  render() {
+    return(
+      <div className="d-flex m-0 text-light align-items-center justify-content-center" style={{ minHeight: '100vh', backgroundColor: '#4A148C'}}>
+        <div className="p-4">
+          <h1>RSVP for MLH Local Hack Day 2019, Amritapuri</h1>
+          <p>
+            Thank you so much for showing interest in Local Hack Day,
+            organized by amFOSS, in association with MLH.
+          </p>
+          <div className="alert alert-warning">
+            If you are facing any technical issues, or if your friend didn't recieve
+            a confirmation email yet, please ping +91 8139056887 on Telegram/WhatsApp.
+            We are sorry for any inconvenience caused.
+          </div>
+          {!this.state.loading ?
+            <form
+              onSubmit={e => {
+                this.setState({ loading: true });
+                this.submit();
+              }}
+              className="form-group">
+              <div className="row">
+                <div className="col-12 col-md-6 p-2">
+                  <label>Will you be attending in the event?</label>
+                  <select className="form-control" onChange={(e) => this.setState({response: e.currentTarget.value === "true" })}>
+                    <option value="" hidden disabled selected>Select Response</option>
+                    <option value="true">Yes</option>
+                    <option value="false">No</option>
+                  </select>
+                </div>
+                <div className="col-12 col-md-6 p-2">
+                  <label>Enter your registered phone number</label>
+                  <input
+                    type="text"
+                    placeholder="Enter Phone"
+                    name="phoneno"
+                    className="form-control"
+                    onChange={(e) => this.setState({ phone: e.currentTarget.value })}
+                  />
+                </div>
+                <div className="col-12">
+                  <button
+                    type="submit"
+                    className="button btn-block px-4"
+                  >
+                    Submit RSVP
+                  </button>
+                </div>
+              </div>
+            </form> : this.state.successText !== '' ?
+              <div className="alert alert-success">Thank you! Please inform your friends too about submitting their RSVP.</div>
+              : <div className="alert alert-warning">Submitting. Please Wait</div>
+          }
+          {
+            this.state.errorText !== '' ?
+              <div className="w-100 w-100 text-center m-2 alert alert-danger" role="alert">
+                {this.state.errorText}
+              </div> : null
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default RSVPForm;
\ No newline at end of file
diff --git a/src/events/mlh-hack-day/index.js b/src/events/mlh-hack-day/index.js
index aa1b8b8..d1266bf 100644
--- a/src/events/mlh-hack-day/index.js
+++ b/src/events/mlh-hack-day/index.js
@@ -1,19 +1,37 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import SEO from "../../components/seo"
 import Header from "./components/header"
 import Registration from "./components/registration"
 import "../mlh-hack-day/styles/style.sass"
 import Countdown from "./components/countdown"
+import RSVPForm from "./components/rsvpForm"
 import Footer from "./components/footer"
 
 const MLH = () => {
+  const [hash, setHash] = useState('');
+  const [queryLoaded, setQueryLoaded] = useState(false);
+
+  useEffect(() => {
+    if(!queryLoaded)
+    {
+      const query = window.location.search.substring(1);
+      const queryHash = query.split("=")
+      setHash(queryHash[1])
+      setQueryLoaded(true)
+    }
+  })
+
   return(
    <div id="mlh-landing">
      <SEO title="Local Hack Day: Learn 2019 - October 12 | Major League Hacking | Amritapuri" />
-     <Header />
-     <Countdown deadline='October 12, 2019'/>
-     <Registration />
-     <Footer/>
+     {hash === undefined ? (
+       <>
+         <Header/>
+         <Countdown deadline='October 12, 2019'/>
+         <Registration/>
+         <Footer/>
+       </>
+     ): <RSVPForm hash={hash} />}
    </div>
   )
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 12a4fbb..78cb52d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,7 +3,7 @@ import { navigate } from "gatsby"
 
 const IndexPage = () => {
   useEffect(() => {
-    navigate('/hacktoberfest/')
+    navigate('/mlh/')
   }, [])
   return null;
 }