Made a check-in page

client/src/component/Navigation-Bar/index.jsx

@@ -1,15 +1,14 @@
 import React from "react";
-//import { Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import "./navigation-bar.scss";
 
 class NavigationBar extends React.Component {
   render() {
     const isMobile = window.innerWidth <= 500;
     if (isMobile) {
-      return (null);
-    }
-    else {
+      return null;
+    } else {
       return (
         <header id="navigation-bar">
           <div>
@@ -49,17 +48,13 @@ class NavigationBar extends React.Component {
             >
               <button className="link">About Us</button>
             </a>
-            {/*
-           <button className="navigation btn btn-orange btn-border-o">
-            <Link
-              className="link"
-              to="login"
-              title="HackMerced Schedule"
+            <a
+              className="navigation btn btn-orange btn-border-o"
+              href="/checkin"
+              alt="Check In!"
             >
-              Login
-            </Link>
-          </button>
-        */}
+              <button className="link">Check In</button>
+            </a>
           </section>
         </header>
       );

client/src/component/Navigation-Bar/navigation-bar.scss

@@ -25,6 +25,7 @@ $btn-colors: (
   width: 12%;
   font-size: 2%;
   float: right;
+
 
   .link {
     /* This adjusts the React Router links */
@@ -33,7 +34,8 @@ $btn-colors: (
     text-decoration: none; /* removes underscores of the links */
     /* Extra small devices (phones, 600px and down) */
     @media only screen and (max-width: 600px) {
-      display: none;
+	  display: none;
+
     }
   }
 }
@@ -55,31 +57,33 @@ $btn-colors: (
   @media only screen and (max-width: 600px) {
     /* Adjusting position of the banner to the top left corner */
     width: 80px;
-    right: 10px;
+	right: 10px;
   }
 
   /* Small devices (portrait tablets and large phones, 600px and up) */
   @media only screen and (min-width: 600px) {
     /* Adjusting position of the banner to the top left corner */
-    width: 100px;
+	width: 100px;
+
   }
 
   /* Medium devices (landscape tablets, 768px and up) */
   @media only screen and (min-width: 768px) {
     /* Adjusting position of the banner to the top left corner */
-    width: 130px;
+	width: 130px;
   }
 
   /* Large devices (laptops/desktops, 992px and up) */
   @media only screen and (min-width: 992px) {
     /* Adjusting position of the banner to the top left corner */
-    width: 150px;
+	width: 150px;
   }
 
   /* Extra large devices (large laptops and desktops, 1200px and up) */
   @media only screen and (min-width: 1200px) {
     /* Adjusting position of the banner to the top left corner */
-    width: 150px;
+	width: 150px;
+
   }
 }
 
@@ -100,6 +104,7 @@ $btn-colors: (
 	opacity: .999;
 	border-radius: 3px;
 	@extend .animate;
+
 }
 
 .btn-border-o {
@@ -113,6 +118,8 @@ $btn-colors: (
 		border-radius: 16px;
 		height: 40px;
 		padding: 5px;
+		overflow: hidden;
+
 	}
 
 	&:before,

client/src/pages/CheckIn/checkin.scss

@@ -0,0 +1,89 @@
+#CheckIn{
+    background-image: linear-gradient(#8d78a1, #b69087, #d15f2a);
+    overflow: hidden;  
+    padding-top: 80px;
+  padding-bottom: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+
+#body {
+    background-image: linear-gradient(#8d78a1, #b69087, #d15f2a);
+    color: white;
+    padding: 10%;
+    font-family: "Moon", bold; 
+}
+
+
+#CheckIn-title{
+    color: #D15F2A;
+    font-size: 20px; 
+    position: relative;
+  }
+
+  #CheckIn-container {
+    display: block;
+    border-radius: 5%;
+    background-color: white; // for debugging
+    width: 80vh;
+    position: relative;
+    text-align: center;
+    padding-bottom: 10px;
+    margin: 5% 0% 0% 0%;
+
+
+  }
+  #CheckIn-logo {
+    margin-top: 5%;
+    max-width: 40%;
+    position: relative;
+    bottom: 20%;
+    left: 30%;
+  }
+  #email{
+    position: relative;
+    right: 10%;
+  }
+
+  input[type=email] {
+    width: 80%;
+    padding: 15px;
+    font-size: 15px;
+    margin: 15px 0 22px 0;
+    display: inline-block;
+    background: rgb(204, 203, 203);
+    cursor: auto;
+    border-style: inset;
+    border-radius: 5px;
+    position: relative;
+    overflow:hidden;
+    border-width: 10px;
+    border-color: black;
+    background: transparent;
+    text-align: left;
+  }
+
+  button {
+    width: 270px;
+    background-color: #9a544c;
+    padding: 10px;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 24px;
+    transition-duration: 0.25s;
+  }
+
+#CheckIn-text{
+  padding-top: 10px; /* brings sign-up lower and shrinks down text */
+  font-size: 55px;
+  font-weight: bold;
+
+}
+
+.CheckIn-link{
+  margin-left: 5px; /* Adds a space between link and text */
+}
+
+}

client/src/pages/CheckIn/index.jsx

@@ -0,0 +1,93 @@
+import React, { Component } from "react";
+import axios from "axios";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+import LOGO from "../../assets/Images/logo.png";
+import "./checkin.scss";
+
+class CheckIn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      email: ""
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  successToast = () => {
+    toast("Successfully Checked In!", {
+      position: toast.POSITION.TOP_CENTER,
+      className: "toast-success",
+      autoClose: 8000,
+      draggable: false
+    });
+  };
+
+  errorToast = () => {
+    toast.error(
+      "You have not signed up before, please go to the other table and sign up before checking in!",
+      {
+        position: toast.POSITION_TOP_CENTER,
+        className: "toast-error",
+        draggable: false
+      }
+    );
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+
+    axios
+      .get("http://localhost:3852/api/attendees", {
+        params: {
+          email: this.state.email
+        }
+      })
+      .then(async response => {
+        if (response.data.status === "Application Found!") {
+          await this.successToast();
+          await axios.patch("http://localhost:3852/api/attendees", {
+            ...response.data.user,
+            status: "checked in"
+          })
+        } else {
+          this.errorToast();
+        }
+      })
+      .catch(this.errorToast);
+  };
+
+  render() {
+    return (
+      <section id="CheckIn">
+        <div id="CheckIn-container">
+          <section id="CheckIn-title">
+            <div id="CheckIn-logo">
+              <img src={LOGO} width="20px" alt="HackMerced Logo" />
+            </div>
+            <div id="CheckIn-text">Check-In!</div>
+          </section>
+          <form onSubmit={this.handleSubmit}>
+            <section id="email">
+              <input
+                required
+                type="email"
+                name="email"
+                placeholder="Email"
+                onChange={event => {
+                  this.setState({ email: event.target.value });
+                }}
+              />
+            </section>
+            <button type="submit">Check-In</button>
+          </form>
+        </div>
+        <ToastContainer />
+      </section>
+    );
+  }
+}
+
+export default CheckIn;

client/src/pages/SignUp/index.jsx

@@ -23,7 +23,7 @@ class SignUp extends Component {
       major: "",
       year: "",
       schoolStanding: "",
-      graduationYear: 2020,
+      graduationYear: 2021,
       dietaryRestrictions: "",
       specialNeeds: "",
       firstHackathon: true,
@@ -331,14 +331,12 @@ class SignUp extends Component {
 
     const user = this.createUser(this.state);
 
-    console.log("before posting to DB: ", user);
-
     this.setState({
       loader: ""
     });
 
     axios
-      .post("http://hackmerced.io/api/attendees", user)
+      .post("http://localhost:3852/api/attendees", user)
       .then(response => {
         if (response.data.submitted === "Application successfully submitted!") {
           this.successToast();
@@ -350,8 +348,6 @@ class SignUp extends Component {
         }
       })
       .catch(this.errorToast);
-
-    // window.location.replace("http://hackmerced.io");
   };
 
   render() {
@@ -415,6 +411,7 @@ class SignUp extends Component {
                 min={17}
                 max={100}
                 onChange={this.handleAgeChange}
+                defaultValue={18}
               ></input>
             </div>
             <div>
@@ -475,6 +472,7 @@ class SignUp extends Component {
               <select
                 className="first-hackathon"
                 onChange={this.handleFirstHackathonChange}
+                defaultValue="Yes"
                 required
               >
                 <option
@@ -539,6 +537,7 @@ class SignUp extends Component {
                 name="graduation-year"
                 ref="name"
                 placeholder="2021"
+                defaultValue={2021}
                 onChange={this.handleGraduationYearChange}
                 required
               ></input>

client/src/routes/index.jsx

@@ -2,6 +2,7 @@ import Home from "../pages/Home";
 // import NeonHeart from "../pages/NeonHeart";
 // import CreateAccount from "../pages/createAccount";
 import SignUp from "../pages/SignUp";
+import CheckIn from "../pages/CheckIn";
 // import Dashboard from "../pages/dash";
 // import Login from "../pages/Login";
 
@@ -10,26 +11,14 @@ const routes = [
     path: "/",
     component: Home
   },
-  // {
-  //   path: "/neon",
-  //   component: NeonHeart
-  // },
-  // {
-  //   path: "/login",
-  //   component: Login
-  // },
-  // {
-  //   path: "/create",
-  //   component: CreateAccount
-  // },
   {
     path: "/signUp",
     component: SignUp
   },
-  // {
-  //   path: "/dash",
-  //   component: Dashboard
-  // }
+  {
+    path: "/checkin",
+    component: CheckIn
+  }
 ];
 
 export default routes;