diff --git a/src/components/basicUIElements/index.js b/src/components/basicUIElements/index.js index f308548e5..da64944e5 100644 --- a/src/components/basicUIElements/index.js +++ b/src/components/basicUIElements/index.js @@ -1,4 +1,4 @@ -import Card from './view/card/cardView'; +import { Card } from './view/card/cardView'; import Chip from './view/chip/chipView'; import GrayWrapper from './view/grayWrapper/grayWrapperView'; import LineBreak from './view/lineBreak/lineBreakView'; diff --git a/src/components/basicUIElements/view/card/cardView.js b/src/components/basicUIElements/view/card/cardView.js index cf9eeb04a..e8b7fe608 100644 --- a/src/components/basicUIElements/view/card/cardView.js +++ b/src/components/basicUIElements/view/card/cardView.js @@ -2,6 +2,4 @@ import React from 'react'; import { View } from 'react-native'; import styles from './cardStyles'; -const Card = ({ children }) => {children}; - -export default Card; +export const Card = ({ children }) => {children}; diff --git a/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js b/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js index 5a4765b61..37b97fb22 100644 --- a/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js +++ b/src/components/basicUIElements/view/walletLineItem/walletLineItemView.js @@ -1,13 +1,14 @@ import React from 'react'; import { View, Text } from 'react-native'; -import GrayWrapper from '../grayWrapper/grayWrapperView'; +// Components +import GrayWrapper from '../grayWrapper/grayWrapperView'; import { Icon } from '../../../icon'; +// Styles import styles from './walletLineItemStyles'; const WalletLineItem = ({ - circleIconColor, description, fitContent, iconName, @@ -31,7 +32,7 @@ const WalletLineItem = ({ style={[ styles.iconWrapper, isCircleIcon && styles.circleIcon, - circleIconColor && { backgroundColor: circleIconColor }, + index && { backgroundColor: `${index && index % 2 !== 0 ? 'white' : '#f5f5f5'}` }, ]} > diff --git a/src/components/points/container/pointsContainer.js b/src/components/points/container/pointsContainer.js index c49c69332..636b9358f 100644 --- a/src/components/points/container/pointsContainer.js +++ b/src/components/points/container/pointsContainer.js @@ -1,17 +1,19 @@ -import React, { Component } from 'react'; +import React, { Component, Alert } from 'react'; import { connect } from 'react-redux'; // Services and Actions import { getUser, getUserPoints } from '../../../providers/esteem/ePoint'; +// Constant +import POINTS from '../../../constants/options/points'; // Component import PointsView from '../view/pointsView'; /* - * Props Name Description Value - *@props --> props name here description here Value Type Here - * - */ + * Props Name Description Value + *@props --> props name here description here Value Type Here + * + */ class PointsContainer extends Component { constructor(props) { @@ -19,6 +21,7 @@ class PointsContainer extends Component { this.state = { userPoints: {}, userActivities: {}, + refreshing: false, }; } @@ -29,32 +32,59 @@ class PointsContainer extends Component { // Component Functions + _groomUserActivities = userActivities => userActivities.map(item => ({ + ...item, + icon: POINTS[item.type].icon, + iconType: POINTS[item.type].iconType, + textKey: POINTS[item.type].textKey, + })); + _fetchuserPointActivities = async () => { const { username } = this.props; - await getUser(username).then((userPoints) => { - this.setState({ userPoints }); - }).catch((err) => { - alert(err); - }); + this.setState({ refreshing: true }); - await getUserPoints(username).then((userActivities) => { - // this.setState({ userPointActivities: res }); - this.setState({ userActivities }); - }).catch((err) => { - alert(err); - }); - } + await getUser(username) + .then((userPoints) => { + this.setState({ userPoints }); + }) + .catch((err) => { + Alert.alert(err); + }); + + await getUserPoints(username) + .then((userActivities) => { + this.setState({ + userActivities: this._groomUserActivities(userActivities), + }); + }) + .catch((err) => { + Alert.alert(err); + }); + + this.setState({ refreshing: false }); + }; render() { - const { userPoints, userActivities } = this.state; + const { + userPoints, userActivities, isDarkTheme, refreshing, + } = this.state; - return ; + return ( + + ); } } const mapStateToProps = state => ({ username: state.account.currentAccount.name, + isDarkTheme: state.application.isDarkTheme, }); export default connect(mapStateToProps)(PointsContainer); diff --git a/src/components/points/view/pointsStyles.js b/src/components/points/view/pointsStyles.js index 25077044b..c2a71de8e 100644 --- a/src/components/points/view/pointsStyles.js +++ b/src/components/points/view/pointsStyles.js @@ -63,4 +63,7 @@ export default EStyleSheet.create({ activeBadge: { backgroundColor: '$black', }, + listWrapper: { + marginHorizontal: 8, + }, }); diff --git a/src/components/points/view/pointsView.js b/src/components/points/view/pointsView.js index ecc272ee5..ce54cd66f 100644 --- a/src/components/points/view/pointsView.js +++ b/src/components/points/view/pointsView.js @@ -1,11 +1,16 @@ import React, { Component, Fragment } from 'react'; -import { Text, View, FlatList } from 'react-native'; +import { + Text, View, FlatList, ScrollView, RefreshControl, +} from 'react-native'; import { injectIntl } from 'react-intl'; // Components -import { LineBreak } from '../../basicUIElements'; +import { LineBreak, WalletLineItem } from '../../basicUIElements'; import { IconButton } from '../../iconButton'; +// Utils +import { getTimeFromNow } from '../../../utils/time'; + // Styles import styles from './pointsStyles'; @@ -24,67 +29,101 @@ class PointsView extends Component { // Component Functions - render() { - const { userActivities, userPoints, intl } = this.props; - const isActiveIcon = true; + refreshControl = () => { + const { fetchUserActivity, refreshing, isDarkTheme } = this.props; - return ( - - - {userPoints.points} - eSteem Points + return ( + + ); + } - - - - - - {intl.formatMessage({ id: 'points.post' })} - - - - - - {intl.formatMessage({ id: 'points.comment' })} - - - - - - {intl.formatMessage({ id: 'points.checkin' })} - - + render() { + const { + userActivities, userPoints, intl, + } = this.props; + const isActiveIcon = true; - ( - {item.type} - )} - /> - - ); - } + return ( + + + + {userPoints.points} + eSteem Points + + + + + + + {intl.formatMessage({ id: 'points.post' })} + + + + + + {intl.formatMessage({ id: 'points.comment' })} + + + + + + {intl.formatMessage({ id: 'points.checkin' })} + + + + + ( + + )} + /> + + + + ); + } } export default injectIntl(PointsView); diff --git a/src/components/transaction/view/transactionView.js b/src/components/transaction/view/transactionView.js index 1b72e9e46..1477b45ff 100644 --- a/src/components/transaction/view/transactionView.js +++ b/src/components/transaction/view/transactionView.js @@ -4,8 +4,6 @@ import { View } from 'react-native'; // Utilities import { groomingTransactionData } from '../../../utils/wallet'; - -// Utils import { getTimeFromNow } from '../../../utils/time'; // Components @@ -60,10 +58,10 @@ class TransactionView extends PureComponent {