Regions example ready

chapter08/src/App.regions.functional.js

@@ -0,0 +1,32 @@
+/* @flow */
+
+import React, { Component, Fragment } from "react";
+import { Provider } from "react-redux";
+
+import {
+    ConnectedCountrySelect,
+    ConnectedRegionsTable
+} from "./regionsApp";
+
+import { getCountries, getRegions } from "./regionsApp/serviceApi.js";
+import { store } from "./regionsApp/store.js";
+
+const dispatcher = fn => (...args) => store.dispatch(fn(...args));
+
+class App extends Component<{}> {
+    render() {
+        return (
+            <Provider store={store}>
+                <Fragment>
+                    <ConnectedCountrySelect
+                        getCountries={dispatcher(getCountries)}
+                        onSelect={dispatcher(getRegions)}
+                    />
+                    <ConnectedRegionsTable />
+                </Fragment>
+            </Provider>
+        );
+    }
+}
+
+export default App;

chapter08/src/App.regions.js

@@ -11,16 +11,14 @@ import {
 import { getCountries, getRegions } from "./regionsApp/serviceApi.js";
 import { store } from "./regionsApp/store.js";
 
-const dispatcher = fn => (...args) => store.dispatch(fn(...args));
-
 class App extends Component<{}> {
     render() {
         return (
             <Provider store={store}>
                 <Fragment>
                     <ConnectedCountrySelect
-                        getCountries={dispatcher(getCountries)}
-                        onSelect={dispatcher(getRegions)}
+                        getCountries={() => store.dispatch(getCountries())}
+                        onSelect={c => store.dispatch(getRegions(c))}
                     />
                     <ConnectedRegionsTable />
                 </Fragment>

chapter08/src/counterApp/clicksDisplay.component.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";
 
 export class ClicksDisplay extends React.PureComponent<{
     clicks: number

chapter08/src/counterApp/counter.component.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 {
     increment,

chapter08/src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import App from "./App.regions.js";
+import App from "./App.counter.js";
 import registerServiceWorker from "./registerServiceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));

chapter08/src/regionsApp/countrySelect.component.js

@@ -16,7 +16,9 @@ export class CountrySelect extends React.PureComponent<{
     };
 
     componentDidMount() {
-        this.props.getCountries();
+        if (this.props.list.length === 0) {
+            this.props.getCountries();
+        }
     }
 
     onSelect = (e: { target: HTMLOptionElement }) =>

chapter08/src/regionsApp/serviceApi.js

@@ -14,6 +14,8 @@ import {
 export const getCountries = () => async dispatch => {
     try {
         dispatch(countriesRequest());
+        // the next line delays execution for 5 seconds:
+        // await new Promise(resolve => setTimeout(resolve, 5000));
         const result = await axios.get(`http://fk-server:8080/countries`);
         dispatch(countriesSuccess(result.data));
     } catch (e) {
@@ -24,7 +26,30 @@ export const getCountries = () => async dispatch => {
 export const getRegions = (country: string) => async dispatch => {
     if (country) {
         try {
-            dispatch(regionsRequest());
+            dispatch(regionsRequest(country));
+            const result = await axios.get(
+                `http://fk-server:8080/regions/${country}`
+            );
+            dispatch(regionsSuccess(result.data));
+        } catch (e) {
+            dispatch(regionsFailure());
+        }
+    } else {
+        dispatch(regionsFailure());
+    }
+};
+
+export const getRegions2 = (country: string) => async (
+    dispatch,
+    getState
+) => {
+    if (country === getState().currentCountry) {
+        console.log("Hey! You are getting the same country as before!");
+    }
+
+    if (country) {
+        try {
+            dispatch(regionsRequest(country));
             const result = await axios.get(
                 `http://fk-server:8080/regions/${country}`
             );

chapter08/src/regionsApp/world.actions.js

@@ -1,32 +1,57 @@
 /* @flow */
 
+// Countries actions
+
 export const COUNTRIES_REQUEST = "countries:request";
 export const COUNTRIES_SUCCESS = "countries:success";
 export const COUNTRIES_FAILURE = "countries:failure";
 
+export type CountriesAction = {
+    type: string,
+    country?: string,
+    listOfCountries?: [object]
+};
+
+export const countriesRequest = () =>
+    ({
+        type: COUNTRIES_REQUEST
+    }: CountriesActions);
+
+export const countriesSuccess = (listOfCountries: []) =>
+    ({
+        type: COUNTRIES_SUCCESS,
+        listOfCountries
+    }: CountriesActions);
+
+export const countriesFailure = () =>
+    ({
+        type: COUNTRIES_FAILURE
+    }: CountriesActions);
+
+// Regions actions
+
 export const REGIONS_REQUEST = "regions:request";
 export const REGIONS_SUCCESS = "regions:success";
 export const REGIONS_FAILURE = "regions:failure";
 
-export type worldAction = {
+export type RegionsAction = {
     type: string,
-    value?: number
+    listOfRegions?: [object]
 };
 
-export const countriesRequest = () => ({ type: COUNTRIES_REQUEST });
+export const regionsRequest = (country: string) =>
+    ({
+        type: REGIONS_REQUEST,
+        country
+    }: RegionsActions);
 
-export const countriesSuccess = (listOfCountries: []) => ({
-    type: COUNTRIES_SUCCESS,
-    listOfCountries
-});
+export const regionsSuccess = (listOfRegions: [{}]) =>
+    ({
+        type: REGIONS_SUCCESS,
+        listOfRegions
+    }: RegionsActions);
 
-export const countriesFailure = () => ({ type: COUNTRIES_FAILURE });
-
-export const regionsRequest = () => ({ type: REGIONS_REQUEST });
-
-export const regionsSuccess = (listOfRegions: []) => ({
-    type: REGIONS_SUCCESS,
-    listOfRegions
-});
-
-export const regionsFailure = () => ({ type: REGIONS_FAILURE });
+export const regionsFailure = () =>
+    ({
+        type: REGIONS_FAILURE
+    }: RegionsActions);

chapter08/src/regionsApp/worlds.reducer.js

@@ -9,17 +9,20 @@ import {
     REGIONS_FAILURE
 } from "./world.actions";
 
+import type { CountriesAction, RegionsAction } from "./world.actions";
+
 // import type { CounterAction } from "./world.actions.js";
 
 export const reducer = (
     state: object = {
         // initial state
         loadingCountries: false,
+        currentCountry: "",
         countries: [],
         loadingRegions: false,
         regions: []
     },
-    action: object
+    action: CountriesAction | RegionsAction
 ) => {
     switch (action.type) {
         case COUNTRIES_REQUEST:
@@ -47,6 +50,7 @@ export const reducer = (
             return {
                 ...state,
                 loadingRegions: true,
+                currentCountry: action.country,
                 regions: []
             };