Página da disciplina de pos (Programação Orientada a Serviços) do curso técnico integrado de Informática para Internet.
Objetivos:
cd CurrencyConverter
yarn start
dados
currency: string
base: string
quote: string
Parte 1: app/screens/Home.js : precisa mudar para informar o tipo de moeda (base ou quote) para a tela de CurrencyList
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { KeyboardAvoidingView, StatusBar } from 'react-native';
import { connect } from 'react-redux';
import { Container } from '../components/Container';
import { Logo } from '../components/Logo';
import { InputWithButton } from '../components/TextInput';
import { ClearButton } from '../components/Button';
import { LastConverted } from '../components/Text';
import { Header } from '../components/Header';
import { changeCurrencyAmount, swapCurrency } from '../actions/currencies';
class Home extends Component {
static propTypes = {
navigation: PropTypes.object,
dispatch: PropTypes.func,
baseCurrency: PropTypes.string,
quoteCurrency: PropTypes.string,
amount: PropTypes.number,
conversionRate: PropTypes.number,
lastConvertedDate: PropTypes.object,
};
handleChangeText = (text) => {
this.props.dispatch(changeCurrencyAmount(text));
};
handlePressBaseCurrency = () => {
this.props.navigation.navigate('CurrencyList', { title: 'Base currency', type: 'base' });
};
handlePressQuoteCurrency = () => {
this.props.navigation.navigate('CurrencyList', { title: 'Quote currency', type: 'quote' });
};
handleSwapCurrency = () => {
this.props.dispatch(swapCurrency());
};
handleOptionsPress = () => {
this.props.navigation.navigate('Options');
};
render() {
const quote = this.props.amount * this.props.conversionRate;
return (
<Container>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<Header onPress={this.handleOptionsPress} />
<KeyboardAvoidingView behavior="padding">
<Logo />
<InputWithButton
buttonText={this.props.baseCurrency}
onPress={this.handlePressBaseCurrency}
defaultValue={this.props.amount.toString()}
keyboardType="numeric"
onChangeText={this.handleChangeText}
/>
<InputWithButton
editable={false}
buttonText={this.props.quoteCurrency}
onPress={this.handlePressQuoteCurrency}
value={quote.toFixed(2).toString()}
/>
<LastConverted
date={this.props.lastConvertedDate}
base={this.props.baseCurrency}
quote={this.props.quoteCurrency}
conversionRate={this.props.conversionRate}
/>
<ClearButton text="Swap Currency" onPress={this.handleSwapCurrency} />
</KeyboardAvoidingView>
</Container>
);
}
}
const mapStateToProps = (state) => {
const { baseCurrency, quoteCurrency, conversions } = state.currencies;
const conversionSelector = conversions[baseCurrency] || {};
const rates = conversionSelector.rates || {};
return {
baseCurrency,
quoteCurrency,
amount: state.currencies.amount,
conversionRate: rates[quoteCurrency] || 0,
lastConvertedDate: conversionSelector.date ? new Date(conversionSelector.date) : new Date(),
};
};
export default connect(mapStateToProps)(Home);
Parte 2: app/actions/currencies.js: adicionar as ações adicianar as ações changeBaseCurrency e changeQuoteCurrency
export const CHANGE_CURRENCY_AMOUNT = 'CHANGE_CURRENCY_AMOUNT';
export const SWAP_CURRENCY = 'SWAP_CURRENCY';
export const CHANGE_BASE_CURRENCY = 'CHANGE_BASE_CURRENCY';
export const CHANGE_QUOTE_CURRENCY = 'CHANGE_QUOTE_CURRENCY';
export const changeCurrencyAmount = amount => ({
type: CHANGE_CURRENCY_AMOUNT,
amount: parseFloat(amount),
});
export const swapCurrency = () => ({
type: SWAP_CURRENCY,
});
export const changeBaseCurrency = currency => ({
type: CHANGE_BASE_CURRENCY,
currency,
});
export const changeQuoteCurrency = currency => ({
type: CHANGE_QUOTE_CURRENCY,
currency,
});
Parte 3: app/screens/CurrencyList.js: adicionar o disparo das ações
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { FlatList, StatusBar, View } from 'react-native';
import { connect } from 'react-redux';
import currencies from '../data/currencies';
import { ListItem } from '../components/List';
import { changeBaseCurrency, changeQuoteCurrency } from '../actions/currencies';
const TEMP_CURRENT_CURRENCY = 'CAD';
class CurrencyList extends Component {
static propTypes = {
navigation: PropTypes.object,
dispatch: PropTypes.func,
};
handlePress = (currency) => {
const { type } = this.props.navigation.state.params;
if (type === 'base') {
this.props.dispatch(changeBaseCurrency(currency));
} else if (type === 'quote') {
this.props.dispatch(changeQuoteCurrency(currency));
}
this.props.navigation.goBack(null);
};
render() {
return (
<View>
<StatusBar translucent={false} barStyle="default" />
<FlatList
data={currencies}
renderItem={({ item }) => (
<ListItem
text={item}
selected={item === TEMP_CURRENT_CURRENCY}
onPress={() => this.handlePress(item)}
/>
)}
keyExtractor={item => item}
/>
</View>
);
}
}
export default connect()(CurrencyList);
Parte 4: Ver resultado no Google Chrome com o Remote debugger
app/reducers/currencies.js: acrescentando o redutor para a moeda
import {
CHANGE_CURRENCY_AMOUNT,
SWAP_CURRENCY,
CHANGE_BASE_CURRENCY,
CHANGE_QUOTE_CURRENCY,
changeBaseCurrency,
changeQuoteCurrency,
} from '../actions/currencies';
const initialState = {
baseCurrency: 'USD',
quoteCurrency: 'GBP',
amount: 100,
conversions: {
USD: {
isFetching: false,
base: 'USD',
date: '2017-05-31',
rates: {
AUD: 1.3416,
BGN: 1.743,
BRL: 3.2515,
CAD: 1.3464,
CHF: 0.97104,
CNY: 6.813,
CZK: 23.547,
DKK: 6.6302,
GBP: 0.77858,
HKD: 7.7908,
HRK: 6.6068,
HUF: 273.77,
IDR: 13308,
ILS: 3.5431,
INR: 64.463,
JPY: 110.86,
KRW: 1118.4,
MXN: 18.765,
MYR: 4.281,
NOK: 8.4117,
NZD: 1.4071,
PHP: 49.77,
PLN: 3.7173,
RON: 4.0687,
RUB: 56.774,
SEK: 8.6942,
SGD: 1.3829,
THB: 34.07,
TRY: 3.5366,
ZAR: 13.133,
EUR: 0.89119,
},
},
},
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case CHANGE_CURRENCY_AMOUNT:
return {
...state,
amount: action.amount || 0,
};
case SWAP_CURRENCY:
return {
...state,
baseCurrency: state.quoteCurrency,
quoteCurrency: state.baseCurrency,
};
case CHANGE_BASE_CURRENCY:
return {
...state,
baseCurrency: action.currency,
};
case CHANGE_QUOTE_CURRENCY:
return {
...state,
quoteCurrency: action.currency,
};
default:
return state;
}
};
console.log('changeBaseCurrency', reducer(initialState, changeBaseCurrency('BRL')));
console.log('changeBaseCurrency', reducer(initialState, changeQuoteCurrency('BRL')));
export default reducer;
app/screens/CurrencyList.js: armazenar e modificar o estado na tela de lista de moedas
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { FlatList, StatusBar, View } from 'react-native';
import { connect } from 'react-redux';
import currencies from '../data/currencies';
import { ListItem } from '../components/List';
import { changeBaseCurrency, changeQuoteCurrency } from '../actions/currencies';
class CurrencyList extends Component {
static propTypes = {
navigation: PropTypes.object,
dispatch: PropTypes.func,
baseCurrency: PropTypes.string,
quoteCurrency: PropTypes.string,
};
handlePress = (currency) => {
const { type } = this.props.navigation.state.params;
if (type === 'base') {
this.props.dispatch(changeBaseCurrency(currency));
} else if (type === 'quote') {
this.props.dispatch(changeQuoteCurrency(currency));
}
this.props.navigation.goBack(null);
};
render() {
let comparisonCurrency = this.props.baseCurrency;
if (this.props.navigation.state.params.type === 'quote') {
comparisonCurrency = this.props.quoteCurrency;
}
return (
<View>
<StatusBar translucent={false} barStyle="default" />
<FlatList
data={currencies}
renderItem={({ item }) => (
<ListItem
text={item}
selected={item === comparisonCurrency}
onPress={() => this.handlePress(item)}
/>
)}
keyExtractor={item => item}
/>
</View>
);
}
}
const mapStateToProps = state => ({
baseCurrency: state.currencies.baseCurrency,
quoteCurrency: state.currencies.quoteCurrency,
});
export default connect(mapStateToProps)(CurrencyList);