Add counter and footer in MLH

src/events/hacktoberfest/components/registration.js

@@ -37,7 +37,7 @@ class Registration extends React.Component {
       successText: '',
       loading: false,
       count: 0,
-      slotsLeft: 200
+      slotsLeft: 250
     }
     this.handleNameChange = this.handleNameChange.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
@@ -91,7 +91,7 @@ class Registration extends React.Component {
   getRegisteredCount = async() => {
     const variables = {formID: 1}
     const response = await dataFetch({ query: regquery, variables });
-    this.setState({count: response.data.registrationForm.applicationsCount, slotsLeft: 200-response.data.registrationForm.applicationsCount})
+    this.setState({count: response.data.registrationForm.applicationsCount, slotsLeft: 250-response.data.registrationForm.applicationsCount})
   }
 
   componentDidMount() {
@@ -118,7 +118,7 @@ class Registration extends React.Component {
                 <div>
                 <h2 className="my-4 text-light">
                   <span>{this.state.count}</span> Already Registered.<br />
-                  {this.state.count < 200 ? <><span>{this.state.slotsLeft>=0 ? this.state.slotsLeft: 0}</span> Slots Left.<br /></>: <span>Join the WaitList</span>}
+                  {this.state.count < 250 ? <><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 meet-up for free by filling up the form below,

src/events/hacktoberfest/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import './styles/style.sass'
 
 import Header from './components/header'
@@ -13,7 +13,7 @@ const Hacktoberfest = () => {
     <>
       <SEO title="Hacktoberfest 2019 - Meetup & BootCamp | Amritapuri | October 3" />
       <Header/>
-      <Countdown deadline='October 3, 2019'/>
+      <Countdown deadline='October 9, 2019'/>
       <Map/>
       <Registration />
       <Footer/>

src/events/mlh-hack-day/components/countdown.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+
+class Countdown extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    };
+  }
+
+  componentWillMount() {
+    this.getTimeUntil(this.props.deadline);
+  }
+
+  componentDidMount() {
+    setInterval(() => this.getTimeUntil(this.props.deadline), 1000);
+  }
+
+  leading(num) {
+    return num < 10 ? '0' + num : num;
+  }
+
+  getTimeUntil(deadline) {
+    const time = Date.parse(deadline) - Date.parse(new Date());
+    if(time < 0) {
+      this.setState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+
+    } else {
+      const seconds = Math.floor((time/1000)%60);
+      const minutes = Math.floor((time/1000/60)%60);
+      const hours = Math.floor((time/(1000*60*60))%24);
+      const days = Math.floor(time/(1000*60*60*24));
+
+      this.setState({ days, hours, minutes, seconds });
+    }
+
+  }
+
+  render() {
+    return(
+      <section id="counter" className="d-flex align-items-center">
+          <div className="row m-0 w-100">
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.days)}
+              <span>Days</span>
+            </div>
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.hours)}
+              <span>Hours</span>
+            </div>
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.minutes)}
+              <span>Minutes</span>
+            </div>
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.seconds)}
+              <span>Seconds</span>
+            </div>
+          </div>
+      </section>
+    );
+  }
+}
+export default Countdown;

src/events/mlh-hack-day/components/footer.js

@@ -1,28 +1,23 @@
 import React from "react"
-import { Link } from "gatsby"
+import Github from '../images/github.png'
+import MLH from "../images/mlh-logo-white.png"
 
-
-
-const Footer = () => (
-  <div id="footer">
-    <div className="row m-0">
-      <div className="col-md-4">
-
-      </div>
-      <div className="col-12 col-md-4">
-        &copy; Team amFOSS 2019.
-      </div>
-
-      <div className="col-md-4">
-        <div id="footer-menu">
-          <a href="/schedule">Privacy</a>
-          <a href="/schedule">Feedback</a>
-          <a href="/schedule">Code of conduct</a>
+const Footer = () => {
+  return(
+    <>
+      <div className="py-4 text-center text-light">Thank You</div>
+      <div id="footer-logos" className="row m-0">
+        <div className="container d-flex justify-content-center">
+          <a href="https://mlh.io/">
+            <img className="p-2" src={MLH} alt="MLH" />
+          </a>
+          <a href="https://github.com/">
+            <img className="px-2" src={Github} alt="Github" />
+          </a>
         </div>
       </div>
-    </div>
-  </div>
-);
-
-export default Footer
+    </>
+  )
+}
 
+export default Footer

src/events/mlh-hack-day/components/header.js

@@ -1,13 +1,67 @@
 import React from "react"
 import amFOSSLogo from "../../../images/amfoss_logo.png"
 import amritaLogo from "../../../images/amrita_logo.png"
-import MLH from "../images/local-hack-day.png"
 import LocalHackDay from "../images/localhackday.svg"
+import Particles from "react-particles-js"
 
 const Header = () => {
   return (
     <>
       <div id="header-area">
+        <Particles
+          canvasClassName="particleBg"
+          params={{
+            "particles": {
+              "number": {
+                "value": 400,
+                "density": {
+                  "enable": false
+                }
+              },
+              "size": {
+                "value": 3,
+                "random": true,
+                "anim": {
+                  "speed": 10,
+                  "size_min": 0.3
+                }
+              },
+              "line_linked": {
+                "enable": false
+              },
+              "move": {
+                "random": true,
+                "speed": 3,
+                "direction": "down",
+                "out_mode": "out"
+              }
+            },
+            "interactivity": {
+              "events": {
+                "onhover": {
+                  "enable": true,
+                  "mode": "bubble"
+                },
+                "onclick": {
+                  "enable": true,
+                  "mode": "repulse"
+                }
+              },
+              "modes": {
+                "bubble": {
+                  "distance": 50,
+                  "duration": 2,
+                  "size": 0,
+                  "opacity": 0
+                },
+                "repulse": {
+                  "distance": 40,
+                  "duration": 4
+                }
+              }
+            }
+          }}
+        />
         <div id="top-bar" className="row m-0 p-4">
           <div className="col-6">
             <a href="https://amfoss.in">

src/events/mlh-hack-day/components/registration.js

@@ -16,6 +16,14 @@ const query=`
   }
 }
 `;
+const regquery = `
+{
+  registrationForm(formID:2)
+  {
+    applicationsCount
+  }
+}`;
+
 
 class Registration extends React.Component {
   constructor(props) {
@@ -30,7 +38,8 @@ class Registration extends React.Component {
       successText: '',
       loading: false,
       count: 0,
-      status: ''
+      status: '',
+      slotsLeft: 60
     }
     this.handleNameChange = this.handleNameChange.bind(this);
     this.handleEmailChange = this.handleEmailChange.bind(this);
@@ -59,7 +68,7 @@ class Registration extends React.Component {
     const { name, email, phone, gender, roll, agreed, verified } = this.state;
     const emailRegex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
     const phoneRegex = /^\d{10}$/;
-    const rollRegex = /^AM[.]EN[.]U4(CSE|AIE|ECE|EAC|ELC|EEE|ME)[1][6-9][\d][\d][\d]$/;
+    const rollRegex = /^AM[.]EN[.](U3|U4)(CSE|AIE|ECE|EAC|ELC|EEE|ME|BCA)[1][6-9][\d][\d][\d]$/;
     if (name === '' || roll === '' || phone === '' || email === '' || gender === '') {
       this.setState({ loading: false, errorText: "Please Fill All the Fields" })
     } else if (emailRegex.test(email) === false) {
@@ -81,6 +90,17 @@ class Registration extends React.Component {
     }
   }
 
+  getRegisteredCount = async() => {
+    const variables = {formID: 1}
+    const response = await dataFetch({ query: regquery, variables });
+    this.setState({count: response.data.registrationForm.applicationsCount, slotsLeft: 60-response.data.registrationForm.applicationsCount})
+  }
+
+  componentDidMount() {
+    this.getRegisteredCount();
+  }
+
+
   render() {
     return (
       <section id="registration-form">
@@ -90,6 +110,8 @@ class Registration extends React.Component {
               (
                 <div>
                   <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,

src/events/mlh-hack-day/index.js

@@ -3,13 +3,17 @@ 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 Footer from "./components/footer"
 
 const MLH = () => {
   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/>
    </div>
   )
 }