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

Regions app working in RN

Browse Source
This commit is contained in:
Federico Kereki
2018-08-29 22:14:11 -03:00
parent 01b438322a
commit 43945d111c
14 changed files with 434 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter11/App.js
+8 -18
View File
@@ -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}>
<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}>
<Main />
</Provider>
);
}
}
const white: string = "#fff";
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: white,
alignItems: "center",
justifyContent: "center"
}
});
chapter11/App.original.fixed.js
+27
View File
@@ -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
Generated
+33 -12
View File
@@ -1605,12 +1605,11 @@
"dev": true
},
"axios": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.16.2.tgz",
"integrity": "sha1-uk+S8XFn37q0CYN4VFS5rBScPG0=",
"dev": true,
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"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
+4 -1
View File
@@ -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
+63
View File
@@ -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
+22
View File
@@ -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
+6
View File
@@ -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
+18
View File
@@ -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
+44
View File
@@ -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
+12
View File
@@ -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
+9
View File
@@ -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
+8
View File
@@ -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
+106
View File
@@ -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
+74
View File
@@ -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;
}
};