diff --git a/src/components/profileSummary/view/profileSummaryView.js b/src/components/profileSummary/view/profileSummaryView.js index 1fe029f11..13fa6737a 100644 --- a/src/components/profileSummary/view/profileSummaryView.js +++ b/src/components/profileSummary/view/profileSummaryView.js @@ -8,6 +8,7 @@ import { ActivityIndicator, Linking, } from 'react-native'; +import { get, has } from 'lodash'; // Constants import LIGHT_COVER_IMAGE from '../../../assets/default_cover_image.png'; @@ -45,7 +46,7 @@ class ProfileSummaryView extends PureComponent { // Component Functions _handleOnPressLink = url => { - Linking.openURL(url); + if (url) Linking.openURL(url); }; _handleOnDropdownSelect = index => { @@ -61,8 +62,8 @@ class ProfileSummaryView extends PureComponent { render() { const { isShowPercentText } = this.state; const { - coverImage, date, + about, followerCount, followingCount, handleFollowUnfollowUser, @@ -80,54 +81,47 @@ class ProfileSummaryView extends PureComponent { isMuted, isOwnProfile, isProfileLoading, - link, - location, percentRC, percentVP, } = this.props; - const dropdownOpions = []; + const dropdownOptions = []; const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`; const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`; const rcPowerHoursText = hoursRC && `• Full in ${hoursRC} hours`; const rcPowerText = `RCs: ${percentRC}% ${rcPowerHoursText || ''}`; + const link = ''; + const location = get(about, 'location', ''); + + const ABOUT_DATA = [ + { text: date, icon: 'calendar' }, + { text: link, icon: 'earth', onPress: () => this._handleOnPressLink(link) }, + { text: location, icon: 'near-me' }, + ]; const rowLength = (location ? location.length : 0) + (link ? link.length : 0) + (date ? date.length : 0); const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3; const followButtonIcon = !isFollowing ? 'account-plus' : 'account-minus'; - const coverImageUrl = getResizedImage(coverImage, 400); + const coverImageUrl = getResizedImage(get(about, 'cover_image'), 400); - dropdownOpions.push(!isMuted ? 'MUTE' : 'UNMUTE'); + dropdownOptions.push(!isMuted ? 'MUTE' : 'UNMUTE'); return ( - {!!location && ( - - )} - {!!link && ( - this._handleOnPressLink(link)} - text={link} - iconSize={14} - iconName="earth" - iconType="MaterialCommunityIcons" - /> - )} - {!!date && ( - + {ABOUT_DATA.map( + item => + has(item, 'text') && ( + + ), )} )} diff --git a/src/containers/profileContainer.js b/src/containers/profileContainer.js new file mode 100644 index 000000000..4e5568c9c --- /dev/null +++ b/src/containers/profileContainer.js @@ -0,0 +1,65 @@ +import { Component } from 'react'; +import { connect } from 'react-redux'; +import { injectIntl } from 'react-intl'; +import get from 'lodash/get'; +import { withNavigation } from 'react-navigation'; + +import { default as ROUTES } from '../constants/routeNames'; + +class ProfileContainer extends Component { + constructor(props) { + super(props); + const isReverseHeader = get(props, 'navigation.state.username', false); + + this.state = { + isReverseHeader, + }; + } + + // Component Life Cycles + + componentDidMount = () => { + const { navigation, isLoggedIn, currentAccount } = this.props; + const selectedUser = get(navigation.state, 'params'); + + if (!isLoggedIn && !selectedUser) { + navigation.navigate(ROUTES.SCREENS.LOGIN); + return; + } + + if (get(selectedUser, 'username', false) && selectedUser.username !== currentAccount.name) { + this._loadProfile(selectedUser.username); + + if (selectedUser.username) { + const selectedQuickProfile = { + reputation: selectedUser.reputation, + name: selectedUser.username, + }; + + this.setState({ selectedQuickProfile }); + } + + this.setState({ isReverseHeader: true }); + } else { + this._loadProfile(currentAccount.name); + } + }; + + // Component Functions + + render() { + const { isReverseHeader } = this.state; + const { children } = this.props; + + return ( + children && + children({ + isReverseHeader, + }) + ); + } +} + +const mapStateToProps = state => ({}); + +export default connect(mapStateToProps)(injectIntl(withNavigation(ProfileContainer))); diff --git a/src/screens/profile/container/profileContainer.js b/src/screens/profile/container/profileContainer.js index 52c14c1c8..9c60b6cb4 100644 --- a/src/screens/profile/container/profileContainer.js +++ b/src/screens/profile/container/profileContainer.js @@ -28,11 +28,7 @@ import ProfileScreen from '../screen/profileScreen'; class ProfileContainer extends Component { constructor(props) { super(props); - const isReverseHeader = !!( - props.navigation.state && - props.navigation.state.params && - props.navigation.state.username - ); + const isReverseHeader = get(props, 'navigation.state.username', false); this.state = { comments: [], @@ -69,8 +65,6 @@ class ProfileContainer extends Component { this.setState({ selectedQuickProfile }); } - - this.setState({ isReverseHeader: true }); } else { this._loadProfile(currentAccount.name); } @@ -79,21 +73,18 @@ class ProfileContainer extends Component { componentWillReceiveProps(nextProps) { const { activeBottomTab, currentAccount, isLoggedIn, navigation } = this.props; const currentUsername = - get(currentAccount, 'name') !== nextProps.currentAccount.name && - nextProps.currentAccount.name; - + get(currentAccount, 'name') !== get(nextProps, 'currentAccount.name') && + get(nextProps, 'currentAccount.name'); if (isLoggedIn && !nextProps.isLoggedIn) { navigation.navigate(ROUTES.SCREENS.LOGIN); return; } - if ( (activeBottomTab !== get(nextProps, 'activeBottomTab') && get(nextProps, 'activeBottomTab') === ROUTES.TABBAR.PROFILE) || currentUsername ) { this._loadProfile(currentAccount.name); - this.setState({ forceLoadPost: true }); } } diff --git a/src/screens/profile/screen/profileScreen.js b/src/screens/profile/screen/profileScreen.js index 09c18203d..069e3668b 100644 --- a/src/screens/profile/screen/profileScreen.js +++ b/src/screens/profile/screen/profileScreen.js @@ -1,6 +1,7 @@ import React, { PureComponent, Fragment } from 'react'; import { View, ScrollView } from 'react-native'; import { injectIntl } from 'react-intl'; +import get from 'lodash/get'; // Components import ScrollableTabView from 'react-native-scrollable-tab-view'; @@ -96,10 +97,6 @@ class ProfileScreen extends PureComponent { oldEstimatedWalletValue, } = this.state; - let _about; - let coverImage; - let location; - let website; let votingPower; let resourceCredits; let fullInHourVP; @@ -113,13 +110,6 @@ class ProfileScreen extends PureComponent { fullInHourRC = Math.ceil((100 - resourceCredits) * 0.833333); } - if (about) { - _about = about.about; - coverImage = about.cover_image; - ({ location } = about); - ({ website } = about); - } - if (estimatedWalletValue) { const { currencyRate, currencySymbol } = currency; _estimatedWalletValue = `${currencySymbol} ${( @@ -140,7 +130,7 @@ class ProfileScreen extends PureComponent { ) : (