refactored part 1 with container

src/components/index.js

@@ -13,6 +13,7 @@ import ProfileEditForm from './profileEditForm/profileEditFormView';
 import Promote from './promote/promoteView';
 import ScaleSlider from './scaleSlider/scaleSliderView';
 import UserListItem from './basicUIElements/view/userListItem/userListItem';
+import Profile from './profile/profileView';
 
 export {
   CircularButton,
@@ -24,6 +25,7 @@ export {
   NumericKeyboard,
   PinAnimatedInput,
   PostButton,
+  Profile,
   ProfileEditForm,
   ScaleSlider,
   SideMenu,

src/components/profile/profileView.js

@@ -0,0 +1,238 @@
+import React, { PureComponent, Fragment } from 'react';
+import { View, ScrollView } from 'react-native';
+import { injectIntl } from 'react-intl';
+import get from 'lodash/get';
+import ScrollableTabView from 'react-native-scrollable-tab-view';
+
+// Components
+import { CollapsibleCard } from '../collapsibleCard';
+import { Comments } from '../comments';
+import { Header } from '../header';
+import { NoPost, ProfileSummaryPlaceHolder, WalletDetailsPlaceHolder } from '../basicUIElements';
+import { Posts } from '../posts';
+import { ProfileSummary } from '../profileSummary';
+import { TabBar } from '../tabBar';
+import { Wallet } from '../wallet';
+
+// Constants
+import { PROFILE_FILTERS } from '../../constants/options/filters';
+
+// Utils
+import { getFormatedCreatedDate } from '../../utils/time';
+
+// Styles
+import styles from './profileStyles';
+import globalStyles from '../../globalStyles';
+
+class ProfileView extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSummaryOpen: true,
+      collapsibleMoreHeight: 0,
+      estimatedWalletValue: 0,
+      oldEstimatedWalletValue: 0,
+    };
+  }
+
+  _handleOnScroll = () => {
+    const { isSummaryOpen } = this.state;
+
+    if (isSummaryOpen) this.setState({ isSummaryOpen: false });
+  };
+
+  _handleOnSummaryExpanded = () => {
+    const { isSummaryOpen } = this.state;
+
+    if (!isSummaryOpen) this.setState({ isSummaryOpen: true });
+  };
+
+  _handleUIChange = height => {
+    this.setState({ collapsibleMoreHeight: height });
+  };
+
+  render() {
+    const {
+      about,
+      activePage,
+      changeForceLoadPostState,
+      comments,
+      currencyRate,
+      currencySymbol,
+      follows,
+      forceLoadPost,
+      getReplies,
+      handleFollowUnfollowUser,
+      handleMuteUnmuteUser,
+      handleOnBackPress,
+      handleOnFavoritePress,
+      handleOnFollowsPress,
+      handleOnPressProfileEdit,
+      intl,
+      isDarkTheme,
+      isFavorite,
+      isFollowing,
+      isLoggedIn,
+      isMuted,
+      isOwnProfile,
+      isProfileLoading,
+      isReady,
+      quickProfile,
+      resourceCredits,
+      selectedUser,
+      username,
+      votingPower,
+    } = this.props;
+
+    const {
+      isSummaryOpen,
+      collapsibleMoreHeight,
+      estimatedWalletValue,
+      oldEstimatedWalletValue,
+    } = this.state;
+
+    return (
+      <Fragment>
+        <Header
+          key={quickProfile && quickProfile.name}
+          selectedUser={quickProfile}
+          isReverse={!isOwnProfile}
+          handleOnBackPress={handleOnBackPress}
+        />
+        <View style={styles.container}>
+          {!isReady ? (
+            <ProfileSummaryPlaceHolder />
+          ) : (
+            <CollapsibleCard
+              title={get(about, 'about')}
+              isTitleCenter
+              defaultTitle={intl.formatMessage({
+                id: 'profile.details',
+              })}
+              expanded
+              isExpanded={isSummaryOpen}
+              handleOnExpanded={this._handleOnSummaryExpanded}
+              moreHeight={collapsibleMoreHeight}
+              // expanded={isLoggedIn}
+              // locked={!isLoggedIn}
+            >
+              <ProfileSummary
+                date={getFormatedCreatedDate(get(selectedUser, 'created'))}
+                about={about}
+                followerCount={follows.follower_count}
+                followingCount={follows.following_count}
+                handleFollowUnfollowUser={handleFollowUnfollowUser}
+                handleMuteUnmuteUser={handleMuteUnmuteUser}
+                handleOnFavoritePress={handleOnFavoritePress}
+                handleOnFollowsPress={handleOnFollowsPress}
+                handleUIChange={this._handleUIChange}
+                hoursRC={Math.ceil((100 - resourceCredits) * 0.833333) || null}
+                hoursVP={Math.ceil((100 - votingPower) * 0.833333) || null}
+                intl={intl}
+                isDarkTheme={isDarkTheme}
+                isFavorite={isFavorite}
+                isFollowing={isFollowing}
+                isLoggedIn={isLoggedIn}
+                isMuted={isMuted}
+                isOwnProfile={isOwnProfile}
+                isProfileLoading={isProfileLoading}
+                percentRC={resourceCredits}
+                percentVP={votingPower}
+                handleOnPressProfileEdit={handleOnPressProfileEdit}
+              />
+            </CollapsibleCard>
+          )}
+
+          <ScrollableTabView
+            style={[globalStyles.tabView, styles.tabView]}
+            initialPage={activePage}
+            renderTabBar={() => (
+              <TabBar style={styles.tabbar} tabUnderlineDefaultWidth={80} tabUnderlineScaleX={2} />
+            )}
+            onChangeTab={({ i }) => {
+              if (i !== 2) {
+                this.setState({
+                  estimatedWalletValue: 0,
+                  oldEstimatedWalletValue: estimatedWalletValue,
+                });
+              } else this.setState({ estimatedWalletValue: oldEstimatedWalletValue });
+            }}
+          >
+            <View
+              tabLabel={intl.formatMessage({
+                id: 'profile.post',
+              })}
+              style={styles.postTabBar}
+            >
+              <Posts
+                filterOptions={PROFILE_FILTERS}
+                selectedOptionIndex={0}
+                pageType="profiles"
+                getFor="blog"
+                tag={username}
+                key={username}
+                handleOnScroll={isSummaryOpen ? this._handleOnScroll : null}
+                forceLoadPost={forceLoadPost}
+                changeForceLoadPostState={changeForceLoadPostState}
+              />
+            </View>
+            <View
+              tabLabel={
+                !isOwnProfile
+                  ? intl.formatMessage({
+                      id: 'profile.comments',
+                    })
+                  : intl.formatMessage({
+                      id: 'profile.replies',
+                    })
+              }
+              style={styles.commentsTabBar}
+            >
+              {comments && comments.length > 0 ? (
+                <ScrollView onScroll={this._handleOnScroll}>
+                  <Comments
+                    isProfilePreview
+                    comments={comments}
+                    fetchPost={getReplies}
+                    isOwnProfile={isOwnProfile}
+                  />
+                </ScrollView>
+              ) : (
+                <NoPost
+                  name={username}
+                  text={intl.formatMessage({
+                    id: 'profile.havent_commented',
+                  })}
+                  defaultText={intl.formatMessage({
+                    id: 'profile.login_to_see',
+                  })}
+                />
+              )}
+            </View>
+            <View
+              tabLabel={
+                estimatedWalletValue
+                  ? `${currencySymbol} ${(estimatedWalletValue * currencyRate).toFixed()}`
+                  : intl.formatMessage({
+                      id: 'profile.wallet',
+                    })
+              }
+            >
+              {selectedUser ? (
+                <Wallet
+                  setEstimatedWalletValue={value => this.setState({ estimatedWalletValue: value })}
+                  selectedUser={selectedUser}
+                  handleOnScroll={isSummaryOpen ? this._handleOnScroll : null}
+                />
+              ) : (
+                <WalletDetailsPlaceHolder />
+              )}
+            </View>
+          </ScrollableTabView>
+        </View>
+      </Fragment>
+    );
+  }
+}
+
+export default injectIntl(ProfileView);

src/containers/profileContainer.js

@@ -21,6 +21,9 @@ import {
 // Esteem providers
 import { getIsFavorite, addFavorite, removeFavorite } from '../providers/esteem/esteem';
 
+// Utilitites
+import { getRcPower, getVotingPower } from '../utils/manaBar';
+
 // Constants
 import { default as ROUTES } from '../constants/routeNames';
 
@@ -327,9 +330,19 @@ class ProfileContainer extends Component {
       quickProfile,
       user,
       username,
+      selectedUser,
     } = this.state;
     const { currency, isDarkTheme, isLoggedIn, navigation, children } = this.props;
     const activePage = get(navigation.state.params, 'state', 0);
+    const { currencyRate, currencySymbol } = currency;
+
+    let votingPower;
+    let resourceCredits;
+
+    if (selectedUser) {
+      votingPower = getVotingPower(selectedUser).toFixed(1);
+      resourceCredits = getRcPower(selectedUser).toFixed(1);
+    }
 
     return (
       children &&
@@ -337,9 +350,14 @@ class ProfileContainer extends Component {
         about: get(user, 'about.profile'),
         activePage,
         avatar,
+        setEstimatedWalletValue: this._setEstimatedWalletValue,
         changeForceLoadPostState: this._changeForceLoadPostState,
         comments,
         currency,
+        currencyRate,
+        currencySymbol,
+        votingPower,
+        resourceCredits,
         error,
         follows,
         forceLoadPost,

src/screens/index.js

@@ -10,15 +10,15 @@ import { Notification } from './notification';
 import { PinCode } from './pinCode';
 import { Points } from './points';
 import { Post } from './post';
-import { Profile } from './profile';
 import { SearchResult } from './searchResult';
 import { Settings } from './settings';
-import Voters from './voters';
+import Profile from './profile/screen/profileScreen';
+import ProfileEdit from './profileEdit/screen/profileEditScreen';
+import Reblogs from './reblogs';
+import Redeem from './redeem/screen/redeemScreen';
 import SteemConnect from './steem-connect/steemConnect';
 import Transfer from './transfer';
-import Reblogs from './reblogs';
-import ProfileEdit from './profileEdit/screen/profileEditScreen';
-import Redeem from './redeem/screen/redeemScreen';
+import Voters from './voters';
 
 export {
   Bookmarks,
@@ -36,10 +36,10 @@ export {
   Profile,
   ProfileEdit,
   Reblogs,
+  Redeem,
   SearchResult,
   Settings,
   SteemConnect,
   Transfer,
   Voters,
-  Redeem,
 };

src/screens/profile/container/profileContainer.js

@@ -1,380 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { withNavigation } from 'react-navigation';
-import { get, has } from 'lodash';
-import { Alert } from 'react-native';
-
-// Providers
-import {
-  followUser,
-  unfollowUser,
-  ignoreUser,
-  getFollows,
-  getRepliesByLastUpdate,
-  getUserComments,
-  getUser,
-  getIsFollowing,
-  getIsMuted,
-} from '../../../providers/steem/dsteem';
-
-// Esteem providers
-import { getIsFavorite, addFavorite, removeFavorite } from '../../../providers/esteem/esteem';
-
-// Constants
-import { default as ROUTES } from '../../../constants/routeNames';
-
-// Components
-import ProfileScreen from '../screen/profileScreen';
-
-class ProfileContainer extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      comments: [],
-      follows: {},
-      forceLoadPost: false,
-      isFavorite: false,
-      isFollowing: false,
-      isMuted: false,
-      isProfileLoading: false,
-      isReady: false,
-      isOwnProfile: !has(props, 'navigation.state.params.username'),
-      user: null,
-      quickProfile: {
-        reputation: get(props, 'navigation.state.params.reputation', ''),
-        name: get(props, 'navigation.state.params.username', ''),
-      },
-    };
-  }
-
-  componentDidMount() {
-    const {
-      navigation,
-      isConnected,
-      isLoggedIn,
-      currentAccount: { name: currentAccountUsername },
-    } = this.props;
-    const username = get(navigation, 'state.params.username');
-    const { isOwnProfile } = this.state;
-    let targetUsername = currentAccountUsername;
-
-    if (!isConnected) return;
-
-    if (!isLoggedIn && !username) {
-      navigation.navigate(ROUTES.SCREENS.LOGIN);
-      return;
-    }
-
-    if (!isOwnProfile) {
-      targetUsername = username;
-    }
-
-    this._loadProfile(targetUsername);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!nextProps.isConnected) return;
-
-    const { isLoggedIn, navigation } = this.props;
-    const { isOwnProfile } = this.state;
-
-    if (isLoggedIn && !nextProps.isLoggedIn) {
-      navigation.navigate(ROUTES.SCREENS.LOGIN);
-      return;
-    }
-
-    if (isOwnProfile) {
-      const { user } = this.state;
-      const { activeBottomTab, currentAccount } = this.props;
-
-      const currentUsername =
-        get(currentAccount, 'name') !== get(nextProps, 'currentAccount.name') &&
-        get(nextProps, 'currentAccount.name');
-      const isActiveTabChanged =
-        activeBottomTab !== get(nextProps, 'activeBottomTab') &&
-        get(nextProps, 'activeBottomTab') === ROUTES.TABBAR.PROFILE;
-
-      if ((isActiveTabChanged && user) || currentUsername) {
-        this._loadProfile(currentUsername);
-      }
-    }
-  }
-
-  _getReplies = async user => {
-    const { isOwnProfile } = this.state;
-    let repliesAction;
-
-    if (!isOwnProfile) {
-      repliesAction = getUserComments;
-    } else {
-      repliesAction = getRepliesByLastUpdate;
-    }
-
-    await repliesAction({ start_author: user, limit: 10 }).then(result => {
-      this.setState({
-        comments: result,
-      });
-    });
-  };
-
-  _handleFollowUnfollowUser = async isFollowAction => {
-    const { isFollowing, username } = this.state;
-    const { currentAccount, pinCode } = this.props;
-    const follower = get(currentAccount, 'name', '');
-    const following = username;
-
-    let followAction;
-
-    this.setState({
-      isProfileLoading: true,
-    });
-
-    if (isFollowAction && !isFollowing) {
-      followAction = followUser;
-    } else {
-      followAction = unfollowUser;
-    }
-
-    followAction(currentAccount, pinCode, {
-      follower,
-      following,
-    })
-      .then(() => {
-        this._profileActionDone();
-      })
-      .catch(err => {
-        this._profileActionDone(err);
-      });
-  };
-
-  _handleMuteUnmuteUser = isMuteAction => {
-    this.setState({
-      isProfileLoading: true,
-    });
-
-    if (isMuteAction) {
-      this._muteUser();
-    } else {
-      this._handleFollowUnfollowUser();
-    }
-  };
-
-  _muteUser = () => {
-    const { username } = this.state;
-    const { currentAccount, pinCode } = this.props;
-    const follower = currentAccount.name;
-    const following = username;
-
-    ignoreUser(currentAccount, pinCode, {
-      follower,
-      following,
-    })
-      .then(() => {
-        this._profileActionDone();
-      })
-      .catch(err => {
-        this._profileActionDone(err);
-      });
-  };
-
-  _profileActionDone = (error = null) => {
-    const { username } = this.state;
-
-    if (error) {
-      this.setState(
-        {
-          error,
-        },
-        () => Alert.alert(get(error, 'message') || error.toString()),
-      );
-    } else {
-      this._fetchProfile(username, true);
-    }
-  };
-
-  _fetchProfile = async (username = null, isProfileAction = false) => {
-    const { username: _username, isFollowing, isMuted, isOwnProfile } = this.state;
-
-    if (username) {
-      const { currentAccount } = this.props;
-      let _isFollowing;
-      let _isMuted;
-      let isFavorite;
-      let follows;
-
-      if (!isOwnProfile) {
-        _isFollowing = await getIsFollowing(username, currentAccount.name);
-
-        _isMuted = _isFollowing ? false : await getIsMuted(username, currentAccount.name);
-
-        getIsFavorite(username, currentAccount.name).then(isFav => {
-          isFavorite = isFav;
-        });
-      }
-
-      try {
-        follows = await getFollows(username);
-      } catch (err) {
-        follows = null;
-      }
-
-      if (isProfileAction && (isFollowing === _isFollowing && isMuted === _isMuted)) {
-        this._fetchProfile(_username, true);
-      } else {
-        this.setState({
-          follows,
-          isFollowing: _isFollowing,
-          isMuted: _isMuted,
-          isFavorite,
-          isReady: true,
-          isProfileLoading: false,
-        });
-      }
-    }
-  };
-
-  _loadProfile = async (username = null) => {
-    let user;
-
-    try {
-      user = await getUser(username);
-      this._fetchProfile(username);
-    } catch (error) {
-      this._profileActionDone(error);
-    }
-
-    this.setState(prevState => ({
-      quickProfile: {
-        ...prevState.quickProfile,
-        display_name: get(user, 'display_name'),
-        reputation: get(user, 'reputation'),
-      },
-      user,
-      username,
-    }));
-
-    this._getReplies(username);
-  };
-
-  _handleFollowsPress = async isFollowingPress => {
-    const { navigation } = this.props;
-    const { username, follows } = this.state;
-    const count = get(follows, !isFollowingPress ? 'follower_count' : 'following_count');
-
-    navigation.navigate({
-      routeName: ROUTES.SCREENS.FOLLOWS,
-      params: {
-        isFollowingPress,
-        count,
-        username,
-      },
-      key: `${username}${count}`,
-    });
-  };
-
-  _handleOnFavoritePress = (isFavorite = false) => {
-    const { currentAccount } = this.props;
-    const { username } = this.state;
-    let favoriteAction;
-
-    if (isFavorite) {
-      favoriteAction = removeFavorite;
-    } else {
-      favoriteAction = addFavorite;
-    }
-
-    favoriteAction(currentAccount.name, username).then(() => {
-      this.setState({ isFavorite: !isFavorite });
-    });
-  };
-
-  _handleOnBackPress = () => {
-    const { navigation } = this.props;
-    const navigationParams = get(navigation.state, 'params');
-
-    if (get(navigationParams, 'fetchData')) {
-      navigationParams.fetchData();
-    }
-  };
-
-  _changeForceLoadPostState = value => {
-    this.setState({ forceLoadPost: value });
-  };
-
-  _handleOnPressProfileEdit = () => {
-    const { navigation, currentAccount } = this.props;
-
-    navigation.navigate({
-      routeName: ROUTES.SCREENS.PROFILE_EDIT,
-      params: {
-        fetchUser: () => this.setState({ user: currentAccount }),
-      },
-    });
-  };
-
-  render() {
-    const {
-      avatar,
-      comments,
-      error,
-      follows,
-      forceLoadPost,
-      isFavorite,
-      isFollowing,
-      isMuted,
-      isOwnProfile,
-      isProfileLoading,
-      isReady,
-      quickProfile,
-      user,
-      username,
-    } = this.state;
-    const { currency, isDarkTheme, isLoggedIn, navigation } = this.props;
-    const activePage = get(navigation.state.params, 'state', 0);
-
-    return (
-      <ProfileScreen
-        about={get(user, 'about.profile')}
-        activePage={activePage}
-        avatar={avatar}
-        changeForceLoadPostState={this._changeForceLoadPostState}
-        comments={comments}
-        currency={currency}
-        error={error}
-        follows={follows}
-        forceLoadPost={forceLoadPost}
-        getReplies={() => this._getReplies(username)}
-        handleFollowUnfollowUser={this._handleFollowUnfollowUser}
-        handleMuteUnmuteUser={this._handleMuteUnmuteUser}
-        handleOnBackPress={this._handleOnBackPress}
-        handleOnFavoritePress={this._handleOnFavoritePress}
-        handleOnFollowsPress={this._handleFollowsPress}
-        handleOnPressProfileEdit={this._handleOnPressProfileEdit}
-        isDarkTheme={isDarkTheme}
-        isFavorite={isFavorite}
-        isFollowing={isFollowing}
-        isLoggedIn={isLoggedIn}
-        isMuted={isMuted}
-        isOwnProfile={isOwnProfile}
-        isProfileLoading={isProfileLoading}
-        isReady={isReady}
-        quickProfile={quickProfile}
-        selectedUser={user}
-        username={username}
-      />
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  currency: state.application.currency,
-  isConnected: state.application.isConnected,
-  isDarkTheme: state.application.isDarkTheme,
-  isLoggedIn: state.application.isLoggedIn,
-  pinCode: state.application.pin,
-  activeBottomTab: state.ui.activeBottomTab,
-  currentAccount: state.account.currentAccount,
-});
-
-export default connect(mapStateToProps)(withNavigation(ProfileContainer));

src/screens/profile/index.js

@@ -1,5 +0,0 @@
-import ProfileScreen from './screen/profileScreen';
-import Profile from './container/profileContainer';
-
-export { ProfileScreen, Profile };
-export default Profile;

src/screens/profile/screen/profileScreen.js

@@ -1,262 +1,88 @@
-import React, { PureComponent, Fragment } from 'react';
-import { View, ScrollView } from 'react-native';
+import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
-import get from 'lodash/get';
 
-// Components
-import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { Comments } from '../../../components/comments';
-import { CollapsibleCard } from '../../../components/collapsibleCard';
-import { Header } from '../../../components/header';
-import {
-  NoPost,
-  ProfileSummaryPlaceHolder,
-  WalletDetailsPlaceHolder,
-} from '../../../components/basicUIElements';
-import { Posts } from '../../../components/posts';
-import { ProfileSummary } from '../../../components/profileSummary';
-import { TabBar } from '../../../components/tabBar';
-import { Wallet } from '../../../components/wallet';
-
-// Constants
-import { PROFILE_FILTERS } from '../../../constants/options/filters';
-
-// Utilitites
-import { getFormatedCreatedDate } from '../../../utils/time';
-import { getRcPower, getVotingPower } from '../../../utils/manaBar';
-
-// Styles
-import styles from './profileStyles';
-import globalStyles from '../../../globalStyles';
+import { Profile } from '../../../components';
+import { ProfileContainer } from '../../../containers';
 
 class ProfileScreen extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = {
-      isSummaryOpen: true,
-      collapsibleMoreHeight: 0,
-      estimatedWalletValue: 0,
-      oldEstimatedWalletValue: 0,
-    };
+    this.state = {};
   }
 
-  _handleOnScroll = () => {
-    const { isSummaryOpen } = this.state;
-
-    if (isSummaryOpen) this.setState({ isSummaryOpen: false });
-  };
-
-  _handleOnSummaryExpanded = () => {
-    const { isSummaryOpen } = this.state;
-
-    if (!isSummaryOpen) this.setState({ isSummaryOpen: true });
-  };
-
-  _handleUIChange = height => {
-    this.setState({ collapsibleMoreHeight: height });
-  };
-
-  _setEstimatedWalletValue = value => {
-    if (value) this.setState({ estimatedWalletValue: value });
-  };
-
   render() {
-    const {
-      about,
-      activePage,
-      changeForceLoadPostState,
-      comments,
-      currency,
-      follows,
-      forceLoadPost,
-      getReplies,
-      handleFollowUnfollowUser,
-      handleMuteUnmuteUser,
-      handleOnBackPress,
-      handleOnFavoritePress,
-      handleOnFollowsPress,
-      handleOnPressProfileEdit,
-      intl,
-      isDarkTheme,
-      isFavorite,
-      isFollowing,
-      isLoggedIn,
-      isMuted,
-      isProfileLoading,
-      isReady,
-      isOwnProfile,
-      quickProfile,
-      selectedUser,
-      username,
-    } = this.props;
-
-    const {
-      isSummaryOpen,
-      collapsibleMoreHeight,
-      estimatedWalletValue,
-      oldEstimatedWalletValue,
-    } = this.state;
-
-    let votingPower;
-    let resourceCredits;
-    let fullInHourVP;
-    let fullInHourRC;
-    let _estimatedWalletValue;
-
-    if (selectedUser) {
-      votingPower = getVotingPower(selectedUser).toFixed(1);
-      resourceCredits = getRcPower(selectedUser).toFixed(1);
-      fullInHourVP = Math.ceil((100 - votingPower) * 0.833333);
-      fullInHourRC = Math.ceil((100 - resourceCredits) * 0.833333);
-    }
-
-    if (estimatedWalletValue) {
-      const { currencyRate, currencySymbol } = currency;
-      _estimatedWalletValue = `${currencySymbol} ${(
-        estimatedWalletValue * currencyRate
-      ).toFixed()}`;
-    }
-
     return (
-      <Fragment>
-        <Header
-          key={quickProfile && quickProfile.name}
-          selectedUser={quickProfile}
-          isReverse={!isOwnProfile}
-          handleOnBackPress={handleOnBackPress}
-        />
-        <View style={styles.container}>
-          {!isReady ? (
-            <ProfileSummaryPlaceHolder />
-          ) : (
-            <CollapsibleCard
-              title={get(about, 'about')}
-              isTitleCenter
-              defaultTitle={intl.formatMessage({
-                id: 'profile.details',
-              })}
-              expanded
-              isExpanded={isSummaryOpen}
-              handleOnExpanded={this._handleOnSummaryExpanded}
-              moreHeight={collapsibleMoreHeight}
-              // expanded={isLoggedIn}
-              // locked={!isLoggedIn}
-            >
-              <ProfileSummary
-                date={getFormatedCreatedDate(get(selectedUser, 'created'))}
-                about={about}
-                followerCount={follows.follower_count}
-                followingCount={follows.following_count}
-                handleFollowUnfollowUser={handleFollowUnfollowUser}
-                handleMuteUnmuteUser={handleMuteUnmuteUser}
-                handleOnFavoritePress={handleOnFavoritePress}
-                handleOnFollowsPress={handleOnFollowsPress}
-                handleUIChange={this._handleUIChange}
-                hoursRC={fullInHourRC || null}
-                hoursVP={fullInHourVP || null}
-                intl={intl}
-                isDarkTheme={isDarkTheme}
-                isFavorite={isFavorite}
-                isFollowing={isFollowing}
-                isLoggedIn={isLoggedIn}
-                isMuted={isMuted}
-                isOwnProfile={isOwnProfile}
-                isProfileLoading={isProfileLoading}
-                percentRC={resourceCredits}
-                percentVP={votingPower}
-                handleOnPressProfileEdit={handleOnPressProfileEdit}
-              />
-            </CollapsibleCard>
-          )}
-
-          <ScrollableTabView
-            style={[globalStyles.tabView, styles.tabView]}
-            initialPage={activePage}
-            renderTabBar={() => (
-              <TabBar style={styles.tabbar} tabUnderlineDefaultWidth={80} tabUnderlineScaleX={2} />
-            )}
-            onChangeTab={({ i }) => {
-              if (i !== 2) {
-                this.setState({
-                  estimatedWalletValue: 0,
-                  oldEstimatedWalletValue: estimatedWalletValue,
-                });
-              } else this.setState({ estimatedWalletValue: oldEstimatedWalletValue });
-            }}
-          >
-            <View
-              tabLabel={intl.formatMessage({
-                id: 'profile.post',
-              })}
-              style={styles.postTabBar}
-            >
-              <Posts
-                filterOptions={PROFILE_FILTERS}
-                selectedOptionIndex={0}
-                pageType="profiles"
-                getFor="blog"
-                tag={username}
-                key={username}
-                handleOnScroll={isSummaryOpen ? this._handleOnScroll : null}
-                forceLoadPost={forceLoadPost}
-                changeForceLoadPostState={changeForceLoadPostState}
-              />
-            </View>
-            <View
-              tabLabel={
-                !isOwnProfile
-                  ? intl.formatMessage({
-                      id: 'profile.comments',
-                    })
-                  : intl.formatMessage({
-                      id: 'profile.replies',
-                    })
-              }
-              style={styles.commentsTabBar}
-            >
-              {comments && comments.length > 0 ? (
-                <ScrollView onScroll={this._handleOnScroll}>
-                  <Comments
-                    isProfilePreview
-                    comments={comments}
-                    fetchPost={getReplies}
-                    isOwnProfile={isOwnProfile}
-                  />
-                </ScrollView>
-              ) : (
-                <NoPost
-                  name={username}
-                  text={intl.formatMessage({
-                    id: 'profile.havent_commented',
-                  })}
-                  defaultText={intl.formatMessage({
-                    id: 'profile.login_to_see',
-                  })}
-                />
-              )}
-            </View>
-            <View
-              tabLabel={
-                estimatedWalletValue
-                  ? `${_estimatedWalletValue}`
-                  : intl.formatMessage({
-                      id: 'profile.wallet',
-                    })
-              }
-            >
-              {selectedUser ? (
-                <Wallet
-                  setEstimatedWalletValue={this._setEstimatedWalletValue}
-                  selectedUser={selectedUser}
-                  handleOnScroll={isSummaryOpen ? this._handleOnScroll : null}
-                />
-              ) : (
-                <WalletDetailsPlaceHolder />
-              )}
-            </View>
-          </ScrollableTabView>
-        </View>
-      </Fragment>
+      <ProfileContainer>
+        {({
+          about,
+          activePage,
+          avatar,
+          changeForceLoadPostState,
+          comments,
+          currency,
+          currencyRate,
+          currencySymbol,
+          error,
+          follows,
+          forceLoadPost,
+          getReplies,
+          handleFollowUnfollowUser,
+          handleMuteUnmuteUser,
+          handleOnBackPress,
+          handleOnFavoritePress,
+          handleOnFollowsPress,
+          handleOnPressProfileEdit,
+          isDarkTheme,
+          isFavorite,
+          isFollowing,
+          isLoggedIn,
+          isMuted,
+          isOwnProfile,
+          isProfileLoading,
+          isReady,
+          quickProfile,
+          resourceCredits,
+          selectedUser,
+          setEstimatedWalletValue,
+          username,
+          votingPower,
+        }) => (
+          <Profile
+            about={about}
+            activePage={activePage}
+            avatar={avatar}
+            changeForceLoadPostState={changeForceLoadPostState}
+            comments={comments}
+            currency={currency}
+            currencyRate={currencyRate}
+            currencySymbol={currencySymbol}
+            error={error}
+            follows={follows}
+            forceLoadPost={forceLoadPost}
+            getReplies={getReplies}
+            handleFollowUnfollowUser={handleFollowUnfollowUser}
+            handleMuteUnmuteUser={handleMuteUnmuteUser}
+            handleOnBackPress={handleOnBackPress}
+            handleOnFavoritePress={handleOnFavoritePress}
+            handleOnFollowsPress={handleOnFollowsPress}
+            handleOnPressProfileEdit={handleOnPressProfileEdit}
+            isDarkTheme={isDarkTheme}
+            isFavorite={isFavorite}
+            isFollowing={isFollowing}
+            isLoggedIn={isLoggedIn}
+            isMuted={isMuted}
+            isOwnProfile={isOwnProfile}
+            isProfileLoading={isProfileLoading}
+            isReady={isReady}
+            quickProfile={quickProfile}
+            resourceCredits={resourceCredits}
+            selectedUser={selectedUser}
+            setEstimatedWalletValue={setEstimatedWalletValue}
+            username={username}
+            votingPower={votingPower}
+          />
+        )}
+      </ProfileContainer>
     );
   }
 }