sundowndev
/
Am-I-late
mirror of https://github.com/sundowndev/Am-I-late.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17 from SundownDEV/devFront 

Add routing + modal try again + refactoring
pull/21/head
Rémi Doreau 2018-06-06 00:16:45 +02:00 committed by GitHub
parent e10c5380f7 288066a5fe
commit f2e233b657
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 157 additions and 11520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11514
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
client/package.json
View File

@ -15,6 +15,8 @@
"axios": "^0.18.0", "axios": "^0.18.0",
"react": "^16.3.2", "react": "^16.3.2",
"react-dom": "^16.3.2", "react-dom": "^16.3.2",
"react-modal": "^3.4.5",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4" "react-scripts": "1.1.4"
} }
} }

1
client/public/index.html
View File

@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Am I late ?</title> <title>Am I late ?</title>
</head> </head>
<body> <body>

67
client/src/App.js → client/src/components/App.js
View File

@ -1,6 +1,20 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from 'axios'; import axios from 'axios';
import './App.css'; import '../styles/App.css';
import Modal from 'react-modal';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
Modal.setAppElement("#root");
class App extends Component { class App extends Component {
@ -10,30 +24,61 @@ class App extends Component {
currentResponses: [], currentResponses: [],
currentQuestion: "", currentQuestion: "",
pastQuestion: null, pastQuestion: null,
modalIsOpen: false,
pastResponse: null, pastResponse: null,
currentSticker: null,
score: 0, score: 0,
start: true, start: true,
baseRoute: "http://localhost:8000" baseRoute: "http://localhost:8000"
}; };
this.fetchQuestion = this.fetchQuestion.bind(this); this.fetchQuestion = this.fetchQuestion.bind(this);
this.fetchResponses = this.fetchResponses.bind(this); this.fetchResponses = this.fetchResponses.bind(this);
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
} }
openModal() {
this.setState({modalIsOpen: true});
}
closeModal() {
this.setState({
modalIsOpen: false,
start: true,
score: 0
});
axios.get(this.state.baseRoute+"/questions")
.then(((data) => {
this.fetchQuestion(this.state.baseRoute+"/questions/"+data.data[0].id);
this.fetchResponses(this.state.baseRoute+"/questions/"+data.data[0].id+"/responses");
}));
}
_handleClick(element) { _handleClick(element) {
console.log(element.child +" "+this.state.currentQuestion);
if(element.child !== this.state.currentQuestion || element.child !== null || element.child !== undefined) {
this.setState({ this.setState({
pastQuestion: this.state.currentQuestion , pastQuestion: this.state.currentQuestion ,
pastResponse: element.text, pastResponse: element.text,
score: this.state.score+1 score: this.state.score+1
}); });
this.fetchQuestion(this.state.baseRoute + element.child); this.fetchQuestion(this.state.baseRoute + element.child);
this.fetchResponses(this.state.baseRoute + element.child+"/responses"); this.fetchResponses(this.state.baseRoute + element.child+"/responses");
} else {
this.setState({
modalIsOpen: true
})
}
} }
fetchQuestion(url) { fetchQuestion(url) {
axios.get(url) axios.get(url)
.then(((data) => { .then(((data) => {
console.log(data.data);
this.setState({ this.setState({
currentQuestion: data.data.text currentQuestion: data.data.text,
currentSticker: data.data.sticker
}) })
})) }))
.catch(error => console.log(error)); .catch(error => console.log(error));
@ -54,7 +99,7 @@ class App extends Component {
.then(((data) => { .then(((data) => {
this.fetchQuestion(this.state.baseRoute+"/questions/"+data.data[0].id); this.fetchQuestion(this.state.baseRoute+"/questions/"+data.data[0].id);
this.fetchResponses(this.state.baseRoute+"/questions/"+data.data[0].id+"/responses"); this.fetchResponses(this.state.baseRoute+"/questions/"+data.data[0].id+"/responses");
})) }));
this.setState ({ this.setState ({
start: false start: false
}) })
@ -75,6 +120,19 @@ class App extends Component {
return ( return (
<div className="App container"> <div className="App container">
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Modal content"
>
<h2 style={{textAlign: 'center'}}>Try again ?</h2>
<button className="btn_app" style={{fontFamily: 'Raleway', marginTop: '15px'}} onClick={this.closeModal} >
Come back to the grind
</button>
<h5 className="scoreTitle">Your score is {this.state.score}</h5>
</Modal>
<h1>Am I late ?</h1> <h1>Am I late ?</h1>
<header className="App_header"> <header className="App_header">
{this.state.pastQuestion ? header : null} {this.state.pastQuestion ? header : null}
@ -83,6 +141,7 @@ class App extends Component {
<div className="jumbotron"> <div className="jumbotron">
<div className="currentSection vertical-center container"> <div className="currentSection vertical-center container">
<h1 className="currentState">{this.state.currentQuestion}</h1> <h1 className="currentState">{this.state.currentQuestion}</h1>
<img src={this.state.currentSticker} height="42" width="42" />
<h2 className="currentQuestion">Je fais quoi ?</h2> <h2 className="currentQuestion">Je fais quoi ?</h2>
<div className="currentOptions"> <div className="currentOptions">
{this.state.currentResponses ? currentOptions : null} {this.state.currentResponses ? currentOptions : null}

21
client/src/components/Home.js Normal file
View File

@ -0,0 +1,21 @@
import React , {Component} from 'react';
import "../styles/Home.css";
class Home extends Component {
render() {
return (
<div className="App">
<h2 className="App_intro">You are Ariel, a teacher at <strong>HETIC</strong>. < br />
You had a class at <strong>9 AM</strong> but you're late. So late.< br />
You get out of the bed, it's half past 9.< br />
You have to get into the class before <strong>10 AM</strong>.< br />
</h2>
<a href="/app" className="btn_app"><strong>Welcome to the grind</strong></a>
</div>
)
}
}
export default Home;

12
client/src/components/Main.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
// import Header from './Header'
import Router from './Router'
const Main = () => (
<div>
{/*<Header />*/}
<Router />
</div>
);
export default Main

16
client/src/components/Router.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home'
import App from './App'
const Router = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/app' component={App}/>
</Switch>
</main>
);
export default Router;

7
client/src/index.js
View File

@ -1,8 +1,11 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import './index.css'; import './index.css';
import App from './App'; import Main from './components/Main';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render((<BrowserRouter>
<Main />
</BrowserRouter>), document.getElementById('root'));
registerServiceWorker(); registerServiceWorker();

13
client/src/App.css → client/src/styles/App.css
View File

@ -22,6 +22,19 @@
font-size: large; font-size: large;
} }
.btn_app {
background-color: white;
border-style: solid;
border-width: 1px;
border-radius: 4px;
color: black;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: 50px;
}
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { transform: rotate(0deg); } from { transform: rotate(0deg); }
to { transform: rotate(360deg); } to { transform: rotate(360deg); }

24
client/src/styles/Home.css Normal file
View File

@ -0,0 +1,24 @@
.App_intro {
line-height: 1.25em;
text-align: left;
display: inline-block;
margin-top: 33vh;
text-decoration: none;
}
a:link{
text-decoration: none!important;
}
.btn_app {
background-color: white;
border-style: solid;
border-width: 1px;
border-radius: 4px;
color: black;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: 50px;
}