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

2024-12-18 19:01:38 +03:00 · 2019-11-18 22:44:37 +03:00 · 2019-11-18 22:44:37 +03:00 · ccd363dcb3
commit ccd363dcb3
parent cc62f1dd58
14 changed files with 205 additions and 195 deletions
--- a/src/components/points/view/pointsView.js
+++ b/src/components/points/view/pointsView.js
@ -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>
  );
 };
--- a/src/components/transaction/transactionView.js
+++ b/src/components/transaction/transactionView.js
@ -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>
--- a/src/components/wallet/view/walletView.js
+++ b/src/components/wallet/view/walletView.js
@ -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>
              )}
--- a/src/constants/routeNames.js
+++ b/src/constants/routeNames.js
@ -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}`,
  },
--- a/src/containers/pointsContainer.js
+++ b/src/containers/pointsContainer.js
@ -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' }),
+      ],
    })
  );
 };
--- a/src/containers/steemWalletContainer.js
+++ b/src/containers/steemWalletContainer.js
@ -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,
    })
  );
 };
--- a/src/globalStyles.js
+++ b/src/globalStyles.js
@ -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',
+  },
 });
--- a/src/navigation/baseNavigator.js
+++ b/src/navigation/baseNavigator.js
@ -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} />
--- a/src/screens/index.js
+++ b/src/screens/index.js
@ -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,
--- a/src/screens/points/index.js
+++ b/src/screens/points/index.js
@ -1,4 +0,0 @@
-import Points from './screen/pointsScreen';
-
-export { Points };
-export default Points;
--- a/src/screens/points/screen/pointsScreen.js
+++ b/src/screens/points/screen/pointsScreen.js
@ -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>
--- a/src/screens/wallet/index.js
+++ b/src/screens/wallet/index.js
@ -0,0 +1,4 @@
+import Wallet from './screen/walletScreen';
+
+export { Wallet };
+export default Wallet;
--- a/src/screens/wallet/screen/pointsStyles.js
+++ b/src/screens/wallet/screen/pointsStyles.js
--- a/src/screens/wallet/screen/walletScreen.js
+++ b/src/screens/wallet/screen/walletScreen.js
@ -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;