Regions app working in RN

chapter11/App.js

@@ -1,27 +1,17 @@
 /* @flow */
 
 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Provider } from "react-redux";
 
-export default class App extends React.Component<> {
+import { store } from "./src/regionsApp/store";
+import { Main } from "./src/regionsApp/main";
+
+export default class App extends React.PureComponent<> {
     render() {
         return (
-            <View style={styles.container}>
+            <Provider store={store}>
-                <Text>Open up App.js to start working on your app!</Text>
+                <Main />
-                <Text>Changes you make will automatically reload.</Text>
+            </Provider>
-                <Text>Shake your phone to open the developer menu.</Text>
-            </View>
         );
     }
 }
-
-const white: string = "#fff";
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: white,
-        alignItems: "center",
-        justifyContent: "center"
-    }
-});

chapter11/App.original.fixed.js

@@ -0,0 +1,27 @@
+/* @flow */
+
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+export default class App extends React.Component<> {
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text>Open up App.js to start working on your app!</Text>
+                <Text>Changes you make will automatically reload.</Text>
+                <Text>Shake your phone to open the developer menu.</Text>
+            </View>
+        );
+    }
+}
+
+const white: string = "#fff";
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: white,
+        alignItems: "center",
+        justifyContent: "center"
+    }
+});

chapter11/package-lock.json

@@ -1605,12 +1605,11 @@
       "dev": true
     },
     "axios": {
-      "version": "0.16.2",
+      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.16.2.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
-      "integrity": "sha1-uk+S8XFn37q0CYN4VFS5rBScPG0=",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
-      "dev": true,
       "requires": {
-        "follow-redirects": "^1.2.3",
+        "follow-redirects": "^1.3.0",
         "is-buffer": "^1.1.5"
       }
     },
@@ -5599,7 +5598,6 @@
       "version": "1.5.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.6.tgz",
       "integrity": "sha512-xay/eYZGgdpb3rpugZj1HunNaPcqc6fud/RW7LNEQntvKzuRO4DDLL+MnJIbTHh6t3Kda3v2RvhY2doxUddnig==",
-      "dev": true,
       "requires": {
         "debug": "^3.1.0"
       },
@@ -5608,7 +5606,6 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -5724,7 +5721,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5761,7 +5759,8 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -5770,7 +5769,8 @@
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5873,7 +5873,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5883,6 +5884,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6006,6 +6008,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6111,6 +6114,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6128,6 +6132,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6166,7 +6171,8 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
@@ -10648,6 +10654,11 @@
         "deep-diff": "0.3.4"
       }
     },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -13432,6 +13443,16 @@
         "yesno": "^0.0.1"
       },
       "dependencies": {
+        "axios": {
+          "version": "0.16.2",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.16.2.tgz",
+          "integrity": "sha1-uk+S8XFn37q0CYN4VFS5rBScPG0=",
+          "dev": true,
+          "requires": {
+            "follow-redirects": "^1.2.3",
+            "is-buffer": "^1.1.5"
+          }
+        },
         "fs-extra": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",

chapter11/package.json

@@ -31,8 +31,11 @@
         "preset": "jest-expo"
     },
     "dependencies": {
+        "axios": "^0.18.0",
         "expo": "^27.0.1",
+        "prop-types": "^15.6.2",
         "react": "16.3.1",
-        "react-native": "~0.55.2"
+        "react-native": "~0.55.2",
+        "redux-thunk": "^2.3.0"
     }
 }

chapter11/src/regionsApp/countrySelect.component.js

@@ -0,0 +1,63 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { View, Text, Picker } from "react-native";
+
+export class CountrySelect extends React.PureComponent<{
+    dispatch: ({}) => any
+}> {
+    static propTypes = {
+        loading: PropTypes.bool.isRequired,
+        currentCountry: PropTypes.string.isRequired,
+        list: PropTypes.arrayOf(PropTypes.object).isRequired,
+        onSelect: PropTypes.func.isRequired,
+        getCountries: PropTypes.func.isRequired
+    };
+
+    componentDidMount() {
+        if (this.props.list.length === 0) {
+            this.props.getCountries();
+        }
+    }
+
+    onSelect = value => this.props.onSelect(value);
+
+    render() {
+        if (this.props.loading) {
+            return (
+                <View>
+                    <Text>Loading countries...</Text>
+                </View>
+            );
+        } else {
+            const sortedCountries = [...this.props.list].sort(
+                (a, b) => (a.countryName < b.countryName ? -1 : 1)
+            );
+
+            return (
+                <View>
+                    <Text>Country:</Text>
+                    <Picker
+                        onValueChange={this.onSelect}
+                        prompt="Country"
+                        selectedValue={this.props.currentCountry}
+                    >
+                        <Picker.Item
+                            key={"00"}
+                            label={"Select a country:"}
+                            value={""}
+                        />
+                        {sortedCountries.map(x => (
+                            <Picker.Item
+                                key={x.countryCode}
+                                label={x.countryName}
+                                value={x.countryCode}
+                            />
+                        ))}
+                    </Picker>
+                </View>
+            );
+        }
+    }
+}

chapter11/src/regionsApp/countrySelect.connected.js

@@ -0,0 +1,22 @@
+/* @flow */
+
+import { connect } from "react-redux";
+
+import { CountrySelect } from "./countrySelect.component";
+import { getCountries, getRegions } from "./world.actions";
+
+const getProps = state => ({
+    list: state.countries,
+    currentCountry: state.currentCountry,
+    loading: state.loadingCountries
+});
+
+const getDispatch = dispatch => ({
+    getCountries: () => dispatch(getCountries()),
+    onSelect: c => dispatch(getRegions(c))
+});
+
+export const ConnectedCountrySelect = connect(
+    getProps,
+    getDispatch
+)(CountrySelect);

chapter11/src/regionsApp/index.js

@@ -0,0 +1,6 @@
+/* @flow */
+
+import { ConnectedCountrySelect } from "./countrySelect.connected.js";
+import { ConnectedRegionsTable } from "./regionsTable.connected.js";
+
+export { ConnectedCountrySelect, ConnectedRegionsTable };

chapter11/src/regionsApp/main.js

@@ -0,0 +1,18 @@
+/* @flow */
+
+import React from "react";
+import { View, StatusBar } from "react-native";
+
+import { ConnectedCountrySelect, ConnectedRegionsTable } from ".";
+
+export class Main extends React.PureComponent<> {
+    render() {
+        return (
+            <View>
+                <StatusBar hidden />
+                <ConnectedCountrySelect />
+                <ConnectedRegionsTable />
+            </View>
+        );
+    }
+}

chapter11/src/regionsApp/regionsTable.component.js

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { View, Text } from "react-native";
+
+export class RegionsTable extends React.PureComponent<{
+    list: Array<{
+        regionCode: string,
+        regionName: string
+    }>
+}> {
+    static propTypes = {
+        list: PropTypes.arrayOf(PropTypes.object).isRequired
+    };
+
+    static defaultProps = {
+        list: []
+    };
+
+render() {
+    if (this.props.list.length === 0) {
+        return (
+            <View>
+                <Text>No regions.</Text>
+            </View>
+        );
+    } else {
+        const ordered = [...this.props.list].sort(
+            (a, b) => (a.regionName < b.regionName ? -1 : 1)
+        );
+
+        return (
+            <View>
+                {ordered.map(x => (
+                    <View key={`${x.countryCode}-${x.regionCode}`>
+                        <Text>{x.regionName}</Text>
+                    </View>
+                ))}
+            </View>
+        );
+    }
+}
+}

chapter11/src/regionsApp/regionsTable.connected.js

@@ -0,0 +1,12 @@
+/* @flow */
+
+import { connect } from "react-redux";
+
+import { RegionsTable } from "./regionsTable.component";
+
+const getProps = state => ({
+    list: state.regions,
+    loading: state.loadingRegions
+});
+
+export const ConnectedRegionsTable = connect(getProps)(RegionsTable);

chapter11/src/regionsApp/serviceApi.js

@@ -0,0 +1,9 @@
+/* @flow */
+
+import axios from "axios";
+
+export const getCountriesAPI = () =>
+    axios.get(`http://192.168.1.200:8080/countries`);
+
+export const getRegionsAPI = country =>
+    axios.get(`http://192.168.1.200:8080/regions/${country}`);

chapter11/src/regionsApp/store.js

@@ -0,0 +1,8 @@
+/* @flow */
+
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+
+import { reducer } from "./world.reducer";
+
+export const store = createStore(reducer, applyMiddleware(thunk));

chapter11/src/regionsApp/world.actions.js

@@ -0,0 +1,106 @@
+/* @flow */
+
+import { getCountriesAPI, getRegionsAPI } from "./serviceApi";
+
+// 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 RegionsAction = {
+    type: string,
+    listOfRegions?: [object]
+};
+
+export const regionsRequest = (country: string) =>
+    ({
+        type: REGIONS_REQUEST,
+        country
+    }: RegionsActions);
+
+export const regionsSuccess = (listOfRegions: [{}]) =>
+    ({
+        type: REGIONS_SUCCESS,
+        listOfRegions
+    }: RegionsActions);
+
+export const regionsFailure = () =>
+    ({
+        type: REGIONS_FAILURE
+    }: RegionsActions);
+
+// Complex Actions:
+
+export const getCountries = () => async dispatch => {
+    try {
+        dispatch(countriesRequest());
+        const result = await getCountriesAPI();
+        dispatch(countriesSuccess(result.data));
+    } catch (e) {
+        dispatch(countriesFailure());
+    }
+};
+
+export const getRegions = (country: string) => async dispatch => {
+    if (country) {
+        try {
+            dispatch(regionsRequest(country));
+            const result = await getRegionsAPI(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 getRegionsAPI(country);
+            dispatch(regionsSuccess(result.data));
+        } catch (e) {
+            dispatch(regionsFailure());
+        }
+    } else {
+        dispatch(regionsFailure());
+    }
+};

chapter11/src/regionsApp/world.reducer.js

@@ -0,0 +1,74 @@
+/* @flow */
+
+import {
+    COUNTRIES_REQUEST,
+    COUNTRIES_SUCCESS,
+    COUNTRIES_FAILURE,
+    REGIONS_REQUEST,
+    REGIONS_SUCCESS,
+    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: CountriesAction | RegionsAction
+) => {
+    switch (action.type) {
+        case COUNTRIES_REQUEST:
+            return {
+                ...state,
+                loadingCountries: true,
+                countries: []
+            };
+
+        case COUNTRIES_SUCCESS:
+            return {
+                ...state,
+                loadingCountries: false,
+                countries: action.listOfCountries
+            };
+
+        case COUNTRIES_FAILURE:
+            return {
+                ...state,
+                loadingCountries: false,
+                countries: []
+            };
+
+        case REGIONS_REQUEST:
+            return {
+                ...state,
+                loadingRegions: true,
+                currentCountry: action.country,
+                regions: []
+            };
+
+        case REGIONS_SUCCESS:
+            return {
+                ...state,
+                loadingRegions: false,
+                regions: action.listOfRegions
+            };
+
+        case REGIONS_FAILURE:
+            return {
+                ...state,
+                loadingRegions: false,
+                regions: []
+            };
+
+        default:
+            return state;
+    }
+};