Skip to content
This repository has been archived by the owner on Oct 8, 2024. It is now read-only.

Commit

Permalink
Add RSVP Form in MLH
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshithpabbati
harshithpabbati committed Oct 11, 2019
1 parent a5ee3ed commit ab18c0b
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 78 deletions.
73 changes: 1 addition & 72 deletions src/events/mlh-hack-day/components/registration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
109 changes: 109 additions & 0 deletions src/events/mlh-hack-day/components/rsvpForm.js
View file
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 23 additions & 5 deletions src/events/mlh-hack-day/index.js
View file
Original file line number Diff line number Diff line change
@@ -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>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { navigate } from "gatsby"

const IndexPage = () => {
useEffect(() => {
navigate('/hacktoberfest/')
navigate('/mlh/')
}, [])
return null;
}
Expand Down

0 comments on commit ab18c0b

Please sign in to comment.