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" "sourceType": "module"
}, },
"env": { "env": {
"browser": true,
"es6": true, "es6": true,
"jest": 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", "name": "chapter06",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"devDependencies": { "devDependencies": {
"@storybook/addon-actions": "^3.4.7", "@storybook/addon-actions": "^3.4.7",
"@storybook/addon-links": "^3.4.7", "@storybook/addon-links": "^3.4.7",
"@storybook/addons": "^3.4.7", "@storybook/addons": "^3.4.7",
"@storybook/react": "^3.4.7", "@storybook/react": "^3.4.7",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-eslint": "^8.2.3", "babel-eslint": "^8.2.3",
"babel-runtime": "^6.26.0", "babel-runtime": "^6.26.0",
"eslint-plugin-react": "^7.9.1", "eslint-plugin-react": "^7.9.1",
"react-scripts": "1.1.4" "react-scripts": "1.1.4"
}, },
"dependencies": { "dependencies": {
"react": "^16.4.1", "react": "^16.4.1",
"react-app-rewire-eslint": "^0.2.3", "react-app-rewire-eslint": "^0.2.3",
"react-app-rewired": "^1.5.2", "react-app-rewired": "^1.5.2",
"react-dom": "^16.4.1" "react-dom": "^16.4.1"
}, },
"scripts": { "scripts": {
"start": "react-app-rewired start", "start": "react-app-rewired start",
"build": "react-app-rewired build", "build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom", "test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject", "eject": "react-app-rewired eject",
"storybook": "start-storybook -p 9009 -s public", "storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public", "build-storybook": "build-storybook -s public",
"flow": "flow" "flow": "flow"
}, },
"flow-coverage-report": { "flow-coverage-report": {
"concurrentFiles": 1, "concurrentFiles": 1,
"excludeGlob": [ "excludeGlob": [
"node_modules/**" "node_modules/**"
], ],
"includeGlob": [ "includeGlob": [
"src/**/*.js" "src/**/*.js"
], ],
"threshold": 90, "threshold": 90,
"type": [ "type": [
"text", "text",
"html", "html",
"json" "json"
] ]
}, }
"prettier": {
"tabWidth": 4,
"printWidth": 75
}
} }
chapter06/src/countryFilterBar/index.js
+23 -2
View File
@@ -1,7 +1,28 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types";
export class CountryFilterBar extends React.PureComponent { 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() { 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"; import { ResultsDataTable } from "../resultsDataTable";
export class RegionsInformationTable extends React.PureComponent { 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() { render() {
return ( return (
<div style={{ border: "solid" }}> <div>
<CountryFilterBar /> <CountryFilterBar
<ResultsDataTable /> list={this.state.countries}
onSelect={this.update.bind(this)}
/>
<ResultsDataTable results={this.state.regions} />
</div> </div>
); );
} }
chapter06/src/resultsDataTable/index.js
+20 -1
View File
@@ -1,7 +1,26 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types";
export class ResultsDataTable extends React.PureComponent { export class ResultsDataTable extends React.PureComponent {
static propTypes = {
results: PropTypes.arrayOf(PropTypes.object).isRequired
};
render() { 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>
);
}
} }
} }