Skip to content

Commit ea6f364

Browse files
mathieuancelinmathieuancelin
committed
Add likes
1 parent a848029 commit ea6f364

18 files changed

+577
-0
lines changed

‎step-5/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎step-5/.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
webpack.config.js
3+
public
4+
README.md

‎step-5/.eslintrc

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"extends": "eslint:recommended",
3+
"env": {
4+
"browser": true,
5+
"node": true,
6+
"es6": true
7+
},
8+
"plugins": [
9+
"react"
10+
],
11+
"ecmaFeatures": {
12+
"jsx": true,
13+
"modules": true
14+
},
15+
"rules": {
16+
"jsx-quotes": 1,
17+
"react/display-name": 0,
18+
"react/forbid-prop-types": 1,
19+
"react/jsx-boolean-value": 1,
20+
"react/jsx-closing-bracket-location": 1,
21+
"react/jsx-curly-spacing": 1,
22+
"react/jsx-handler-names": 1,
23+
"react/jsx-indent-props": 1,
24+
"react/jsx-key": 1,
25+
"react/jsx-max-props-per-line": 1,
26+
"react/jsx-no-bind": 1,
27+
"react/jsx-no-duplicate-props": 1,
28+
"react/jsx-no-literals": 0,
29+
"react/jsx-no-undef": 1,
30+
"react/jsx-pascal-case": 1,
31+
"react/jsx-sort-prop-types": 1,
32+
"react/jsx-sort-props": 0,
33+
"react/jsx-uses-react": 1,
34+
"react/jsx-uses-vars": 1,
35+
"react/no-danger": 1,
36+
"react/no-did-mount-set-state": 0,
37+
"react/no-did-update-set-state": 0,
38+
"react/no-direct-mutation-state": 1,
39+
"react/no-multi-comp": 1,
40+
"react/no-set-state": 0,
41+
"react/no-unknown-property": 1,
42+
"react/prefer-es6-class": 0,
43+
"react/prop-types": 1,
44+
"react/react-in-jsx-scope": 1,
45+
"react/require-extension": 1,
46+
"react/self-closing-comp": 1,
47+
"react/sort-comp": 1,
48+
"react/wrap-multilines": 1
49+
}
50+
}

‎step-5/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Node.js
2+
node_modules
3+
npm-debug.log
4+
5+
# Bundles
6+
bundle.js
7+
bundle.js.map

‎step-5/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "react-workshop",
3+
"description": "React Workshop",
4+
"version": "0.1.0",
5+
"dependencies": {
6+
"react": "0.14.7",
7+
"react-dom": "0.14.7",
8+
"react-router": "^2.0.1",
9+
"whatwg-fetch": "^0.11.0"
10+
},
11+
"devDependencies": {
12+
"webpack": "1.12.9",
13+
"webpack-dev-server": "1.14.0",
14+
"babel-loader": "6.2.0",
15+
"babel-preset-es2015": "6.1.18",
16+
"babel-preset-react": "6.1.18",
17+
"babel-register": "6.3.13",
18+
"eslint": "1.10.3",
19+
"eslint-plugin-react": "3.11.3"
20+
},
21+
"scripts": {
22+
"lint": "eslint src",
23+
"bundle": "webpack -p --colors --progress",
24+
"start": "webpack-dev-server -d --colors --inline --content-base public",
25+
"build": "npm run lint && npm run bundle"
26+
}
27+
}

‎step-5/public/css/avalanche.css

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

‎step-5/public/css/main.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
font-family: 'Roboto', sans-serif;
3+
}

‎step-5/public/img/chevrol-bel-air.png

28.6 KB
Loading

‎step-5/public/img/react.png

13.2 KB
Loading

‎step-5/public/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>React Workshop</title>
6+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
7+
<link href="./css/avalanche.css" rel="stylesheet" type="text/css">
8+
<link href="./css/main.css" rel="stylesheet" type="text/css">
9+
<link rel="icon" type="image/png" href="/img/react.png">
10+
</head>
11+
<body>
12+
<h1>Wines</h1>
13+
14+
<div id="main"></div>
15+
16+
<script src="/js/bundle.js"></script>
17+
</body>
18+
</html>

‎step-5/public/js/.gitkeep

Whitespace-only changes.

‎step-5/src/app.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint react/jsx-max-props-per-line: 0 */
2+
3+
import 'whatwg-fetch';
4+
5+
import React from 'react';
6+
import ReactDOM from 'react-dom';
7+
8+
import WineApp from './components/wine-app';
9+
import { RegionsPage } from './components/regions';
10+
import { WineListPage } from './components/wine-list';
11+
import { WinePage } from './components/wine';
12+
import { NotFound } from './components/not-found';
13+
14+
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
15+
16+
ReactDOM.render(
17+
<Router history={hashHistory}>
18+
<Route path="/" component={WineApp}>
19+
<IndexRoute component={RegionsPage} />
20+
<Route path="regions/:regionId" component={WineListPage} />
21+
<Route path="regions/:regionId/wines/:wineId" component={WinePage} />
22+
<Route path="*" component={NotFound} />
23+
</Route>
24+
</Router>
25+
, document.getElementById('main')
26+
);

‎step-5/src/components/not-found.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { PropTypes } from 'react';
2+
3+
export const NotFound = React.createClass({
4+
render() {
5+
return (
6+
<h2>Il semble que vous n'êtes pas au bon endroit !!!</h2>
7+
);
8+
}
9+
});

‎step-5/src/components/regions.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/* eslint react/jsx-no-bind: 0, react/no-multi-comp: 0, react/jsx-closing-bracket-location: 0 */
2+
3+
import React, { PropTypes } from 'react';
4+
5+
const computeRegionStyle = function(region, selected) {
6+
let style = {
7+
padding: 16,
8+
cursor: 'pointer'
9+
};
10+
if (region === selected) {
11+
style['fontWeight'] = 'bold';
12+
style['backgroundColor'] = 'lightGrey';
13+
}
14+
return style;
15+
}
16+
17+
export const Regions = React.createClass({
18+
propTypes: {
19+
onRegionChange: PropTypes.func,
20+
regions: PropTypes.arrayOf(PropTypes.string)
21+
},
22+
23+
handleRegionClick(event) {
24+
this.props.onRegionChange(event.target.textContent);
25+
},
26+
27+
render () {
28+
return (
29+
<div>
30+
{
31+
this.props.regions.map(region =>
32+
<div key={region}
33+
style={computeRegionStyle(region, null)}
34+
onClick={this.handleRegionClick}>
35+
{region}
36+
</div>
37+
)
38+
}
39+
</div>
40+
)
41+
}
42+
});
43+
44+
export const RegionsPage = React.createClass({
45+
46+
propTypes: {
47+
history: PropTypes.shape({
48+
push: PropTypes.func.isRequired
49+
}),
50+
setTitle: PropTypes.func
51+
},
52+
53+
contextTypes: {
54+
router: React.PropTypes.object
55+
},
56+
57+
getInitialState() {
58+
return {
59+
regions: [],
60+
loaded: false,
61+
error: null
62+
};
63+
},
64+
65+
componentDidMount() {
66+
fetch('http://localhost:3000/api/regions')
67+
.then(r => r.json())
68+
.then(data => {
69+
this.setState({ regions: data, loaded: true });
70+
this.props.setTitle(`Regions`);
71+
})
72+
.catch(error => {
73+
this.setState({ error, loaded: true });
74+
});
75+
},
76+
77+
handleNavigateToRegion(region) {
78+
this.context.router.push({
79+
pathname: `/regions/${region}`
80+
});
81+
},
82+
83+
render () {
84+
if (!this.state.loaded) {
85+
return <div>Loading ...</div>
86+
}
87+
if (this.state.error) {
88+
return <div>Error while fetching regions : {this.state.error.message}</div>
89+
}
90+
return (
91+
<Regions regions={this.state.regions}
92+
onRegionChange={this.handleNavigateToRegion} />
93+
);
94+
}
95+
});

‎step-5/src/components/wine-app.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { PropTypes } from 'react';
2+
3+
const WineApp = React.createClass({
4+
5+
propTypes: {
6+
children: PropTypes.element
7+
},
8+
9+
contextTypes: {
10+
router: React.PropTypes.object
11+
},
12+
13+
getInitialState() {
14+
return {
15+
title: ''
16+
};
17+
},
18+
19+
setTitle(title) {
20+
this.setState({ title });
21+
},
22+
23+
goBack() {
24+
this.context.router.goBack();
25+
},
26+
27+
render () {
28+
return (
29+
<div className="grid">
30+
<div className="1/2 grid__cell">
31+
<h2>{this.state.title} <button type="button" onClick={this.goBack}>back</button></h2>
32+
{this.props.children && React.cloneElement(this.props.children, {
33+
setTitle: this.setTitle
34+
})}
35+
</div>
36+
</div>
37+
);
38+
}
39+
})
40+
41+
export default WineApp

‎step-5/src/components/wine-list.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* eslint react/jsx-no-bind: 0, react/no-multi-comp: 0, react/jsx-closing-bracket-location: 0 */
2+
import React, { PropTypes } from 'react';
3+
4+
const computeWineStyle = function(region, selected) {
5+
let style = {
6+
padding: 16
7+
};
8+
if (region === selected) {
9+
style['fontWeight'] = 'bold';
10+
style['backgroundColor'] = 'lightGrey';
11+
}
12+
return style;
13+
}
14+
15+
export const WineList = React.createClass({
16+
propTypes: {
17+
onWineChange: PropTypes.func,
18+
params: PropTypes.shape({
19+
regionId: PropTypes.string.isRequired
20+
}),
21+
wines: PropTypes.arrayOf(PropTypes.object)
22+
},
23+
24+
handleWineClick(wine) {
25+
this.props.onWineChange(wine);
26+
},
27+
28+
render () {
29+
if (this.props.wines.length === 0) {
30+
return <div>No wine</div>
31+
}
32+
return (
33+
<div>
34+
{
35+
this.props.wines.map(wine =>
36+
<div key={wine.id}
37+
style={computeWineStyle(wine, null)}
38+
onClick={this.handleWineClick.bind(this, wine)}>
39+
{wine.name}
40+
</div>
41+
)
42+
}
43+
</div>
44+
)
45+
}
46+
})
47+
48+
export const WineListPage = React.createClass({
49+
propTypes: {
50+
history: PropTypes.shape({
51+
push: PropTypes.func.isRequired
52+
}),
53+
params: PropTypes.shape({
54+
regionId: PropTypes.string.isRequired
55+
}),
56+
setTitle: PropTypes.func
57+
},
58+
59+
contextTypes: {
60+
router: React.PropTypes.object
61+
},
62+
63+
getInitialState() {
64+
return {
65+
wines: [],
66+
loaded: false,
67+
error: null
68+
};
69+
},
70+
71+
componentDidMount() {
72+
fetch(`http://localhost:3000/api/wines?region=${this.props.params.regionId}`)
73+
.then(r => r.json())
74+
.then(data => {
75+
this.setState({ wines: data, loaded: true });
76+
this.props.setTitle(`Wines from ${this.props.params.regionId}`);
77+
})
78+
.catch(error => {
79+
this.setState({ error, loaded: true });
80+
});
81+
},
82+
83+
handleNavigateToWine(wine) {
84+
this.context.router.push({
85+
pathname: `/regions/${this.props.params.regionId}/wines/${wine.id}`
86+
});
87+
},
88+
89+
render () {
90+
if (!this.state.loaded) {
91+
return <div>Loading ...</div>
92+
}
93+
if (this.state.error) {
94+
return <div>Error while fetching wines : {this.state.error.message}</div>
95+
}
96+
return (
97+
<WineList wines={this.state.wines}
98+
onWineChange={this.handleNavigateToWine} />
99+
);
100+
}
101+
});

0 commit comments

Comments
 (0)