ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Almost ready demo

Browse Source
This commit is contained in:
Federico Kereki
2018-06-21 23:51:26 -03:00
parent 0193fc1982
commit f59aacc8f8
6 changed files with 120 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter06/.eslintrc
+1
View File
@@ -5,6 +5,7 @@
"sourceType": "module"
},
"env": {
"browser": true,
"es6": true,
"jest": true
},
chapter06/.prettierrc
+4
View File
@@ -0,0 +1,4 @@
{
"tabWidth": 4,
"printWidth": 75
}
chapter06/package.json
+44 -48
View File
@@ -1,50 +1,46 @@
{
"name": "chapter06",
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/addon-actions": "^3.4.7",
"@storybook/addon-links": "^3.4.7",
"@storybook/addons": "^3.4.7",
"@storybook/react": "^3.4.7",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-runtime": "^6.26.0",
"eslint-plugin-react": "^7.9.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"react": "^16.4.1",
"react-app-rewire-eslint": "^0.2.3",
"react-app-rewired": "^1.5.2",
"react-dom": "^16.4.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"flow": "flow"
},
"flow-coverage-report": {
"concurrentFiles": 1,
"excludeGlob": [
"node_modules/**"
],
"includeGlob": [
"src/**/*.js"
],
"threshold": 90,
"type": [
"text",
"html",
"json"
]
},
"prettier": {
"tabWidth": 4,
"printWidth": 75
}
"name": "chapter06",
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/addon-actions": "^3.4.7",
"@storybook/addon-links": "^3.4.7",
"@storybook/addons": "^3.4.7",
"@storybook/react": "^3.4.7",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-runtime": "^6.26.0",
"eslint-plugin-react": "^7.9.1",
"react-scripts": "1.1.4"
},
"dependencies": {
"react": "^16.4.1",
"react-app-rewire-eslint": "^0.2.3",
"react-app-rewired": "^1.5.2",
"react-dom": "^16.4.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"flow": "flow"
},
"flow-coverage-report": {
"concurrentFiles": 1,
"excludeGlob": [
"node_modules/**"
],
"includeGlob": [
"src/**/*.js"
],
"threshold": 90,
"type": [
"text",
"html",
"json"
]
}
}
chapter06/src/countryFilterBar/index.js
+23 -2
View File
@@ -1,7 +1,28 @@
import React from "react";
import PropTypes from "prop-types";
export class CountryFilterBar extends React.PureComponent {
static propTypes = {
list: PropTypes.arrayOf(PropTypes.object).isRequired,
onSelect: PropTypes.func.isRequired
};
onSelect(e) {
this.props.onSelect(e.target.value);
}
render() {
return <div style={{ border: "solid" }}>SOMETHING</div>;
return (
<div>
Country:&nbsp;
<select onChange={this.onSelect.bind(this)}>
<option value="">Select a country:</option>
{this.props.list.map(x => (
<option key={x.code} value={x.code}>
{x.name}
</option>
))}
</select>
</div>
);
}
}
chapter06/src/regionsInformationTable/index.js
+28 -3
View File
@@ -4,11 +4,36 @@ import { CountryFilterBar } from "../countryFilterBar";
import { ResultsDataTable } from "../resultsDataTable";
export class RegionsInformationTable extends React.PureComponent {
state = {
countries: [
{ code: "AR", name: "Argentine" },
{ code: "BR", name: "Brazil" },
{ code: "PY", name: "Paraguay" },
{ code: "UY", name: "Uruguay" }
],
regions: [
{ id: "UY/5", name: "Durazno", cities: 8, pop: 60000 },
{ id: "UY/7", name: "Florida", cities: 20, pop: 67000 },
{ id: "UY/9", name: "Maldonado", cities: 17, pop: 165000 },
{ id: "UY/10", name: "Montevideo", cities: 1, pop: 1320000 },
{ id: "UY/11", name: "Paysandu", cities: 16, pop: 114000 }
]
};
update(country: string) {
// get a new list of regions when the country changes
console.log(`Country ... ${country}`);
}
render() {
return (
<div style={{ border: "solid" }}>
<CountryFilterBar />
<ResultsDataTable />
<div>
<CountryFilterBar
list={this.state.countries}
onSelect={this.update.bind(this)}
/>
<ResultsDataTable results={this.state.regions} />
</div>
);
}
chapter06/src/resultsDataTable/index.js
+20 -1
View File
@@ -1,7 +1,26 @@
import React from "react";
import PropTypes from "prop-types";
export class ResultsDataTable extends React.PureComponent {
static propTypes = {
results: PropTypes.arrayOf(PropTypes.object).isRequired
};
render() {
return <div style={{ border: "solid" }}>RESULTS</div>;
if (this.props.results.length === 0) {
return "No regions can be shown.";
} else {
return (
<div>
{this.props.results.map(x => (
<div key={x.id}>
{x.name}
{x.cities}
{x.pop}
</div>
))}
</div>
);
}
}
}