Better ExpandedCard

chapter06/src/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { RegionsInformationTable } from "./regionsInformationTable";
+import { RegionsInformationTable } from "./components/regionsInformationTable";
 
 class App extends React.PureComponent {
     render() {

chapter06/src/components/countryFilterBar/index.js

@@ -1,5 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
+import "../general.css";
+
 export class CountryFilterBar extends React.PureComponent {
     static propTypes = {
         list: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -12,7 +14,7 @@ export class CountryFilterBar extends React.PureComponent {
 
     render() {
         return (
-            <div>
+            <div className="bordered">
                 Country:&nbsp;
                 <select onChange={this.onSelect.bind(this)}>
                     <option value="">Select a country:</option>

chapter06/src/components/expandableCard.1/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import "../general.css";
+
+export class ExpandableCard extends React.PureComponent {
+    static propTypes = {
+        name: PropTypes.string.isRequired,
+        cities: PropTypes.number.isRequired,
+        population: PropTypes.number.isRequired
+    };
+
+    render() {
+        return (
+            <div className="bordered">
+                NAME:{this.props.name}
+                <br />
+                CITIES:{this.props.cities}
+                <br />
+                POPULATION:{this.props.population}
+            </div>
+        );
+    }
+}

chapter06/src/components/expandableCard.2/expandableCard.css

@@ -0,0 +1,3 @@
+.toggle {
+    float: right;
+}

chapter06/src/components/expandableCard.2/index.js

@@ -0,0 +1,49 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import "../general.css";
+import "./expandableCard.css";
+
+export class ExpandableCard extends React.PureComponent {
+    static propTypes = {
+        children: PropTypes.arrayOf(PropTypes.element).isRequired,
+        title: PropTypes.string.isRequired
+    };
+
+    state = {
+        open: false
+    };
+
+    toggle() {
+        this.setState(state => ({ open: !state.open }));
+    }
+
+    render() {
+        if (this.state.open) {
+            return (
+                <div className="bordered">
+                    {this.props.title}{" "}
+                    <div
+                        className="toggle"
+                        onClick={this.toggle.bind(this)}
+                    >
+                        &#x25B3;
+                    </div>
+                    <div>{this.props.children}</div>
+                </div>
+            );
+        } else {
+            return (
+                <div className="bordered">
+                    {this.props.title}{" "}
+                    <div
+                        className="toggle"
+                        onClick={this.toggle.bind(this)}
+                    >
+                        &#x25BD;
+                    </div>
+                </div>
+            );
+        }
+    }
+}

chapter06/src/components/general.css

@@ -0,0 +1,5 @@
+.bordered {
+    border: 1px solid blue;
+    padding: 2px;
+    margin: 4px;
+}

chapter06/src/components/regionsInformationTable/index.js

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { CountryFilterBar } from "../countryFilterBar";
+import { ResultsDataTable } from "../resultsDataTable.2";
+
+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: []
+    };
+
+    update(country: string) {
+        console.log(`Country ... ${country}`);
+
+        this.setState(() => ({
+            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
+                }
+            ]
+        }));
+    }
+
+    render() {
+        return (
+            <div>
+                <CountryFilterBar
+                    list={this.state.countries}
+                    onSelect={this.update.bind(this)}
+                />
+                <ResultsDataTable results={this.state.regions} />
+            </div>
+        );
+    }
+}

chapter06/src/components/resultsDataTable.1/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { ExpandableCard } from "../expandableCard.1";
+import "../general.css";
+
+export class ResultsDataTable extends React.PureComponent {
+    static propTypes = {
+        results: PropTypes.arrayOf(PropTypes.object).isRequired
+    };
+
+    render() {
+        if (this.props.results.length === 0) {
+            return <div className="bordered">No regions.</div>;
+        } else {
+            return (
+                <div className="bordered">
+                    {this.props.results.map(x => (
+                        <ExpandableCard
+                            key={x.id}
+                            name={x.name}
+                            cities={x.cities}
+                            population={x.pop}
+                        />
+                    ))}
+                </div>
+            );
+        }
+    }
+}

chapter06/src/components/resultsDataTable.2/index.js

@@ -1,6 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import { ExpandableCard } from "../expandableCard.2";
+import "../general.css";
+
 export class ResultsDataTable extends React.PureComponent {
     static propTypes = {
         results: PropTypes.arrayOf(PropTypes.object).isRequired
@@ -8,16 +11,15 @@ export class ResultsDataTable extends React.PureComponent {
 
     render() {
         if (this.props.results.length === 0) {
-            return "No regions can be shown.";
+            return <div className="bordered">No regions.</div>;
         } else {
             return (
-                <div>
+                <div className="bordered">
                     {this.props.results.map(x => (
-                        <div key={x.id}>
+                        <ExpandableCard key={x.id} title={x.name}>
-                            {x.name}
+                            <div>CITIES:{x.cities}</div>
-                            {x.cities}
+                            <div>POPULATION:{x.pop}</div>
-                            {x.pop}
+                        </ExpandableCard>
-                        </div>
                     ))}
                 </div>
             );

chapter06/src/regionsInformationTable/index.js

@@ -1,40 +0,0 @@
-import React from "react";
-
-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>
-                <CountryFilterBar
-                    list={this.state.countries}
-                    onSelect={this.update.bind(this)}
-                />
-                <ResultsDataTable results={this.state.regions} />
-            </div>
-        );
-    }
-}