From 7c4659a906c5bdb0e5720ce25855478e6c518c58 Mon Sep 17 00:00:00 2001
From: Yiyuan Fang <tigerpillow@Yiyuans-MacBook-Pro.local>
Date: Thu, 11 Jun 2020 16:21:13 -0400
Subject: [PATCH] added logic, thank page, modify page

---
 src/components/Help.js     | 11 ++++++++++
 src/components/Signin.js   | 44 +++++++++++++++++++++++---------------
 src/components/Thank.js    | 22 +++++++++++++++++++
 src/components/Top.js      |  2 +-
 src/containers/Airport.css |  3 ---
 src/containers/Airport.js  | 43 -------------------------------------
 src/containers/Airport2.js |  9 +++-----
 src/containers/App.js      | 31 ++++++++++++++++++++++++++-
 8 files changed, 94 insertions(+), 71 deletions(-)
 create mode 100644 src/components/Help.js
 create mode 100644 src/components/Thank.js
 delete mode 100644 src/containers/Airport.css
 delete mode 100644 src/containers/Airport.js

diff --git a/src/components/Help.js b/src/components/Help.js
new file mode 100644
index 0000000..8022e8b
--- /dev/null
+++ b/src/components/Help.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Help (){
+	return (
+		<div style = {{display: 'flex', justifyContent: 'flex-end'}}>
+			<h4> Help </h4>
+		</div>
+		)
+}
+
+export default Help
\ No newline at end of file
diff --git a/src/components/Signin.js b/src/components/Signin.js
index 0e59d66..13de0f9 100644
--- a/src/components/Signin.js
+++ b/src/components/Signin.js
@@ -1,30 +1,40 @@
 import React from 'react';
 
-function Signin (){
+function Signin ({onRouteChange}){
 	return ( 
-		<main class="pa4 black-80">
-		  <form class="measure center">
-		    <fieldset id="sign_up" class="ba b--transparent ph0 mh0">
-		      <legend class="f4 fw6 ph0 mh0">Sign In</legend>
-		      <div class="mt3">
-		        <label class="db fw6 lh-copy f6" for="email-address">Email</label>
-		        <input class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address"  id="email-address" />
+		<article className="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 shadow-5 center">
+		<main className="pa4 black-80">
+		  <form className="measure center">
+		    <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
+		      <legend className="f4 fw6 ph0 mh0">Last Step</legend>
+		      <div className="mt3">
+		        <label className="db fw6 lh-copy f6" for="email-address">Yale Email</label>
+		        <input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address"  id="email-address" />
 		      </div>
-		      <div class="mv3">
-		        <label class="db fw6 lh-copy f6" for="password">Password</label>
-		        <input class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password" />
+		      <div className="ms3">
+		        <label className="db fw6 lh-copy f6" for="password">Name</label>
+		        <input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password" />
 		      </div>
-		      <label class="pa0 ma0 lh-copy f6 pointer"><input type="checkbox"/> Remember me</label>
+		      <div className="mv3">
+		        <label className="db fw6 lh-copy f6" for="password">Phone Number</label>
+		        <input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password" />
+		      </div>
+		      <label className="pa0 ma0 lh-copy f6 pointer"> <input type="checkbox"/> Remember me</label>
 		    </fieldset>
-		    <div class="">
-		      <input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Sign in" />
+		    <div className="">
+		      <input 
+		      className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" 
+		      type="submit" 
+		      value="Submit"
+		      onClick = {() => onRouteChange('Thank')} />
 		    </div>
-		    <div class="lh-copy mt3">
-		      <a href="#0" class="f6 link dim black db">Sign up</a>
-		      <a href="#0" class="f6 link dim black db">Forgot your password?</a>
+		    <div className="lh-copy mt3">
+		      {/*<a href="#0" className="f6 link dim black db">Register</a> */}
+		      <a href="#0" className="f6 link dim black db">Forgot your password?</a>
 		    </div>
   		  </form>
   		</main> 
+  		</article>
   		);
 }
 
diff --git a/src/components/Thank.js b/src/components/Thank.js
new file mode 100644
index 0000000..76e1d2d
--- /dev/null
+++ b/src/components/Thank.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function Thank ({onRouteChange}) {
+	return (
+		<div className = 'tc'>
+			<h1> Thank you for using Divvy! </h1> 
+			<div>
+				<input 
+				className = 'b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
+				value = 'click to modify'
+				onClick = {onRouteChange} />
+			</div> <br></br> 
+			<div>
+				<input 
+				className = 'b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
+				value = 'Fill out another form'
+				onClick = {()=>{onRouteChange ('firsttime')}} />
+			</div>
+		</div>)
+}
+
+export default Thank 
\ No newline at end of file
diff --git a/src/components/Top.js b/src/components/Top.js
index f84a0e1..2446e52 100644
--- a/src/components/Top.js
+++ b/src/components/Top.js
@@ -4,7 +4,7 @@ import './Top.css';
 function Top () {
 	return (
 		<div className = "tc f3">
-			<h1> Welcome to Divvy </h1>
+			<h1 > Welcome to Divvy </h1>
 		</div>)
 }
 
diff --git a/src/containers/Airport.css b/src/containers/Airport.css
deleted file mode 100644
index ac031d3..0000000
--- a/src/containers/Airport.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.Basket{
-	text-align: center;
-}
\ No newline at end of file
diff --git a/src/containers/Airport.js b/src/containers/Airport.js
deleted file mode 100644
index 53654d3..0000000
--- a/src/containers/Airport.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {useState} from 'react';
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import './Airport.css';
-import Basket from  '../components/Basket.js';
-import '../components/Basket.css';
-import {users, airports} from '../components/fakedata.js';
-import Scroll from '../components/Scroll';
-
-function Airport () {
-	const [startDate, setStartDate] = useState(new Date());
-	
-	const airportlist = airports.map((name, i)=> {
-		return <Block name = {airports[i].name} date = {startDate}/>
-	})
-
-	return (
-		<div className = "f3 tc">
-			<header>
-				<DatePicker selected = {startDate} onChange= {date => setStartDate(date)}/>
-			</header>
-			<Scroll>{airportlist}</Scroll>
-		</div> 
-		)
-}
-export default Airport;
-
-function Block (props) {
-	const blocklist = users.filter(user => {
-		return (Number(user.month) === (props.date.getMonth()+1) && user.airport.toLowerCase() === props.name.toLowerCase())
-		})
-
-	const blockmap = blocklist.map((name, i) => {
-		return <Basket id = {blocklist[i].id} name={blocklist[i].name} time = {blocklist[i].time} airport = {blocklist[i].airport}/>
-	})
-	
-	return ( 
-		<div className = "bg-light-yellow dib br4 pa1 ma3 grow">
-			<header> {props.name} {props.date.getMonth()+1} </header>
-			{blockmap}
-		</div>  
-		)
-}
\ No newline at end of file
diff --git a/src/containers/Airport2.js b/src/containers/Airport2.js
index 01e4a59..0101764 100644
--- a/src/containers/Airport2.js
+++ b/src/containers/Airport2.js
@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import './Airport.css';
+import './Airport2.css';
 import Basket from  '../components/Basket.js';
 import '../components/Basket.css';
 import {users, airports} from '../components/fakedata.js';
 import Scroll from '../components/Scroll';
 import './Airport2.css'
-import Signin from '../components/Signin'
 
 class Airport2 extends Component {
 
@@ -16,21 +15,19 @@ class Airport2 extends Component {
 		this.state = {
 			startDate: new Date(),
 			airports: airports,
-			users: users
+			users: users,
 	};}
 	
 	onChange = date => {this.setState({startDate: date});};
-
+	
 
 	render () {
 		const Airmaps = this.state.airports.map((name, i) => {
 		return <Block date = {this.state.startDate} airport = {this.state.airports[i]} users = {this.state.users} />
 	});
 
-
 		return (
 			<div className = "f3 tc">
-			<Signin/>
 			<header> 
 				<DatePicker selected = {this.state.startDate} onChange = {this.onChange} />
 			</header>
diff --git a/src/containers/App.js b/src/containers/App.js
index 6f384e5..3780e1f 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -1,14 +1,43 @@
 import React, {Component} from 'react';
 import Airport2 from './Airport2';
 import Top from '../components/Top';
-import './App.css';
+import Signin from '../components/Signin';
+import './Airport2.css';
+import Help from '../components/Help'
+import Thank from '../components/Thank'
 
 class App extends Component{ 
+  constructor (){
+  	super()
+  	this.state = {
+  		route: 'firsttime'
+  	};
+  };
+
+ 	onRouteChange = (route) => {
+		this.setState({route:route});
+	}
+
   render () {
     return (
       <div>
+      {this.state.route === 'firsttime'
+      ? <div>
         <Top/>
+		<h5 className = 'tr link dim black underline pa3 pointer'> <Help/> </h5>
+		<h5 className = 'tr link dim black underline pa3 pointer'> Login </h5>
         <Airport2 />
+        <Signin onRouteChange = {this.onRouteChange} /> 
+        </div>
+      :(this.state.route === 'Thank'
+      	? <div>
+          <Thank onRouteChange = {this.onRouteChange}/> 
+          </div>
+        : <div>
+          <Top/>
+          <Airport2/>
+          </div>
+  	  )}
       </div> 
       );
   }