ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Regions app with logging

Browse Source
This commit is contained in:
Federico Kereki
2018-09-20 21:30:52 -03:00
parent 5158edc352
commit 6159e3c5c3
12 changed files with 1216 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter12/App.js
+17 -19
View File
@@ -1,25 +1,23 @@
import React from "react";
import { StyleSheet, Text, View } from "react-native";
/* @flow */
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}>
<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>
<Provider store={store}>
<ConnectedMain />
</Provider>
);
}
}
const white: string = "#fff";
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: white,
alignItems: "center",
justifyContent: "center"
}
});
chapter12/app.json
+3 -3
View File
@@ -1,5 +1,5 @@
{
"expo": {
"sdkVersion": "27.0.0"
}
"expo": {
"sdkVersion": "27.0.0"
}
}
chapter12/package-lock.json
Generated
+1111
View File
File diff suppressed because it is too large Load Diff
chapter12/package.json
+4 -1
View File
@@ -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
+13 -3
View File
@@ -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
+5 -1
View File
@@ -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
+4 -1
View File
@@ -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
+5
View File
@@ -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
+5
View File
@@ -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
+5 -1
View File
@@ -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
+2 -21
View File
@@ -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) {
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!");
}
console.log("getRegions: called with ", country);
if (country) {
try {
dispatch(regionsRequest(country));
package-lock.json
Generated
+42
View File
@@ -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
}
}
}