Finished with types

chapter06/.storybook/config.js

@@ -1,3 +1,5 @@
+// @flow()
+
 import { configure } from "@storybook/react";
 
 configure(() => {

chapter06/package.json

@@ -14,7 +14,9 @@
         "eslint-plugin-babel": "^5.1.0",
         "eslint-plugin-flowtype": "^2.49.3",
         "eslint-plugin-react": "^7.10.0",
+        "flow": "^0.2.3",
         "flow-bin": "^0.75.0",
+        "flow-coverage-report": "^0.5.0",
         "flow-typed": "^2.4.0",
         "react-app-rewire-eslint": "^0.2.3",
         "react-app-rewired": "^1.5.2"

chapter06/src/App.js

@@ -3,7 +3,7 @@
 import React from "react";
 import { RegionsInformationTable } from "./components/regionsInformationTable";
 
-class App extends React.PureComponent {
+class App extends React.PureComponent<{}> {
     render() {
         return <RegionsInformationTable />;
     }

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

@@ -1,3 +1,5 @@
+/* flow() */
+
 import React from "react";
 import { storiesOf } from "@storybook/react";
 

chapter06/src/components/countryFilterBar/index.js

@@ -4,7 +4,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import "../general.css";
 
-export class CountryFilterBar extends React.PureComponent {
+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

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

@@ -5,7 +5,11 @@ import PropTypes from "prop-types";
 
 import "../general.css";
 
-export class ExpandableCard extends React.PureComponent {
+export class ExpandableCard extends React.PureComponent<{
+    name: string,
+    cities: number,
+    population: number
+}> {
     static propTypes = {
         name: PropTypes.string.isRequired,
         cities: PropTypes.number.isRequired,

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

@@ -1,12 +1,18 @@
 /* @flow */
 
-import React from "react";
+import * as React from "react";
 import PropTypes from "prop-types";
 
 import "../general.css";
 import "./expandableCard.css";
 
-export class ExpandableCard extends React.PureComponent {
+export class ExpandableCard extends React.PureComponent<
+    {
+        children: React.ChildrenArray<React.ChildrenArray<React.Node>>,
+        title: string
+    },
+    { open: boolean }
+> {
     static propTypes = {
         children: PropTypes.arrayOf(PropTypes.element).isRequired,
         title: PropTypes.string.isRequired

chapter06/src/components/regionsInformationTable/index.js

@@ -5,7 +5,21 @@ import React from "react";
 import { CountryFilterBar } from "../countryFilterBar";
 import { ResultsDataTable } from "../resultsDataTable.2";
 
-export class RegionsInformationTable extends React.PureComponent {
+export class RegionsInformationTable extends React.PureComponent<
+    {},
+    {
+        countries: Array<{
+            code: string,
+            name: string
+        }>,
+        regions: Array<{
+            id: string,
+            name: string,
+            cities: number,
+            pop: number
+        }>
+    }
+> {
     state = {
         countries: [
             { code: "AR", name: "Argentine" },

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

@@ -6,9 +6,20 @@ import PropTypes from "prop-types";
 import { ExpandableCard } from "../expandableCard.1";
 import "../general.css";
 
-export class ResultsDataTable extends React.PureComponent {
+export class ResultsDataTable extends React.PureComponent<{
+    results: Array<{
+        id: string,
+        name: string,
+        cities: number,
+        pop: number
+    }>
+}> {
     static propTypes = {
-        results: PropTypes.arrayOf(PropTypes.object).isRequired
+        results: PropTypes.arrayOf(PropTypes.object)
+    };
+
+    static defaultProps = {
+        results: []
     };
 
     render() {

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

@@ -6,7 +6,14 @@ import PropTypes from "prop-types";
 import { ExpandableCard } from "../expandableCard.2";
 import "../general.css";
 
-export class ResultsDataTable extends React.PureComponent {
+export class ResultsDataTable extends React.PureComponent<{
+    results: Array<{
+        id: string,
+        name: string,
+        cities: number,
+        pop: number
+    }>
+}> {
     static propTypes = {
         results: PropTypes.arrayOf(PropTypes.object).isRequired
     };

chapter06/src/index.js

@@ -4,7 +4,12 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
+
+//$FlowFixMe
 import registerServiceWorker from "./registerServiceWorker";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const root = document.getElementById("root");
+if (root) {
+    ReactDOM.render(<App />, root);
+}
 registerServiceWorker();