Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c9fbee2

Browse files
author
smishra38@sapient.com
committed
Adding Routing to the app | React Router v4
1 parent 569959c commit c9fbee2

File tree

8 files changed

+134
-142
lines changed

8 files changed

+134
-142
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"prop-types": "^15.5.10",
1717
"react": "^15.5.4",
1818
"react-dom": "^15.5.4",
19-
"react-router-dom": "^4.0.0-beta.8"
19+
"react-router-dom": "^4.1.2"
2020
},
2121
"devDependencies": {
2222
"eslint": "^3.19.0",

‎public/_assets/css/app.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@
2121
.options:hover {
2222
background-color: #D0EFF6;
2323
}
24-
.navbar{
25-
padding: 10px;
26-
}
27-
2824
.pass{
2925
height: 100%;
3026
background-color: green;

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>React App</title>
99
</head>
1010
<body>
11-
<div class="jumbotron navbar">
11+
<div class="jumbotron navbar noPad">
1212
<div class="container">
1313
<h1>Javascript Quiz </h1>
1414
<p>Rate yourself.</p>

‎src/forms/QuestionForm.js renamed to ‎src/FormComponents/QuestionForm.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
//import ReactDOM from 'react-dom';
3-
2+
import {Link,Redirect}from 'react-router-dom';
3+
importaxiosfrom'axios';
44
class AddQuestion extends React.PureComponent {
55
constructor(props) {
66
super(props);
@@ -10,7 +10,8 @@ class AddQuestion extends React.PureComponent {
1010
option2: '',
1111
option3:'',
1212
option4:'',
13-
key:''
13+
key:'',
14+
fireRedirect:false
1415
};
1516
this.handleQuestion = this.handleQuestion.bind(this);
1617
this.handleOption1 = this.handleOption1.bind(this);
@@ -50,19 +51,24 @@ class AddQuestion extends React.PureComponent {
5051
if (!question || !option1 || !option2 || !option3 || !option4 || !key) {
5152
return;
5253
}
53-
this.props.onQuestionSubmit(
54-
{ question: question,
55-
options : [option1, option2, option3, option4],
56-
key : key
57-
});
54+
const dataPassed = { question: question,
55+
options : [option1, option2, option3, option4],
56+
key : key
57+
};
58+
axios.post(this.props.url, dataPassed)
59+
.then(res => {
60+
this.setState({ fireRedirect: true })
61+
62+
})
63+
5864
this.setState({ name: '', age: '', nationality:'', place:"" });
5965
}
6066

6167
render() {
62-
return <div className={'container '+this.props.classApply}>
68+
return <div className="container">
6369
<div className="marBot40">
6470
<h2 className="inline">Add a Question</h2>
65-
<buttononClick={this.props.goBack} className="nextBtn btn col-md-2 pull-right">Go Back</button>
71+
<Linkto="/"><button className="nextBtn btn col-md-2 pull-right">Go Back</button></Link>
6672
</div>
6773
<form className="form-horizontal" onSubmit={this.handleSubmit}>
6874
<div className="form-group">
@@ -108,6 +114,10 @@ class AddQuestion extends React.PureComponent {
108114
</div>
109115
</div>
110116
</form>
117+
{console.log(this.state.fireRedirect)}
118+
{this.state.fireRedirect && (
119+
<Redirect to='/questionAdded'/>
120+
)}
111121
</div>
112122

113123
}

‎src/components/QuestionAdded.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
2+
import {Link} from 'react-router-dom';
23

34
class QuestionAdded extends React.PureComponent{
45

56
render(){
6-
return <div className={"col-md-10 questionAdded "+this.props.classApply}>
7+
return <div className="col-md-10 questionAdded ">
78
<h3> Question Added Successfully!</h3>
89
<img alt="successfully added" src="./../../../_assets/images/tick.png" />
910
<div className="col-md-12 moreOptions">
10-
<buttononClick={this.props.addQuestionAgain} className="marTop25 marRight100 btn col-md-3">Add Another Question</button>
11-
<buttononClick={this.props.playQuiz} className="marTop25 btn col-md-2">Play Quiz</button>
11+
<Linkto='/addQuestion' className="col-md-3"><buttonclassName="marTop25 marRight100 btn">Add Another Question</button></Link>
12+
<Linkto="/" className="col-md-3"><buttonclassName="marTop25 btn">Go back to Quiz</button></Link>
1213

1314
</div>
1415
</div>

‎src/components/Quiz.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react';
2+
//import PropTypes from 'prop-types';
3+
import { Link } from 'react-router-dom'
4+
import axios from 'axios';
5+
import Question from './Question.js';
6+
import Options from './Options.js';
7+
//let data = require('./data.js'); //this imports data from local file, pass it as a prop to Quiz component
8+
9+
const shuffleArray = array => {
10+
let i = array.length - 1;
11+
for (; i > 0; i--) {
12+
const j = Math.floor(Math.random() * (i + 1));
13+
const temp = array[i];
14+
array[i] = array[j];
15+
array[j] = temp;
16+
}
17+
return array;
18+
}
19+
class Quiz extends React.PureComponent{
20+
constructor(props, context) {
21+
super(props, context);
22+
this.state = {
23+
change:false,
24+
data:"",
25+
questionAdded : 'hide',
26+
index:0,
27+
quesadded:true
28+
}
29+
this.handleQuestionSubmit = this.handleQuestionSubmit.bind(this);
30+
this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this);
31+
}
32+
loadCommentsFromServer() {
33+
axios.get(this.props.url)
34+
.then(res => {
35+
this.setState({ data: res.data });
36+
})
37+
}
38+
39+
componentWillMount() {
40+
this.loadCommentsFromServer();
41+
}
42+
handleQuestionSubmit(dataPassed) {
43+
axios.post(this.props.url, dataPassed)
44+
.then(res => {
45+
this.state.data.push(res.config.data);
46+
this.setState({
47+
questionAdded : 'show'
48+
});
49+
})
50+
.catch(err => {
51+
console.error(err);
52+
});
53+
}
54+
55+
render () {
56+
if(this.state.data==="" || this.state.data===undefined || this.state.data===null){
57+
return false;
58+
}
59+
var shuffledPosts = shuffleArray(this.state.data);
60+
return <div>
61+
<div className="row posRelative">
62+
<div className="col-md-10">
63+
<Question data={shuffledPosts[0].question} />
64+
</div>
65+
<Options data={(shuffledPosts[0])} />
66+
</div>
67+
<div className="col-md-10 noPad">
68+
<Link to="/"><button className="marTop25 nextBtn btn pull-right">Next Question</button></Link>
69+
<Link to="/addQuestion"><button className="marTop25 nextBtn btn pull-left">Add Question</button></Link>
70+
</div>
71+
</div>;
72+
}
73+
}
74+
75+
76+
// Quiz.PropTypes = {
77+
// books: PropTypes.bool.isRequired,
78+
// }
79+
// Book.PropTypes = {
80+
// b: PropTypes.string
81+
// }
82+
83+
export default Quiz;

‎src/index.js

Lines changed: 22 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,26 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import axios from 'axios';
4-
//import PropTypes from 'prop-types';
5-
import AddQuestion from './forms/QuestionForm.js';
6-
import Question from './components/Question.js';
7-
import Options from './components/Options.js';
8-
import QuestionAdded from './components/QuestionAdded.js';
9-
// var app = express();
10-
//var data = require('./data.js'); //this imports data from local file, pass it as a prop to Quiz component
11-
12-
var shuffleArray = array => {
13-
let i = array.length - 1;
14-
for (; i > 0; i--) {
15-
const j = Math.floor(Math.random() * (i + 1));
16-
const temp = array[i];
17-
array[i] = array[j];
18-
array[j] = temp;
19-
}
20-
return array;
21-
}
22-
class Quiz extends React.PureComponent{
23-
constructor(props, context) {
24-
super(props, context);
25-
this.refreshQuestion = this.refreshQuestion.bind(this);
26-
this.state = {
27-
change:false,
28-
data:"",
29-
playQuiz:'show',
30-
showQuestionForm:'hide',
31-
questionAdded : 'hide',
32-
index:0,
33-
quesadded:true
34-
}
35-
this.handleQuestionSubmit = this.handleQuestionSubmit.bind(this);
36-
this.addQuestion = this.addQuestion.bind(this);
37-
this.playQuiz = this.playQuiz.bind(this);
38-
//console.log(this.props);
39-
this.navigateToHome = this.navigateToHome.bind(this);
40-
this.loadCommentsFromServer = this.loadCommentsFromServer.bind(this);
41-
}
42-
loadCommentsFromServer() {
43-
axios.get(this.props.url)
44-
.then(res => {
45-
this.setState({ data: res.data });
46-
})
47-
}
48-
refreshQuestion(){
49-
this.setState({
50-
change:!this.state.change
51-
})
52-
}
53-
addQuestion(){
54-
this.setState({
55-
playQuiz:'hide',
56-
showQuestionForm:'show',
57-
questionAdded : 'hide'
58-
})
59-
}
60-
playQuiz(){
61-
this.setState({
62-
playQuiz:'show',
63-
showQuestionForm:'hide',
64-
questionAdded : 'hide'
65-
})
66-
}
67-
componentWillMount() {
68-
this.loadCommentsFromServer();
69-
}
70-
handleQuestionSubmit(dataPassed) {
71-
axios.post(this.props.url, dataPassed)
72-
.then(res => {
73-
this.state.data.push(res.config.data);
74-
this.setState({
75-
questionAdded : 'show',
76-
showQuestionForm:'hide'
77-
});
78-
})
79-
.catch(err => {
80-
console.error(err);
81-
});
82-
}
83-
navigateToHome(){
84-
axios.get(this.props.url)
85-
.then(res => {
86-
this.setState(
87-
{ data: res.data ,
88-
playQuiz:'show',
89-
showQuestionForm:'hide'
90-
});
91-
})
92-
}
93-
render () {
94-
if(this.state.data==="" || this.state.data===undefined || this.state.data===null){
95-
return false;
96-
}
97-
var shuffledPosts = shuffleArray(this.state.data);
98-
console.log(this.state.data);
99-
return <div>
100-
<div className={this.state.playQuiz + ' row posRelative'}>
101-
<div className="col-md-10">
102-
<Question data={shuffledPosts[0].question} />
103-
</div>
104-
<Options data={(shuffledPosts[0])} />
105-
</div>
106-
<div className={'col-md-10 noPad ' +this.state.playQuiz}>
107-
<button onClick={this.refreshQuestion} className="marTop25 nextBtn btn col-md-2 pull-right">Next Question</button>
108-
<button onClick={this.addQuestion} className="marTop25 nextBtn btn col-md-2 pull-left">Add Question</button>
109-
</div>
110-
111-
<AddQuestion goBack={this.navigateToHome} classApply={this.state.showQuestionForm} onQuestionSubmit={this.handleQuestionSubmit}/>
112-
<QuestionAdded classApply={this.state.questionAdded} playQuiz={this.playQuiz} addQuestionAgain={this.addQuestion}/>
113-
</div>;
114-
}
115-
}
3+
import {
4+
BrowserRouter as Router, Route
5+
} from 'react-router-dom';
1166

117-
// Quiz.PropTypes = {
118-
// books: PropTypes.bool.isRequired,
119-
// }
120-
// Book.PropTypes = {
121-
// b: PropTypes.string
122-
// }
7+
import Quiz from './components/Quiz.js';
8+
import QuestionForm from './FormComponents/QuestionForm.js';
9+
import QuestionAdded from './components/QuestionAdded.js';
12310

124-
ReactDOM.render(<Quiz url='http://localhost:3001/api/people' />, document.getElementById('root'));
11+
ReactDOM.render(
12+
<Router>
13+
<div>
14+
<Route exact path="/" render={props =>
15+
<Quiz url='http://localhost:3001/api/questions' {...props} />
16+
}/>
17+
<Route exact path="/addQuestion" render={props =>
18+
<QuestionForm url='http://localhost:3001/api/questions'/>
19+
}/>
20+
<Route exact path="/questionAdded" render={props =>
21+
<QuestionAdded />
22+
}/>
23+
</div>
24+
</Router>,
25+
document.getElementById('root')
26+
);

‎src/server.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ app.use('/api', router);
3232
//starts the server and listens for requests
3333

3434

35-
router.route('/people')
35+
router.route('/questions')
3636
.get(function(req, res) {
3737
//looks at our Question Schema
3838
Question.find(function(err, dataFromDB) {
@@ -45,8 +45,8 @@ router.route('/people')
4545
})
4646
//post new question to the database
4747
.post(function(req, res) {
48-
var question = new Question();
49-
question.question = req.body.question;
48+
var question = new Question();
49+
question.question = req.body.question;
5050
question.options = req.body.options;
5151
question.key = req.body.key;
5252

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /