mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-23 05:13:04 +03:00
pointsContainer convert to hooks
This commit is contained in:
parent
bfd2d9f60d
commit
0dd2d9d8df
@ -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}>
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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');
|
||||
useEffect(() => {
|
||||
if (isConnected && activeBottomTab === ROUTES.TABBAR.POINTS && username) {
|
||||
_fetchUserPointActivities(username);
|
||||
}
|
||||
}, [isConnected, username, _fetchUserPointActivities, activeBottomTab]);
|
||||
|
||||
if (
|
||||
nextProps.isConnected &&
|
||||
((nextProps.activeBottomTab === ROUTES.TABBAR.POINTS && _username) ||
|
||||
(_username !== username && _username))
|
||||
) {
|
||||
this._fetchUserPointActivities(_username);
|
||||
}
|
||||
}
|
||||
|
||||
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,62 +195,47 @@ 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 {
|
||||
balance,
|
||||
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,
|
||||
boost: _boost,
|
||||
claim: _claimPoints,
|
||||
currentAccount,
|
||||
currentAccountName: currentAccount.name,
|
||||
fetchUserActivity: this._fetchUserPointActivities,
|
||||
fetchUserActivity: _fetchUserPointActivities,
|
||||
getAccount,
|
||||
getESTMPrice: this._getESTMPrice,
|
||||
getUserBalance: this._getUserBalance,
|
||||
getESTMPrice: _getESTMPrice,
|
||||
getUserBalance: _getUserBalance,
|
||||
getUserDataWithUsername,
|
||||
handleOnDropdownSelected: this._handleOnDropdownSelected,
|
||||
handleOnPressTransfer: this._handleOnPressTransfer,
|
||||
handleOnDropdownSelected: _handleOnDropdownSelected,
|
||||
isClaiming,
|
||||
isLoading,
|
||||
navigationParams,
|
||||
@ -265,8 +246,7 @@ class PointsContainer extends Component {
|
||||
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));
|
||||
|
Loading…
Reference in New Issue
Block a user