Regions app with logging

chapter12/App.js

@@ -1,25 +1,23 @@
-import React from "react";
+/* @flow */
-import { StyleSheet, Text, View } from "react-native";
 
-export default class App extends React.Component {
+import React from "react";
+import { Provider } from "react-redux";
+import Reactotron from "reactotron-react-native";
+
+import { store } from "./src/regionsStyledApp/store";
+import { ConnectedMain } from "./src/regionsStyledApp/main.connected";
+
+if (process.env.NODE_ENV === "development") {
+    Reactotron.configure({ port: 9090 })
+        .useReactNative()
+        .connect();
+}
+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>
+                <ConnectedMain />
-                <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"
-    }
-});

chapter12/app.json

@@ -1,5 +1,5 @@
 {
-  "expo": {
+    "expo": {
-    "sdkVersion": "27.0.0"
+        "sdkVersion": "27.0.0"
-  }
+    }
 }

chapter12/package.json

@@ -18,8 +18,11 @@
         "jest-expo": "~27.0.0",
         "prettier": "^1.14.2",
         "react-addons-test-utils": "^15.6.2",
+        "react-devtools": "^3.3.4",
         "react-native-scripts": "1.14.0",
-        "react-test-renderer": "^16.5.1"
+        "react-test-renderer": "^16.5.1",
+        "reactotron-react-native": "^2.1.0",
+        "remote-redux-devtools-sp": "^0.5.13"
     },
     "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "scripts": {

chapter12/src/regionsStyledApp/countrySelect.component.js

@@ -24,21 +24,31 @@ export class CountrySelect extends React.PureComponent<{
     };
 
     componentDidMount() {
+        console.log("countrySelect: componentDidMount");
         if (this.props.list.length === 0) {
+            console.log("countrySelect: Need to get countries");
             this.props.getCountries();
         }
     }
 
-    onSelect = value => this.props.onSelect(value);
+    onSelect = (value: string) => {
+        console.log("countrySelect: onSelect called with value=", value);
+        this.props.onSelect(value);
+    };
 
     render() {
-        if (this.props.loading) {
+        if (this.props.loading || this.props.list.length === 0) {
+            console.log("countrySelect: render, no countries");
             return (
                 <View>
                     <Text>Loading countries...</Text>
                 </View>
             );
         } else {
+            console.log(
+                "countrySelect: render, countries length=",
+                this.props.list.length
+            );
             const sortedCountries = [...this.props.list].sort(
                 (a, b) => (a.countryName < b.countryName ? -1 : 1)
             );
@@ -49,7 +59,7 @@ export class CountrySelect extends React.PureComponent<{
                     <Picker
                         onValueChange={this.onSelect}
                         prompt="Country"
-                        selectedValue={this.props.currentCountry || "TV"}
+                        selectedValue={this.props.currentCountry}
                     >
                         <Picker.Item
                             key={"00"}

chapter12/src/regionsStyledApp/device.js

@@ -14,7 +14,7 @@ export type deviceDataType = {
 export const getDeviceData = (): deviceDataType => {
     const { height, width, scale, fontScale } = Dimensions.get("screen");
 
-    return {
+    const toReturn = {
         isTablet: Math.max(height, width) / Math.min(height, width) <= 1.6,
         isPortrait: height > width,
         height,
@@ -22,4 +22,8 @@ export const getDeviceData = (): deviceDataType => {
         scale,
         fontScale
     };
+
+    console.log("getDeviceData: returning", JSON.stringify(toReturn));
+
+    return toReturn;
 };

chapter12/src/regionsStyledApp/deviceHandler.component.js

@@ -11,7 +11,10 @@ class DeviceHandler extends React.PureComponent<{
         setDevice: PropTypes.func.isRequired
     };
 
-    onLayoutHandler = () => this.props.setDevice();
+    onLayoutHandler = () => {
+        console.log("deviceHandler: onLayoutHandler called");
+        this.props.setDevice();
+    };
 
     render() {
         return <View hidden onLayout={this.onLayoutHandler} />;

chapter12/src/regionsStyledApp/main.component.js

@@ -16,6 +16,11 @@ export class Main extends React.PureComponent<{
     deviceData: deviceDataType
 }> {
     render() {
+        console.log(
+            "main: render, isPortrait? ",
+            this.props.deviceData.isPortrait
+        );
+
         if (this.props.deviceData.isPortrait) {
             return (
                 <View style={{ flex: 1 }}>

chapter12/src/regionsStyledApp/regionsTable.component.js

@@ -32,12 +32,17 @@ export class RegionsTable extends React.PureComponent<{
 
     render() {
         if (this.props.list.length === 0) {
+            console.log("regionsTable: render, no regions");
             return (
                 <View style={ownStyle.fullSize}>
                     <Text>No regions.</Text>
                 </View>
             );
         } else {
+            console.log(
+                "regionsTable: render, regions length=",
+                this.props.list.length
+            );
             const ordered = [...this.props.list].sort(
                 (a, b) => (a.regionName < b.regionName ? -1 : 1)
             );

chapter12/src/regionsStyledApp/store.js

@@ -2,7 +2,11 @@
 
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
+import { composeWithDevTools } from "remote-redux-devtools-sp";
 
 import { reducer } from "./world.reducer";
 
-export const store = createStore(reducer, applyMiddleware(thunk));
+export const store = createStore(
+    reducer,
+    composeWithDevTools(applyMiddleware(thunk))
+);

chapter12/src/regionsStyledApp/world.actions.js

@@ -77,6 +77,7 @@ export const regionsFailure = () =>
 // Complex Actions:
 
 export const getCountries = () => async dispatch => {
+    console.log("getCountries: called");
     try {
         dispatch(countriesRequest());
         const result = await getCountriesAPI();
@@ -87,27 +88,7 @@ export const getCountries = () => async dispatch => {
 };
 
 export const getRegions = (country: string) => async dispatch => {
-    if (country) {
+    console.log("getRegions: called with ", 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));

package-lock.json

@@ -0,0 +1,42 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=",
+      "dev": true
+    },
+    "lodash": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+      "dev": true
+    },
+    "react-native-debugger": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-debugger/-/react-native-debugger-1.1.0.tgz",
+      "integrity": "sha512-ckFI3QztvmLUVE/TCA++V5apVWrsARejSXqSFdTtiKmTNOsHhF+KjiVzwBYk1TegiSCjDU0LHO4m5b+HjN0Ncg==",
+      "dev": true,
+      "requires": {
+        "humps": "^2.0.1",
+        "lodash": "^4.17.5",
+        "react-native-device-info": "^0.10.2",
+        "redux-create-reducer": "^1.1.1"
+      }
+    },
+    "react-native-device-info": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-0.10.2.tgz",
+      "integrity": "sha1-NQzWjtQ4OQIt3qCjpCNDnxb6T7o=",
+      "dev": true
+    },
+    "redux-create-reducer": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/redux-create-reducer/-/redux-create-reducer-1.1.3.tgz",
+      "integrity": "sha512-0K6wjFZRQfuzM2dT7CE4tnBNz+Bf6+e1bJKx+BI9HGZQeFMOwh4+vVTfj6kYaxGmjRRqC5deVs7Eu0ul9GiFvw==",
+      "dev": true
+    }
+  }
+}