Fixed header design

src/components/header/container/headerContainer.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { withNavigation } from 'react-navigation';
+import { connect } from 'react-redux';
 
 // Services and Actions
 
@@ -41,14 +42,22 @@ class HeaderContainer extends Component {
   };
 
   render() {
+    const { isLoggedIn, currentAccount } = this.props;
     return (
       <HeaderView
         handleOnPressBackButton={this._handleOnPressBackButton}
         handleOpenDrawer={this._handleOpenDrawer}
+        isLoggedIn={isLoggedIn}
+        currentAccount={currentAccount}
         {...this.props}
       />
     );
   }
 }
 
-export default withNavigation(HeaderContainer);
+const mapStateToProps = state => ({
+  isLoggedIn: state.application.isLoggedIn || false,
+  currentAccount: state.account.currentAccount || {},
+});
+
+export default connect(mapStateToProps)(withNavigation(HeaderContainer));

src/components/header/view/headerStyles.js

@@ -13,11 +13,14 @@ export default EStyleSheet.create({
     justifyContent: 'space-between',
     flexDirection: 'row-reverse',
   },
-  avatarWrapperReverse: {
+  avatarWrapper: {
+    justifyContent: 'center',
+  },
+  avatarButtonWrapperReverse: {
     borderTopLeftRadius: 68 / 2,
     borderBottomLeftRadius: 68 / 2,
   },
-  avatarWrapper: {
+  avatarButtonWrapper: {
     backgroundColor: '#357ce6',
     height: 50,
     width: 68,
@@ -38,6 +41,10 @@ export default EStyleSheet.create({
     fontWeight: 'bold',
     color: '$primaryDarkGray',
   },
+  noAuthTitle: {
+    fontSize: 14,
+    color: '$iconColor',
+  },
   subTitle: {
     color: '$primaryDarkGray',
     fontSize: 12,

src/components/header/view/headerView.js

@@ -3,10 +3,8 @@ import {
   View, StatusBar, Text, SafeAreaView, TouchableOpacity,
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
-// Constants
 
 // Utils
-
 import { getReputation } from '../../../utils/user';
 
 // Components
@@ -33,46 +31,70 @@ class HeaderView extends Component {
 
   // Component Functions
 
+  _getNameOfUser = () => {
+    const { currentAccount } = this.props;
+    if (Object.keys(currentAccount).length === 0) return '';
+    const jsonMetadata = JSON.parse(currentAccount.json_metadata);
+    if (Object.keys(jsonMetadata).length !== 0) {
+      return jsonMetadata.profile.name;
+    }
+    return currentAccount.name;
+  };
+
+  _getUserAvatar = () => {
+    const { currentAccount } = this.props;
+    if (Object.keys(currentAccount).length === 0) return DEFAULT_IMAGE;
+    const jsonMetadata = JSON.parse(currentAccount.json_metadata);
+    if (Object.keys(jsonMetadata).length !== 0) {
+      return { uri: jsonMetadata.profile.profile_image };
+    }
+    return DEFAULT_IMAGE;
+  };
+
   render() {
     const {
-      avatar,
       handleOpenDrawer,
       handleOnPressBackButton,
       hideStatusBar,
-      userName,
       isReverse,
-      name,
+      currentAccount,
-      reputation,
+      isLoggedIn,
     } = this.props;
 
     return (
       <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
         <StatusBar hidden={hideStatusBar} translucent />
-        <TouchableOpacity onPress={() => !isReverse && handleOpenDrawer()}>
+        <TouchableOpacity
+          style={styles.avatarWrapper}
+          onPress={() => !isReverse && handleOpenDrawer()}
+        >
           <View
             style={[
-              styles.avatarWrapper,
+              styles.avatarButtonWrapper,
-              isReverse ? styles.avatarWrapperReverse : styles.avatarDefault,
+              isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
             ]}
           >
             <FastImage
               style={styles.avatar}
-              source={{ uri: avatar }}
+              source={this._getUserAvatar()}
               defaultSource={DEFAULT_IMAGE}
             />
           </View>
         </TouchableOpacity>
-        <View style={styles.titleWrapper}>
+        {isLoggedIn ? (
-          {name && <Text style={styles.title}>{name}</Text>}
+          <View style={styles.titleWrapper}>
-          {userName !== undefined
+            <Text style={styles.title}>{this._getNameOfUser()}</Text>
-            && reputation !== undefined && (
+            <Text style={styles.subTitle}>
-              <Text style={styles.subTitle}>
+              @
-                @
+              {currentAccount.name}
-                {userName}
+              {`(${getReputation(currentAccount.reputation)})`}
-                {`(${getReputation(reputation)})`}
+            </Text>
-              </Text>
+          </View>
-          )}
+        ) : (
-        </View>
+          <View style={styles.titleWrapper}>
+            <Text style={styles.noAuthTitle}>Log in to customize your feed</Text>
+          </View>
+        )}
         {isReverse && (
           <View style={styles.backButtonWrapper}>
             <IconButton

src/components/sideMenu/view/sideMenuView.js

@@ -68,7 +68,7 @@ class SideMenuView extends Component {
     if (Object.keys(currentAccount).length === 0) return DEFAULT_IMAGE;
     const jsonMetadata = JSON.parse(currentAccount.json_metadata);
     if (Object.keys(jsonMetadata).length !== 0) {
-      return { uri: jsonMetadata.profile.cover_image };
+      return { uri: jsonMetadata.profile.profile_image };
     }
     return DEFAULT_IMAGE;
   };

src/providers/steem/auth.js

@@ -57,7 +57,7 @@ export const Login = (username, password) => {
 
         const jsonMetadata = JSON.parse(account.json_metadata);
         if (Object.keys(jsonMetadata).length !== 0) {
-          avatar = jsonMetadata.profile.cover_image;
+          avatar = jsonMetadata.profile.profile_image;
         }
         if (loginFlag) {
           const userData = {
@@ -97,7 +97,7 @@ export const loginWithSC2 = async (accessToken) => {
   return new Promise((resolve, reject) => {
     const jsonMetadata = JSON.parse(account.json_metadata);
     if (Object.keys(jsonMetadata).length !== 0) {
-      avatar = jsonMetadata.profile.cover_image;
+      avatar = jsonMetadata.profile.profile_image;
     }
 
     const userData = {

src/screens/home/screen/homeScreen.js

@@ -78,7 +78,7 @@ export default class HomeScreen extends PureComponent {
     const { componentId } = this.props;
     return (
       <Fragment>
-        <Header userName={user && user.name} reputation={user && user.reputation} />
+        <Header />
         <View style={styles.root} key="overlay">
           <ScrollableTabView
             style={styles.tabView}

src/screens/profile/screen/profileScreen.js

@@ -66,13 +66,7 @@ class ProfileScreen extends Component {
     }
     return (
       <Fragment>
-        <Header
+        <Header isReverse={isReverseHeader} />
-          name={name}
-          avatar={avatar}
-          isReverse={isReverseHeader}
-          userName={user && user.name}
-          reputation={user && user.reputation}
-        />
         <View style={styles.container}>
           {!isReady ? (
             <ProfileSummaryPlaceHolder />

src/screens/splash/container/splashContainer.js

@@ -47,7 +47,7 @@ class SplashContainer extends Component {
         });
       } else {
         dispatch(activeApplication());
-        navigation.navigate(ROUTES.SCREENS.LOGIN);
+        navigation.navigate(ROUTES.DRAWER.MAIN);
       }
     });
   };