wip on headers avatar

src/components/header/container/headerContainer.js

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 // Constants
 
 // Utilities
+import { getReputation } from '../../../utils/user';
 
 // Component
 import { HeaderView } from '..';
@@ -43,16 +44,36 @@ class HeaderContainer extends Component {
 
   render() {
     const {
-      isLoggedIn, currentUser, user, isReserve, isLoginDone,
+      isLoggedIn, currentAccount, selectedUser, isReverse, isLoginDone,
     } = this.props;
+    let avatar;
+    let displayName;
+    let userName;
+    let reputation;
+
+    if (!isReverse) {
+      avatar = currentAccount.profile_image && { uri: currentAccount.profile_image };
+      displayName = currentAccount.display_name;
+      userName = currentAccount.name;
+      reputation = getReputation(currentAccount.reputation);
+    } else {
+      avatar = selectedUser.profile_image && { uri: selectedUser.profile_image };
+      displayName = selectedUser.display_name;
+      userName = selectedUser.name;
+      reputation = getReputation(selectedUser.reputation);
+    }
+
     return (
       <HeaderView
         handleOnPressBackButton={this._handleOnPressBackButton}
         handleOpenDrawer={this._handleOpenDrawer}
         isLoggedIn={isLoggedIn}
-        currentAccount={user || currentUser}
-        isReserve={isReserve}
+        isReverse={isReverse}
         isLoginDone={isLoginDone}
+        avatar={avatar}
+        displayName={displayName}
+        userName={userName}
+        reputation={reputation}
       />
     );
   }
@@ -62,7 +83,7 @@ const mapStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
   isLoginDone: state.application.isLoginDone,
 
-  currentUser: state.account.currentAccount,
+  currentAccount: state.account.currentAccount,
 });
 
 export default connect(mapStateToProps)(withNavigation(HeaderContainer));

src/components/header/view/headerView.js

@@ -1,14 +1,10 @@
 import React, { Component } from 'react';
 import {
-  View, StatusBar, Text, SafeAreaView, TouchableOpacity,
+  View, StatusBar, Text, SafeAreaView, TouchableOpacity, Image,
 } from 'react-native';
-import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import { injectIntl } from 'react-intl';
 
-// Utils
-import { getReputation } from '../../../utils/user';
-
 // Components
 import { SearchModal } from '../../searchModal';
 import { IconButton } from '../../iconButton';
@@ -46,15 +42,15 @@ class HeaderView extends Component {
       handleOnPressBackButton,
       hideStatusBar,
       isReverse,
-      currentAccount,
       intl,
       isLoginDone,
+      reputation,
+      displayName,
+      userName,
+      avatar,
     } = this.props;
     const { isSearchModalOpen } = this.state;
-    const _reputation = getReputation(currentAccount.reputation);
-    const _avatar = currentAccount.profile_image
-      ? { uri: currentAccount.profile_image }
-      : DEFAULT_IMAGE;
+
     return (
       <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
         {/* <StatusBar style={ { height: 20}} hidden={hideStatusBar} translucent /> */}
@@ -78,18 +74,16 @@ class HeaderView extends Component {
               isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
             ]}
           >
-            <FastImage style={styles.avatar} source={_avatar} defaultSource={DEFAULT_IMAGE} />
+            <Image style={styles.avatar} source={avatar} defaultSource={DEFAULT_IMAGE} />
           </LinearGradient>
         </TouchableOpacity>
-        {currentAccount && currentAccount.name ? (
+        {displayName || userName ? (
           <View style={styles.titleWrapper}>
-            {currentAccount.display_name && (
-              <Text style={styles.title}>{currentAccount.display_name}</Text>
-            )}
+            {displayName && <Text style={styles.title}>{displayName}</Text>}
             <Text style={styles.subTitle}>
               @
-              {currentAccount.name}
-              {`(${_reputation})`}
+              {userName}
+              {`(${reputation})`}
             </Text>
           </View>
         ) : (

src/screens/profile/screen/profileScreen.js

@@ -74,7 +74,7 @@ class ProfileScreen extends Component {
     }
     return (
       <Fragment>
-        <Header user={user} isReverse={isReverseHeader} />
+        <Header selectedUser={user} isReverse={isReverseHeader} />
         <View style={styles.container}>
           {!isReady ? (
             <ProfileSummaryPlaceHolder />