Skip to content

Commit 80634d2

Browse files
committed
asd
1 parent ddba948 commit 80634d2

File tree

10 files changed

+3750
-577
lines changed

10 files changed

+3750
-577
lines changed

dist/scripts/bundle.js

Lines changed: 3626 additions & 511 deletions
Large diffs are not rendered by default.

gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ gulp.task('css', function(){
6969

7070
gulp.task('watch', function(){
7171
gulp.watch(config.paths.html,['html']);
72-
gulp.watch(config.paths.js,['js', 'lint']);
72+
gulp.watch(config.paths.js,['js']);
7373
});
7474

7575
gulp.task('default',['html', 'js','css', 'open', 'watch']);

package-lock.json

Lines changed: 31 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"jquery": "^2.1.4",
2121
"loadash": "^1.0.0",
2222
"react": "^0.13.3",
23-
"react-router": "^0.13.3",
23+
"react-router": "^0.13.6",
2424
"reactify": "^1.1.1",
2525
"vinyl-source-stream": "^1.1.0"
2626
}

src/components/app.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*eslint-disable strict */
2+
var React = require('react');
3+
var Header = require('./common/header');
4+
var RouteHandler = require('react-router').RouteHandler;
5+
6+
$ = JQuery = require('jquery');
7+
8+
var App = React.createClass({
9+
render: function(){
10+
return (
11+
<div>
12+
<Header/>
13+
<div className="container-fluid">
14+
<RouteHandler />
15+
</div>
16+
</div>
17+
);
18+
}
19+
});
20+
21+
22+
module.exports = App;
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use strict"
2+
3+
var React = require('react');
4+
5+
var AuthorList = React.createClass({
6+
propTypes: {
7+
authors: React.PropTypes.array.isRequired
8+
},
9+
10+
render: function(){
11+
var createAuthorRow = function(author){
12+
return (
13+
<tr key={author.id}>
14+
<td><a href={"/#authors/" + author.id}>{author.id}</a></td>
15+
<td>{author.firstName} {author.lastName}</td>
16+
</tr>
17+
);
18+
}
19+
return (
20+
<div>
21+
<table className="table">
22+
<thead>
23+
<tr>
24+
<th>ID</th>
25+
<th>Name</th>
26+
</tr>
27+
</thead>
28+
<tbody>
29+
{this.props.authors.map(createAuthorRow, this)}
30+
</tbody>
31+
</table>
32+
</div>
33+
);
34+
}
35+
});
36+
37+
module.exports = AuthorList;

src/components/author/authorPage.js

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,29 @@
33
var React = require('react');
44

55
var AuthorApi = require('../../api/authorApi');
6+
var AuthorList = require('./authorList');
67

7-
var Authors = React.createClass({
8+
var AuthorPage = React.createClass({
89
getInitialState: function(){
910
return {
1011
authors: []
1112
}
1213
},
1314

14-
componentWillMount: function(){
15-
this.setState({ authors: AuthorApi.getAllAuthors()});
15+
componentDidMount: function(){
16+
if (this.isMounted()){
17+
this.setState({ authors: AuthorApi.getAllAuthors()});
18+
}
1619
},
1720

1821
render: function(){
19-
var createAuthorRow = function(author){
20-
return (
21-
<tr key={author.id}>
22-
<td><a href={"/#authors" + author.id}>{author.id}</a></td>
23-
<td>{author.firstName} {author.lastName}</td>
24-
</tr>
25-
);
26-
}
2722
return (
2823
<div>
2924
<h1>Author</h1>
30-
31-
<table className="table">
32-
<thead>
33-
<tr>
34-
<th>ID</th>
35-
<th>Name</th>
36-
</tr>
37-
</thead>
38-
<tbody>
39-
{this.state.authors.map(createAuthorRow, this)}
40-
</tbody>
41-
</table>
25+
<AuthorList authors={this.state.authors}/>
4226
</div>
4327
);
4428
}
4529
});
4630

47-
module.exports = Authors;
31+
module.exports = AuthorPage;
File renamed without changes.

src/main.js

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,9 @@
1-
$ = JQuery = require('jquery');
1+
"use strict";
2+
23
var React = require('react');
3-
var Home = require('./components/homePage');
4-
var Author = require('./components/author/authorPage');
5-
var About = require('./components/about/aboutPage');
6-
var Header = require('./components/common/header');
7-
(function(win){
8-
'use strict';
4+
var Router = require('react-router');
5+
var routes = require('./routes');
96

10-
var App = React.createClass({
11-
render: function(){
12-
var Child;
13-
14-
switch (this.props.route){
15-
case 'about': Child = About; break;
16-
case 'authors': Child= Author; break;
17-
default: Child = Home;
18-
}
19-
20-
return (
21-
<div>
22-
<Header/>
23-
<Child/>
24-
</div>
25-
);
26-
}
27-
});
28-
29-
function render(){
30-
var route = win.location.hash.substr(1);
31-
React.render(<App route={route}/>, document.getElementById('app'));
32-
}
33-
34-
win.addEventListener('hashchange', render);
35-
36-
render();
37-
38-
//React.render(<Home />, document.getElementById('app'));
39-
})(window)
7+
Router.run(routes, function(Handler){
8+
React.render(<Handler/>, document.getElementById('app'));
9+
})

src/routes.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict"
2+
3+
var React = require("react");
4+
5+
var Router = require('react-router');
6+
var DefaultRoute = Router.DefaultRoute;
7+
var Route = Router.Route;
8+
9+
var routes = (
10+
<Route name="app" path="/" handler={require('./components/app')}>
11+
<DefaultRoute handler={require('./components/homePage')} />
12+
<Route name="authors" handler={require('./components/author/authorPage')} />
13+
<Route name="about" handler={require('./components/about/aboutPage')} />
14+
</Route>
15+
);
16+
17+
module.exports = routes;

0 commit comments

Comments
 (0)