ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-18 19:01:38 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

added swiper && unificate for pointsView & groom wallet data from container

Browse Source
This commit is contained in:
ue 2019-11-18 22:44:37 +03:00
parent cc62f1dd58
commit ccd363dcb3
14 changed files with 205 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/points/view/pointsView.js
View File

@ -1,24 +1,16 @@
/* eslint-disable react/jsx-wrap-multilines */
import React, { useRef, Fragment } from 'react';
import { Text, View, FlatList, ScrollView, RefreshControl } from 'react-native';
import React, { useRef, Fragment, useEffect } from 'react';
import { Text, View, ScrollView, RefreshControl } from 'react-native';
import { useIntl } from 'react-intl';
import { get } from 'lodash';
import { withNavigation } from 'react-navigation';
// Components
import { LineBreak, WalletLineItem, ListPlaceHolder } from '../../basicUIElements';
import {
Icon,
MainButton,
DropdownButton,
CollapsibleCard,
HorizontalIconList,
Transaction,
} from '../..';
import { LineBreak } from '../../basicUIElements';
import { Icon, MainButton, DropdownButton, HorizontalIconList, Transaction } from '../..';
import { ThemeContainer } from '../../../containers';
// Utils
import { getTimeFromNow } from '../../../utils/time';
import { groomingPointsTransactionData } from '../../../utils/wallet';
// Constants
@ -41,53 +33,39 @@ const PointsView = ({
userBalance,
dropdownOptions,
type = '',
componentDidUpdate,
showIconList,
currentIndex,
index,
}) => {
const intl = useIntl();
const dropdownRef = useRef();
const refreshControl = () => (
<ThemeContainer>
{isDarkTheme => (
<RefreshControl
refreshing={refreshing}
onRefresh={fetchUserActivity}
progressBackgroundColor="#357CE6"
tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
titleColor="#fff"
colors={['#fff']}
/>
)}
</ThemeContainer>
);
const _getTranslation = id => {
let translation;
try {
translation = intl.formatMessage({ id });
} catch (error) {
translation = '';
useEffect(() => {
if (index === currentIndex) {
componentDidUpdate();
}
}, [componentDidUpdate, currentIndex, index]);
return translation;
};
const _renderLoading = () => {
if (isLoading) {
return <ListPlaceHolder />;
}
return <Text style={styles.subText}>{intl.formatMessage({ id: 'points.no_activity' })}</Text>;
};
// const refreshControl = () => (
// <ThemeContainer>
// {isDarkTheme => (
// <RefreshControl
// refreshing={refreshing}
// onRefresh={fetchUserActivity}
// progressBackgroundColor="#357CE6"
// tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
// titleColor="#fff"
// colors={['#fff']}
// />
// )}
// </ThemeContainer>
// );
return (
<Fragment>
<LineBreak height={12} />
<ScrollView
style={styles.scrollContainer}
refreshControl={() => refreshControl()}
contentContainerStyle={styles.scrollContentContainer}
>
<View style={styles.scrollContainer} contentContainerStyle={styles.scrollContentContainer}>
<View style={styles.pointsWrapper}>
<Text onPress={() => dropdownRef.current.show()} style={styles.pointText}>
{userBalance}
@ -127,13 +105,7 @@ const PointsView = ({
</MainButton>
{showIconList && <HorizontalIconList options={POINTS} optionsKeys={POINTS_KEYS} />}
<Transaction
type="points"
transactions={userActivities}
groomingTransactionData={item => groomingPointsTransactionData(item)}
/>
</ScrollView>
</View>
</Fragment>
);
};

24
src/components/transaction/transactionView.js
View File

@ -14,7 +14,7 @@ import { CollapsibleCard } from '..';
import globalStyles from '../../globalStyles';
const TransactionView = ({ transactions, groomingTransactionData, type }) => {
const TransactionView = ({ transactions, type }) => {
const intl = useIntl();
const _renderLoading = () => {
@ -28,38 +28,36 @@ const TransactionView = ({ transactions, groomingTransactionData, type }) => {
};
const _renderItem = (item, index) => {
const transactionData = groomingTransactionData(item);
return (
<CollapsibleCard
key={transactionData.created.toString()}
key={item.created.toString()}
noBorder
noContainer
titleComponent={
<WalletLineItem
key={transactionData.created.toString()}
key={item.created.toString()}
index={index + 1}
text={intl.formatMessage({
id: `${type}.${get(transactionData, 'textKey')}`,
id: `${type}.${get(item, 'textKey')}`,
})}
description={getTimeFromNow(get(transactionData, 'created'))}
description={getTimeFromNow(get(item, 'created'))}
isCircleIcon
isThin
circleIconColor="white"
isBlackText
iconName={get(transactionData, 'icon')}
iconType={get(transactionData, 'iconType')}
rightText={get(transactionData, 'value', '').trim()}
iconName={get(item, 'icon')}
iconType={get(item, 'iconType')}
rightText={get(item, 'value', '').trim()}
/>
}
>
{(get(transactionData, 'details') || get(transactionData, 'memo')) && (
{(get(item, 'details') || get(item, 'memo')) && (
<WalletLineItem
key={index.toString()}
text={get(transactionData, 'details', '')}
text={get(item, 'details', '')}
isBlackText
isThin
description={get(transactionData, 'memo')}
description={get(item, 'memo')}
/>
)}
</CollapsibleCard>

12
src/components/wallet/view/walletView.js
View File

@ -2,7 +2,6 @@
import React, { Fragment } from 'react';
import { View, Text, ScrollView, RefreshControl } from 'react-native';
import { useIntl } from 'react-intl';
import get from 'lodash/get';
// Components
import { Icon } from '../../icon';
@ -13,8 +12,6 @@ import { Transaction } from '../../transaction';
import { WalletDetailsPlaceHolder, Card } from '../../basicUIElements';
import { ThemeContainer, SteemWalletContainer } from '../../../containers';
import { groomingTransactionData } from '../../../utils/wallet';
// Styles
import styles from './walletStyles';
@ -50,6 +47,7 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) =
selectedUsername,
walletData,
steemPerMVests,
userActivities,
}) => (
<ThemeContainer>
{isDarkTheme => (
@ -117,13 +115,7 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) =
/>
</CollapsibleCard>
<Card>
<Transaction
type="wallet"
groomingTransactionData={item =>
groomingTransactionData(item, steemPerMVests, intl.formatNumber)
}
transactions={get(walletData, 'transactions')}
/>
<Transaction type="wallet" transactions={userActivities} />
</Card>
</Fragment>
)}

2
src/constants/routeNames.js
View File

@ -31,7 +31,7 @@ export default {
TABBAR: {
FEED: `Feed${TABBAR_SUFFIX}`,
NOTIFICATION: `Notification${TABBAR_SUFFIX}`,
POINTS: `Points${TABBAR_SUFFIX}`,
WALLET: `Wallet${TABBAR_SUFFIX}`,
POST_BUTTON: `PostButton${TABBAR_SUFFIX}`,
PROFILE: `Profile${TABBAR_SUFFIX}`,
},

24
src/containers/pointsContainer.js
View File

@ -18,6 +18,9 @@ import POINTS from '../constants/options/points';
// Constants
import ROUTES from '../constants/routeNames';
// Utils
import { groomingPointsTransactionData } from '../utils/wallet';
/*
* Props Name Description Value
*@props --> props name here description here Value Type Here
@ -64,7 +67,7 @@ const PointsContainer = ({
}, [_fetchUserPointActivities, fetchInterval, isConnected, navigation, username]);
useEffect(() => {
if (isConnected && activeBottomTab === ROUTES.TABBAR.POINTS && username) {
if (isConnected && activeBottomTab === ROUTES.TABBAR.WALLET && username) {
_fetchUserPointActivities(username);
}
}, [isConnected, username, _fetchUserPointActivities, activeBottomTab]);
@ -125,12 +128,14 @@ const PointsContainer = ({
};
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'),
}));
_userActivities.map(item =>
groomingPointsTransactionData({
...item,
icon: get(POINTS[get(item, 'type')], 'icon'),
iconType: get(POINTS[get(item, 'type')], 'iconType'),
textKey: get(POINTS[get(item, 'type')], 'textKey'),
}),
);
const _fetchUserPointActivities = useCallback(async _username => {
if (!_username) {
@ -244,6 +249,11 @@ const PointsContainer = ({
userPoints,
redeemType: get(navigationParams, 'redeemType'),
user,
dropdownOptions: [
intl.formatMessage({ id: 'points.dropdown_transfer' }),
intl.formatMessage({ id: 'points.dropdown_promote' }),
intl.formatMessage({ id: 'points.dropdown_boost' }),
],
})
);
};

11
src/containers/steemWalletContainer.js
View File

@ -9,7 +9,7 @@ import { toastNotification } from '../redux/actions/uiAction';
import { getAccount, claimRewardBalance } from '../providers/steem/dsteem';
// Utils
import { groomingWalletData } from '../utils/wallet';
import { groomingWalletData, groomingTransactionData } from '../utils/wallet';
import parseToken from '../utils/parseToken';
const WalletContainer = ({
@ -25,6 +25,7 @@ const WalletContainer = ({
const [isClaiming, setIsClaiming] = useState(false);
const [refreshing, setRefreshing] = useState(false);
const [walletData, setWalletData] = useState(null);
const [userActivities, setUserActivities] = useState(null);
const intl = useIntl();
const dispatch = useDispatch();
@ -43,9 +44,14 @@ const WalletContainer = ({
const _walletData = await groomingWalletData(_selectedUser, globalProps);
setWalletData(_walletData);
setUserActivities(
get(_walletData, 'transactions', []).map(item =>
groomingTransactionData(item, steemPerMVests, intl.formatNumber),
),
);
setEstimatedWalletValue(_walletData.estimatedValue);
},
[globalProps, setEstimatedWalletValue],
[globalProps, intl.formatNumber, setEstimatedWalletValue, steemPerMVests],
);
const _isHasUnclaimedRewards = account => {
@ -139,6 +145,7 @@ const WalletContainer = ({
selectedUsername: get(selectedUser, 'name', ''),
walletData: walletData,
steemPerMVests,
userActivities,
})
);
};

7
src/globalStyles.js
View File

@ -10,6 +10,8 @@ export default EStyleSheet.create({
},
listWrapper: {
paddingHorizontal: 8,
backgroundColor: '$primaryBackgroundColor',
flex: 1.7,
},
text: {
fontFamily: '$primaryFont',
@ -68,4 +70,9 @@ export default EStyleSheet.create({
alignSelf: 'center',
backgroundColor: '$primaryBackgroundColor',
},
swipeItemWrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

6
src/navigation/baseNavigator.js
View File

@ -6,7 +6,7 @@ import ROUTES from '../constants/routeNames';
// Components
import { Icon, IconContainer } from '../components/icon';
import { Feed, Notification, Profile, Points } from '../screens';
import { Feed, Notification, Profile, Wallet } from '../screens';
import { PostButton, BottomTabBar } from '../components';
const BaseNavigator = createBottomTabNavigator(
@ -40,8 +40,8 @@ const BaseNavigator = createBottomTabNavigator(
tabBarIcon: ({ tintColor }) => <PostButton />,
},
},
[ROUTES.TABBAR.POINTS]: {
screen: Points,
[ROUTES.TABBAR.WALLET]: {
screen: Wallet,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icon iconType="MaterialCommunityIcons" name="gift-outline" color={tintColor} size={26} />

4
src/screens/index.js
View File

@ -7,7 +7,7 @@ import { Launch } from './launch';
import { Login } from './login';
import { Notification } from './notification';
import { PinCode } from './pinCode';
import { Points } from './points';
import { Wallet } from './wallet';
import { Post } from './post';
import { SearchResult } from './searchResult';
import { Settings } from './settings';
@ -32,7 +32,7 @@ export {
Login,
Notification,
PinCode,
Points,
Wallet,
Post,
Profile,
ProfileEdit,

4
src/screens/points/index.js
View File

@ -1,4 +0,0 @@
import Points from './screen/pointsScreen';
export { Points };
export default Points;

98
src/screens/points/screen/pointsScreen.js
View File

@ -1,98 +0,0 @@
import React, { Fragment } from 'react';
import { useIntl } from 'react-intl';
import { SafeAreaView } from 'react-native';
import get from 'lodash/get';
// Containers
import { PointsContainer, LoggedInContainer } from '../../../containers';
// Components
import { Header, Points } from '../../../components';
// Styles
import styles from './pointsStyles';
const PointsScreen = () => {
const intl = useIntl();
return (
<Fragment>
<Header />
<SafeAreaView style={styles.container}>
<LoggedInContainer>
{() => (
<PointsContainer>
{({
handleOnDropdownSelected,
claim,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
}) => (
<Points
showIconList
claim={claim}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
userPoints={userPoints}
unclaimedBalance={get(userPoints, 'unclaimed_points', 0)}
userBalance={get(userPoints, 'points')}
handleOnDropdownSelected={handleOnDropdownSelected}
type="estm"
dropdownOptions={[
intl.formatMessage({ id: 'points.dropdown_transfer' }),
intl.formatMessage({ id: 'points.dropdown_promote' }),
intl.formatMessage({ id: 'points.dropdown_boost' }),
]}
/>
)}
</PointsContainer>
)}
</LoggedInContainer>
</SafeAreaView>
</Fragment>
);
};
export default PointsScreen;
// const viewStyle = () => {
// return {
// flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
// };
// };
// <Swiper loop={false} showsPagination={false} index={1}>
// <View style={viewStyle()}>
// <Points
// claimPoints={claimPoints}
// fetchUserActivity={fetchUserActivity}
// isClaiming={isClaiming}
// isLoading={isLoading}
// refreshing={refreshing}
// userActivities={userActivities}
// userPoints={userPoints}
// handleOnDropdownSelected={handleOnDropdownSelected}
// />
// </View>
// <View style={viewStyle()}>
// <Points
// claimPoints={claimPoints}
// fetchUserActivity={fetchUserActivity}
// isClaiming={isClaiming}
// isLoading={isLoading}
// refreshing={refreshing}
// userActivities={userActivities}
// userPoints={userPoints}
// handleOnDropdownSelected={handleOnDropdownSelected}
// />
// </View>
// </Swiper>

4
src/screens/wallet/index.js Normal file
View File

@ -0,0 +1,4 @@
import Wallet from './screen/walletScreen';
export { Wallet };
export default Wallet;

0
src/screens/points/screen/pointsStyles.js → src/screens/wallet/screen/pointsStyles.js
View File

122
src/screens/wallet/screen/walletScreen.js Normal file
View File

@ -0,0 +1,122 @@
import React, { Fragment, useState, useEffect } from 'react';
import { useIntl } from 'react-intl';
import { View } from 'react-native';
import Swiper from 'react-native-swiper';
import { SafeAreaView } from 'react-native';
import get from 'lodash/get';
// Containers
import { PointsContainer, LoggedInContainer } from '../../../containers';
// Components
import { Header, Points, Transaction } from '../../../components';
// Styles
import styles from './pointsStyles';
import globalStyles from '../../../globalStyles';
const WalletScreen = () => {
const intl = useIntl();
const [selectedUserActivities, setSelectedUserActivities] = useState(null);
const [selectedType, setSelectedType] = useState('points');
const [currentIndex, setCurrentIndex] = useState(0);
return (
<Fragment>
<Header />
<SafeAreaView style={styles.container}>
<LoggedInContainer>
{() => (
<>
<Swiper
loop={false}
showsPagination={true}
index={0}
onIndexChanged={index => setCurrentIndex(index)}
>
<View style={globalStyles.swipeItemWrapper}>
<PointsContainer>
{({
handleOnDropdownSelected,
claim,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
dropdownOptions,
}) => (
<Points
componentDidUpdate={() => {
setSelectedUserActivities(userActivities);
setSelectedType('points');
}}
index={0}
showIconList
claim={claim}
setSelectedUserActivities={setSelectedUserActivities}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
unclaimedBalance={get(userPoints, 'unclaimed_points', 0)}
userBalance={get(userPoints, 'points')}
handleOnDropdownSelected={handleOnDropdownSelected}
type="estm"
dropdownOptions={dropdownOptions}
currentIndex={currentIndex}
/>
)}
</PointsContainer>
</View>
<View style={globalStyles.swipeItemWrapper}>
<PointsContainer>
{({
handleOnDropdownSelected,
claim,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
dropdownOptions,
}) => (
<Points
currentIndex={currentIndex}
componentDidUpdate={() => {
setSelectedUserActivities(userActivities.reverse());
setSelectedType('wallet');
}}
index={1}
showIconList
claim={claim}
setSelectedUserActivities={setSelectedUserActivities}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
unclaimedBalance={get(userPoints, 'unclaimed_points', 0)}
userBalance={213}
handleOnDropdownSelected={handleOnDropdownSelected}
type="estm"
dropdownOptions={dropdownOptions}
/>
)}
</PointsContainer>
</View>
</Swiper>
<Transaction type={selectedType} transactions={selectedUserActivities} />
</>
)}
</LoggedInContainer>
</SafeAreaView>
</Fragment>
);
};
export default WalletScreen;