diff --git a/src/components/header/container/headerContainer.js b/src/components/header/container/headerContainer.js index fe8ce2244..1f6af5247 100644 --- a/src/components/header/container/headerContainer.js +++ b/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, currentUser, user } = this.props; return ( ); } } -export default withNavigation(HeaderContainer); +const mapStateToProps = state => ({ + isLoggedIn: state.application.isLoggedIn || false, + currentUser: state.account.currentAccount || {}, +}); + +export default connect(mapStateToProps)(withNavigation(HeaderContainer)); diff --git a/src/components/header/view/headerStyles.js b/src/components/header/view/headerStyles.js index 1064f71d2..13a36976c 100644 --- a/src/components/header/view/headerStyles.js +++ b/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, diff --git a/src/components/header/view/headerView.js b/src/components/header/view/headerView.js index dc77fa778..7d4b3e419 100644 --- a/src/components/header/view/headerView.js +++ b/src/components/header/view/headerView.js @@ -3,12 +3,8 @@ import { View, StatusBar, Text, SafeAreaView, TouchableOpacity, } from 'react-native'; import FastImage from 'react-native-fast-image'; -import LinearGradient from 'react-native-linear-gradient'; - -// Constants // Utils - import { getReputation } from '../../../utils/user'; // Components @@ -35,51 +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, - reputation, + currentAccount, + isLoggedIn, } = this.props; return (