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

Renamed directory

Browse Source
This commit is contained in:
Federico Kereki
2018-09-15 10:21:19 -03:00
parent d94877aba7
commit 699fd22567
57 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter11/src/adaptiveApp/actions.js
-22
View File
@@ -1,22 +0,0 @@
/* @flow */
import { getDeviceData } from "./device";
import type { deviceDataType } from "./device";
export const DEVICE_DATA = "device:data";
export type deviceDataAction = {
type: string,
deviceData: deviceDataType
};
export const setDevice = (deviceData?: object) =>
({
type: DEVICE_DATA,
deviceData: deviceData || getDeviceData()
}: deviceDataAction);
/*
A real app would have many more actions!
*/
chapter11/src/adaptiveApp/adaptiveView.component.js
-56
View File
@@ -1,56 +0,0 @@
/* @flow */
import React from "react";
import PropTypes from "prop-types";
import { View, Text, StyleSheet } from "react-native";
import type { deviceDataType } from "./device";
const textStyle = StyleSheet.create({
bigText: {
fontWeight: "bold",
fontSize: 24
}
});
export class AdaptiveView extends React.PureComponent<{
deviceData: deviceDataType
}> {
static propTypes = {
deviceData: PropTypes.object.isRequired
};
renderHandset() {
return (
<View>
<Text style={textStyle.bigText}>
I believe I am a HANDSET currently in
{this.props.deviceData.isPortrait
? " PORTRAIT "
: " LANDSCAPE "}
orientation
</Text>
</View>
);
}
renderTablet() {
return (
<View>
<Text style={textStyle.bigText}>
I think I am a
{this.props.deviceData.isPortrait
? " PORTRAIT "
: " LANDSCAPE "}
TABLET
</Text>
</View>
);
}
render() {
return this.props.deviceData.isTablet
? this.renderTablet()
: this.renderHandset();
}
}
chapter11/src/adaptiveApp/adaptiveView.connected.js
-11
View File
@@ -1,11 +0,0 @@
/* @flow */
import { connect } from "react-redux";
import { AdaptiveView } from "./adaptiveView.component";
const getProps = state => ({
deviceData: state.deviceData
});
export const ConnectedAdaptiveView = connect(getProps)(AdaptiveView);
chapter11/src/adaptiveApp/device.js
-25
View File
@@ -1,25 +0,0 @@
/* @flow */
import { Dimensions } from "react-native";
export type deviceDataType = {
isTablet: boolean,
isPortrait: boolean,
height: number,
width: number,
scale: number,
fontScale: number
};
export const getDeviceData = (): deviceDataType => {
const { height, width, scale, fontScale } = Dimensions.get("screen");
return {
isTablet: Math.max(height, width) / Math.min(height, width) <= 1.6,
isPortrait: height > width,
height,
width,
scale,
fontScale
};
};
chapter11/src/adaptiveApp/deviceHandler.component.js
-21
View File
@@ -1,21 +0,0 @@
/* @flow */
import React from "react";
import PropTypes from "prop-types";
import { View } from "react-native";
class DeviceHandler extends React.PureComponent<{
setDevice: () => any
}> {
static propTypes = {
setDevice: PropTypes.func.isRequired
};
onLayoutHandler = () => this.props.setDevice();
render() {
return <View hidden onLayout={this.onLayoutHandler} />;
}
}
export { DeviceHandler };
chapter11/src/adaptiveApp/deviceHandler.connected.js
-15
View File
@@ -1,15 +0,0 @@
/* @flow */
import { connect } from "react-redux";
import { DeviceHandler } from "./deviceHandler.component";
import { setDevice } from "./actions";
const getDispatch = dispatch => ({
setDevice: () => dispatch(setDevice())
});
export const ConnectedDeviceHandler = connect(
null,
getDispatch
)(DeviceHandler);
chapter11/src/adaptiveApp/main.js
-19
View File
@@ -1,19 +0,0 @@
/* @flow */
import React from "react";
import { View, StatusBar } from "react-native";
import { ConnectedAdaptiveView } from "./adaptiveView.connected";
import { ConnectedDeviceHandler } from "./deviceHandler.connected";
export class Main extends React.PureComponent<> {
render() {
return (
<View>
<StatusBar hidden />
<ConnectedDeviceHandler />
<ConnectedAdaptiveView />
</View>
);
}
}
chapter11/src/adaptiveApp/reducer.js
-31
View File
@@ -1,31 +0,0 @@
/* @flow */
import { getDeviceData } from "./device";
import { DEVICE_DATA } from "./actions";
import type { deviceAction } from "./actions";
export const reducer = (
state: object = {
// initial state: more app data, plus
deviceData: getDeviceData()
},
action: deviceAction
) => {
switch (action.type) {
case DEVICE_DATA:
return {
...state,
deviceData: action.deviceData
};
/*
In a real app, here there would
be plenty more "case"s
*/
default:
return state;
}
};
chapter11/src/adaptiveApp/store.js
-8
View File
@@ -1,8 +0,0 @@
/* @flow */
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { reducer } from "./reducer";
export const store = createStore(reducer, applyMiddleware(thunk));
chapter11/src/regionsApp/countrySelect.component.js
-63
View File
@@ -1,63 +0,0 @@
/* @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
@@ -1,22 +0,0 @@
/* @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
@@ -1,6 +0,0 @@
/* @flow */
import { ConnectedCountrySelect } from "./countrySelect.connected.js";
import { ConnectedRegionsTable } from "./regionsTable.connected.js";
export { ConnectedCountrySelect, ConnectedRegionsTable };
chapter11/src/regionsApp/main.js
-18
View File
@@ -1,18 +0,0 @@
/* @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
@@ -1,44 +0,0 @@
/* @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
@@ -1,12 +0,0 @@
/* @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
@@ -1,9 +0,0 @@
/* @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
@@ -1,8 +0,0 @@
/* @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
@@ -1,106 +0,0 @@
/* @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
@@ -1,74 +0,0 @@
/* @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;
}
};
chapter11/src/regionsStyledApp/countrySelect.component.js
-71
View File
@@ -1,71 +0,0 @@
/* @flow */
import React from "react";
import PropTypes from "prop-types";
import { View, Text, Picker } from "react-native";
import type { deviceDataType } from "./device";
export class CountrySelect extends React.PureComponent<{
deviceData: deviceDataType,
loading: boolean,
currentCountry: string,
list: Array<object>,
onSelect: string => void,
getCountries: () => void
}> {
static propTypes = {
deviceData: PropTypes.object.isRequired, // deviceDataType,
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 || "TV"}
>
<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/regionsStyledApp/countrySelect.connected.js
-23
View File
@@ -1,23 +0,0 @@
/* @flow */
import { connect } from "react-redux";
import { CountrySelect } from "./countrySelect.component";
import { getCountries, getRegions } from "./world.actions";
const getProps = state => ({
deviceData: state.deviceData,
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/regionsStyledApp/device.js
-25
View File
@@ -1,25 +0,0 @@
/* @flow */
import { Dimensions } from "react-native";
export type deviceDataType = {
isTablet: boolean,
isPortrait: boolean,
height: number,
width: number,
scale: number,
fontScale: number
};
export const getDeviceData = (): deviceDataType => {
const { height, width, scale, fontScale } = Dimensions.get("screen");
return {
isTablet: Math.max(height, width) / Math.min(height, width) <= 1.6,
isPortrait: height > width,
height,
width,
scale,
fontScale
};
};
chapter11/src/regionsStyledApp/deviceHandler.component.js
-21
View File
@@ -1,21 +0,0 @@
/* @flow */
import React from "react";
import PropTypes from "prop-types";
import { View } from "react-native";
class DeviceHandler extends React.PureComponent<{
setDevice: () => any
}> {
static propTypes = {
setDevice: PropTypes.func.isRequired
};
onLayoutHandler = () => this.props.setDevice();
render() {
return <View hidden onLayout={this.onLayoutHandler} />;
}
}
export { DeviceHandler };
chapter11/src/regionsStyledApp/deviceHandler.connected.js
-15
View File
@@ -1,15 +0,0 @@
/* @flow */
import { connect } from "react-redux";
import { DeviceHandler } from "./deviceHandler.component";
import { setDevice } from "./world.actions";
const getDispatch = dispatch => ({
setDevice: () => dispatch(setDevice())
});
export const ConnectedDeviceHandler = connect(
null,
getDispatch
)(DeviceHandler);
chapter11/src/regionsStyledApp/index.js
-11
View File
@@ -1,11 +0,0 @@
/* @flow */
import { ConnectedCountrySelect } from "./countrySelect.connected.js";
import { ConnectedRegionsTable } from "./regionsTable.connected.js";
import { ConnectedDeviceHandler } from "./deviceHandler.connected";
export {
ConnectedCountrySelect,
ConnectedRegionsTable,
ConnectedDeviceHandler
};
chapter11/src/regionsStyledApp/main.component.js
-57
View File
@@ -1,57 +0,0 @@
/* @flow */
import React from "react";
import { View, StatusBar } from "react-native";
import {
ConnectedCountrySelect,
ConnectedRegionsTable,
ConnectedDeviceHandler
} from ".";
import type { deviceDataType } from "./device";
/* eslint-disable react-native/no-inline-styles */
export class Main extends React.PureComponent<{
deviceData: deviceDataType
}> {
render() {
if (this.props.deviceData.isPortrait) {
return (
<View style={{ flex: 1 }}>
<StatusBar hidden />
<ConnectedDeviceHandler />
<View style={{ flex: 1, flexDirection: "column" }}>
<View>
<ConnectedCountrySelect />
</View>
<View style={{ flex: 1 }}>
<ConnectedRegionsTable />
</View>
</View>
</View>
);
} else {
return (
<View style={{ flex: 1 }}>
<StatusBar hidden />
<ConnectedDeviceHandler />
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "center"
}}
>
<ConnectedCountrySelect />
</View>
<View style={{ flex: 1 }}>
<ConnectedRegionsTable />
</View>
</View>
</View>
);
}
}
}
chapter11/src/regionsStyledApp/main.connected.js
-11
View File
@@ -1,11 +0,0 @@
/* @flow */
import { connect } from "react-redux";
import { Main } from "./main.component";
const getProps = state => ({
deviceData: state.deviceData
});
export const ConnectedMain = connect(getProps)(Main);
chapter11/src/regionsStyledApp/regionsTable.component.js
-88
View File
@@ -1,88 +0,0 @@
/* sssssflow */
/* eslint-disable */
import React, { Component } from "react";
import { Text, View, StatusBar, Button, StyleSheet } from "react-native";
import { createDrawerNavigator } from "react-navigation";
// import { store } from "./src/routingApp/store";
const myStyles = StyleSheet.create({
fullView: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
bigText: {
fontSize: 24,
fontWeight: "bold"
}
});
const makeSimpleView = text =>
class extends Component<{}> {
displayName = `View:${text}`;
render() {
return (
<View style={myStyles.fullView}>
<Text style={myStyles.bigText}>{text}</Text>
</View>
);
}
};
const JumpButton = props => (
<Button
onPress={() => this.props.navigation.navigate("Charlie")}
title="Gotocharlie"
/>
);
const Home = makeSimpleView("Home!");
const Alpha = makeSimpleView("Alpha");
const Bravo = makeSimpleView("Bravo");
const Charlie = makeSimpleView("Charlie");
const Zulu = makeSimpleView("Zulu");
const Help = makeSimpleView("Help");
const LinkJump = props => (
<View style={{ flex: 1 }}>
<Button
onPress={() => props.navigation.navigate("Alpha")}
title="Go to Alpha"
/>
<Button
onPress={() => props.navigation.navigate("Bravo")}
title="Go to Bravo"
/>
<Button
onPress={() => props.navigation.navigate("Charlie")}
title="Go to Charlie"
/>
</View>
);
const MyDrawer = createDrawerNavigator({
Home: { screen: Home },
Alpha: { screen: Alpha },
Bravo: { screen: Bravo },
Charlie: { screen: Charlie },
Zulu: { screen: Zulu },
Help: { screen: Help },
LinkJump: { screen: LinkJump }
});
class App extends Component {
render() {
return (
<React.Fragment>
<StatusBar hidden />
<Text>Something in the top bar...!</Text>
<MyDrawer />
</React.Fragment>
);
}
}
export default App;
chapter11/src/regionsStyledApp/regionsTable.connected.js
-13
View File
@@ -1,13 +0,0 @@
/* @flow */
import { connect } from "react-redux";
import { RegionsTable } from "./regionsTable.component";
const getProps = state => ({
deviceData: state.deviceData,
list: state.regions,
loading: state.loadingRegions
});
export const ConnectedRegionsTable = connect(getProps)(RegionsTable);
chapter11/src/regionsStyledApp/serviceApi.js
-9
View File
@@ -1,9 +0,0 @@
/* @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/regionsStyledApp/store.js
-8
View File
@@ -1,8 +0,0 @@
/* @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/regionsStyledApp/styleConstants.js
-11
View File
@@ -1,11 +0,0 @@
/* @flow */
import { StyleSheet } from "react-native";
export const styles = StyleSheet.create({
fullSize: {
flex: 1
}
});
export const lowColor = "lightgray";
chapter11/src/regionsStyledApp/world.actions.js
-122
View File
@@ -1,122 +0,0 @@
/* @flow */
import { getCountriesAPI, getRegionsAPI } from "./serviceApi";
import { getDeviceData } from "./device";
// Device layout action
export const DEVICE_DATA = "device:data";
export type deviceDataAction = {
type: string,
deviceData: any // deviceDataType
};
export const setDevice = (deviceData?: object) =>
({
type: DEVICE_DATA,
deviceData: deviceData || getDeviceData()
}: deviceDataAction);
// 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/regionsStyledApp/world.reducer.js
-81
View File
@@ -1,81 +0,0 @@
/* @flow */
import {
DEVICE_DATA,
COUNTRIES_REQUEST,
COUNTRIES_SUCCESS,
COUNTRIES_FAILURE,
REGIONS_REQUEST,
REGIONS_SUCCESS,
REGIONS_FAILURE
} from "./world.actions";
import { getDeviceData } from "./device";
import type { CountriesAction, RegionsAction } from "./world.actions";
export const reducer = (
state: object = {
// initial state
deviceData: getDeviceData(),
loadingCountries: false,
currentCountry: "",
countries: [],
loadingRegions: false,
regions: []
},
action: CountriesAction | RegionsAction
) => {
switch (action.type) {
case DEVICE_DATA:
return {
...state,
deviceData: action.deviceData
};
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;
}
};
chapter11/src/routingApp/drawer.js
-29
View File
@@ -1,29 +0,0 @@
/* @flow */
import { createDrawerNavigator } from "react-navigation";
import {
Home,
Alpha,
Bravo,
Charlie,
Zulu,
Help,
SomeJumps
} from "./screens";
export const MyDrawer = createDrawerNavigator(
{
Home: { screen: Home },
Alpha: { screen: Alpha },
Bravo: { screen: Bravo },
Charlie: { screen: Charlie },
Zulu: { screen: Zulu },
["Get Help"]: { screen: Help },
["Some jumps"]: { screen: SomeJumps }
},
{
drawerBackgroundColor: "lightcyan",
drawerWidth: 140
}
);
chapter11/src/routingApp/hamburger.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

chapter11/src/routingApp/screens.js
-84
View File
@@ -1,84 +0,0 @@
/* @flow */
import React, { Component } from "react";
import {
Button,
Image,
StyleSheet,
Text,
TouchableOpacity,
View
} from "react-native";
const myStyles = StyleSheet.create({
fullSize: {
flex: 1
},
fullCenteredView: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
bigText: {
fontSize: 24,
fontWeight: "bold"
},
hamburger: {
width: 22,
height: 22,
alignSelf: "flex-end"
}
});
const makeSimpleView = text =>
class extends Component<{ navigation: object }> {
displayName = `View:${text}`;
render() {
return (
<View style={myStyles.fullSize}>
<TouchableOpacity
onPress={this.props.navigation.toggleDrawer}
>
<Image
source={require("./hamburger.png")}
style={myStyles.hamburger}
/>
</TouchableOpacity>
<View style={myStyles.fullCenteredView}>
<Text style={myStyles.bigText}>{text}</Text>
</View>
</View>
);
}
};
export const Home = makeSimpleView("Home");
export const Alpha = makeSimpleView("Alpha");
export const Bravo = makeSimpleView("Bravo");
export const Charlie = makeSimpleView("Charlie");
export const Zulu = makeSimpleView("Zulu");
export const Help = makeSimpleView("Help!");
export const SomeJumps = (props: object) => (
<View style={myStyles.fullSize}>
<Button
onPress={() => props.navigation.navigate("Alpha")}
title="Go to Alpha"
/>
<Button
onPress={() => props.navigation.navigate("Bravo")}
title="Leap to Bravo"
/>
<Button
onPress={() => props.navigation.navigate("Charlie")}
title="Jump to Charlie"
/>
</View>
);