Redux working

chapter06/src/components/countryFilterBar/countryFilterBar.js

@@ -0,0 +1,38 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import "../general.css";
+
+export class CountryFilterBar extends React.PureComponent<{
+    list?: Array<{ code: string, name: string }>,
+    onSelect: string => void
+}> {
+    static propTypes = {
+        list: PropTypes.arrayOf(PropTypes.object),
+        onSelect: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+        list: []
+    };
+
+    onSelect = (e: { target: HTMLOptionElement }) =>
+        this.props.onSelect(e.target.value);
+
+    render() {
+        return (
+            <div className="bordered">
+                Country:&nbsp;
+                <select onChange={this.onSelect}>
+                    <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/components/countryFilterBar/countryFilterBar.old.style.js

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import "../general.css";
+
+export class CountryFilterBar extends React.PureComponent<{
+    list: Array<{ code: string, name: string }>,
+    onSelect: string => void
+}> {
+    constructor(props) {
+        super(props);
+        this.onSelect = this.onSelect.bind(this);
+    }
+
+    onSelect(e: { target: HTMLOptionElement }) {
+        this.props.onSelect(e.target.value);
+    }
+
+    render() {
+        return (
+            <div className="bordered">
+                Country:&nbsp;
+                <select onChange={this.onSelect}>
+                    <option value="">Select a country:</option>
+                    {this.props.list.map(x => (
+                        <option key={x.code} value={x.code}>
+                            {x.name}
+                        </option>
+                    ))}
+                </select>
+            </div>
+        );
+    }
+}
+
+CountryFilterBar.propTypes = {
+    list: PropTypes.arrayOf(PropTypes.object).isRequired,
+    onSelect: PropTypes.func.isRequired
+};
+
+CountryFilterBar.defaultProps = {
+    list: []
+};

chapter06/src/components/countryFilterBar/countryFilterBar.story.js

@@ -3,7 +3,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 
-import { CountryFilterBar } from "./";
+import { CountryFilterBar } from ".";
 
 const countries = [
     { code: "AR", name: "Argentine" },

chapter06/src/components/countryFilterBar/index.js

@@ -1,35 +1,4 @@
 /* @flow */
 
-import React from "react";
-import PropTypes from "prop-types";
-import "../general.css";
-
-export class CountryFilterBar extends React.PureComponent<{
-    list: Array<{ code: string, name: string }>,
-    onSelect: string => void
-}> {
-    static propTypes = {
-        list: PropTypes.arrayOf(PropTypes.object).isRequired,
-        onSelect: PropTypes.func.isRequired
-    };
-
-    onSelect(e: { target: HTMLOptionElement }) {
-        this.props.onSelect(e.target.value);
-    }
-
-    render() {
-        return (
-            <div className="bordered">
-                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>
-        );
-    }
-}
+import { CountryFilterBar } from "./countryFilterBar.js";
+export { CountryFilterBar };

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

@@ -1,7 +1,7 @@
 /* @flow */
 
-import React from "../../../../../../.cache/typescript/2.9/node_modules/@types/react";
-import PropTypes from "../../../../../../.cache/typescript/2.9/node_modules/@types/prop-types";
+import React from "react";
+import PropTypes from "prop-types";
 
 import "../general.css";
 

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

@@ -22,19 +22,16 @@ export class ExpandableCard extends React.PureComponent<
         open: false
     };
 
-    toggle() {
+    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)}
-                    >
+                    <div className="toggle" onClick={this.toggle}>
                         &#x25B3;
                     </div>
                     <div>{this.props.children}</div>
@@ -44,10 +41,7 @@ export class ExpandableCard extends React.PureComponent<
             return (
                 <div className="bordered">
                     {this.props.title}
-                    <div
-                        className="toggle"
-                        onClick={this.toggle.bind(this)}
-                    >
+                    <div className="toggle" onClick={this.toggle}>
                         &#x25BD;
                     </div>
                 </div>

chapter06/src/components/regionsInformationTable/index.js

@@ -31,7 +31,7 @@ export class RegionsInformationTable extends React.PureComponent<
         regions: []
     };
 
-    update(country: string) {
+    update = (country: string) => {
         console.log(`Country ... ${country}`);
 
         this.setState(() => ({
@@ -68,14 +68,14 @@ export class RegionsInformationTable extends React.PureComponent<
                 }
             ]
         }));
-    }
+    };
 
     render() {
         return (
             <div>
                 <CountryFilterBar
                     list={this.state.countries}
-                    onSelect={this.update.bind(this)}
+                    onSelect={this.update}
                 />
                 <ResultsDataTable results={this.state.regions} />
             </div>