pointsContainer convert to hooks

This commit is contained in:
ue 2019-11-17 16:12:32 +03:00
parent bfd2d9f60d
commit 0dd2d9d8df
4 changed files with 94 additions and 117 deletions

View File

@ -20,7 +20,7 @@ const BoostPlaceHolder = () => {
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
<View style={styles.container} key={i}>
<View style={styles.container} key={i.toString()}>
<View style={styles.line}>
<Placeholder.Box color={color} width={90} height={40} animate="fade" />
<View style={styles.paragraphWrapper}>

View File

@ -123,7 +123,7 @@ const PointsView = ({
<View style={styles.listWrapper}>
<FlatList
data={userActivities}
keyExtractor={item => item.id.toString()}
keyExtractor={item => get(item, 'created').toString()}
ListEmptyComponent={_renderLoading()}
renderItem={({ item, index }) => (
<CollapsibleCard

View File

@ -1,7 +1,6 @@
import React from 'react';
import { View, Text } from 'react-native';
import get from 'lodash/get';
import { useIntl } from 'react-intl';
// Components
import { MainButton, Icon } from '..';
@ -12,10 +11,8 @@ import styles from './productItemLineStyles';
const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' };
const ProductItemLineView = ({ disabled, handleOnButtonPress, product, title }) => {
const intl = useIntl();
return (
<View style={styles.boostLine} key={get(product, 'productId')}>
<View style={styles.boostLine} key={get(product, 'productId').toString()}>
{_renderDeal(product)}
<View style={styles.buttonWrapper}>
<MainButton

View File

@ -1,8 +1,8 @@
import { Component } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { Alert } from 'react-native';
import { connect } from 'react-redux';
import { connect, useDispatch } from 'react-redux';
import get from 'lodash/get';
import { injectIntl } from 'react-intl';
import { useIntl } from 'react-intl';
import { withNavigation } from 'react-navigation';
// Services and Actions
@ -24,57 +24,58 @@ import ROUTES from '../constants/routeNames';
*
*/
class PointsContainer extends Component {
constructor(props) {
super(props);
this.state = {
userPoints: {},
userActivities: null,
refreshing: false,
isClaiming: false,
isLoading: true,
navigationParams: {},
};
}
// Component Life Cycle Functions
componentDidMount() {
const { username, isConnected, navigation } = this.props;
const PointsContainer = ({
username,
isConnected,
navigation,
children,
accounts,
currentAccount,
user,
activeBottomTab,
isPinCodeOpen,
globalProps,
pinCode,
}) => {
const [userPoints, setUserPoints] = useState({});
const [userActivities, setUserActivities] = useState(null);
const [refreshing, setRefreshing] = useState(false);
const [isClaiming, setIsClaiming] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [navigationParams, setNavigationParams] = useState({});
const [balance, setBalance] = useState(0);
const intl = useIntl();
const dispatch = useDispatch();
const fetchInterval = useCallback(() => setInterval(_fetchUserPointActivities, 6 * 60 * 1000), [
_fetchUserPointActivities,
]);
useEffect(() => {
if (isConnected) {
this._fetchUserPointActivities(username);
this.fetchInterval = setInterval(this._fetchUserPointActivities, 6 * 60 * 1000);
_fetchUserPointActivities(username);
fetchInterval();
}
if (get(navigation, 'state.params', null)) {
const navigationParams = get(navigation, 'state.params');
const _navigationParams = get(navigation, 'state.params');
this.setState({ navigationParams });
setNavigationParams(_navigationParams);
}
}
}, [_fetchUserPointActivities, fetchInterval, isConnected, navigation, username]);
UNSAFE_componentWillReceiveProps(nextProps) {
const { username } = this.props;
const _username = get(nextProps, 'username');
if (
nextProps.isConnected &&
((nextProps.activeBottomTab === ROUTES.TABBAR.POINTS && _username) ||
(_username !== username && _username))
) {
this._fetchUserPointActivities(_username);
useEffect(() => {
if (isConnected && activeBottomTab === ROUTES.TABBAR.POINTS && username) {
_fetchUserPointActivities(username);
}
}
}, [isConnected, username, _fetchUserPointActivities, activeBottomTab]);
componentWillUnmount() {
clearInterval(this.fetchInterval);
}
useEffect(() => {
return clearInterval(fetchInterval);
});
// Component Functions
_handleOnDropdownSelected = index => {
const { dispatch, isPinCodeOpen, navigation } = this.props;
const { balance } = this.state;
const _handleOnDropdownSelected = index => {
let navigateTo;
let navigateParams;
@ -123,35 +124,34 @@ class PointsContainer extends Component {
}
};
_groomUserActivities = userActivities =>
userActivities.map(item => ({
const _groomUserActivities = _userActivities =>
_userActivities.map(item => ({
...item,
icon: get(POINTS[get(item, 'type')], 'icon'),
iconType: get(POINTS[get(item, 'type')], 'iconType'),
textKey: get(POINTS[get(item, 'type')], 'textKey'),
}));
_fetchUserPointActivities = async username => {
if (!username) {
const _fetchUserPointActivities = useCallback(async _username => {
if (!_username) {
return;
}
this.setState({ refreshing: true });
setRefreshing(true);
await getUser(username)
await getUser(_username)
.then(userPoints => {
const balance = Math.round(get(userPoints, 'points') * 1000) / 1000;
this.setState({ userPoints, balance });
const _balance = Math.round(get(userPoints, 'points') * 1000) / 1000;
setUserPoints(userPoints);
setBalance(_balance);
})
.catch(err => {
Alert.alert(get(err, 'message', 'Error'));
});
await getUserPoints(username)
await getUserPoints(_username)
.then(userActivities => {
if (Object.entries(userActivities).length !== 0) {
this.setState({
userActivities: this._groomUserActivities(userActivities),
});
setUserActivities(_groomUserActivities(userActivities));
}
})
.catch(err => {
@ -160,17 +160,15 @@ class PointsContainer extends Component {
}
});
this.setState({
refreshing: false,
isLoading: false,
});
};
setRefreshing(false);
setIsLoading(false);
}, []);
_getUserBalance = async username => {
await getUser(username)
.then(userPoints => {
const balance = Math.round(get(userPoints, 'points') * 1000) / 1000;
return balance;
const _getUserBalance = async _username => {
await getUser(_username)
.then(_userPoints => {
const _balance = Math.round(get(_userPoints, 'points') * 1000) / 1000;
return _balance;
})
.catch(err => {
if (err) {
@ -179,14 +177,12 @@ class PointsContainer extends Component {
});
};
_claimPoints = async () => {
const { username } = this.props;
this.setState({ isClaiming: true });
const _claimPoints = async () => {
setIsClaiming(true);
await claim(username)
.then(() => {
this._fetchUserPointActivities(username);
_fetchUserPointActivities(username);
})
.catch(error => {
if (error) {
@ -199,74 +195,58 @@ class PointsContainer extends Component {
}
});
this.setState({ isClaiming: false });
setIsClaiming(false);
};
_boost = async (point, permlink, author, user) => {
const { currentAccount, pinCode, dispatch, intl, navigation } = this.props;
this.setState({ isLoading: true });
const _boost = async (point, permlink, author, _user) => {
setIsLoading(true);
await boost(user || currentAccount, pinCode, point, permlink, author)
await boost(_user || currentAccount, pinCode, point, permlink, author)
.then(() => {
this.setState({ isLoading: false });
setIsLoading(false);
navigation.goBack();
dispatch(toastNotification(intl.formatMessage({ id: 'alert.successful' })));
})
.catch(error => {
if (error) {
this.setState({ isLoading: false });
setIsLoading(false);
dispatch(toastNotification(intl.formatMessage({ id: 'alert.fail' })));
}
});
};
_getESTMPrice = points => {
const { globalProps } = this.props;
const _getESTMPrice = points => {
const { base, quote } = globalProps;
return points * 0.01 * (base / quote);
};
render() {
const {
return (
children &&
children({
accounts,
balance,
boost: _boost,
claim: _claimPoints,
currentAccount,
currentAccountName: currentAccount.name,
fetchUserActivity: _fetchUserPointActivities,
getAccount,
getESTMPrice: _getESTMPrice,
getUserBalance: _getUserBalance,
getUserDataWithUsername,
handleOnDropdownSelected: _handleOnDropdownSelected,
isClaiming,
isLoading,
navigationParams,
refreshing,
userActivities,
userPoints,
} = this.state;
const { children, accounts, currentAccount, user } = this.props;
return (
children &&
children({
accounts,
balance,
boost: this._boost,
claim: this._claimPoints,
currentAccount,
currentAccountName: currentAccount.name,
fetchUserActivity: this._fetchUserPointActivities,
getAccount,
getESTMPrice: this._getESTMPrice,
getUserBalance: this._getUserBalance,
getUserDataWithUsername,
handleOnDropdownSelected: this._handleOnDropdownSelected,
handleOnPressTransfer: this._handleOnPressTransfer,
isClaiming,
isLoading,
navigationParams,
refreshing,
userActivities,
userPoints,
redeemType: get(navigationParams, 'redeemType'),
user,
})
);
}
}
redeemType: get(navigationParams, 'redeemType'),
user,
})
);
};
const mapStateToProps = state => ({
user: state.account.currentAccount,
@ -280,4 +260,4 @@ const mapStateToProps = state => ({
globalProps: state.account.globalProps,
});
export default withNavigation(connect(mapStateToProps)(injectIntl(PointsContainer)));
export default withNavigation(connect(mapStateToProps)(PointsContainer));