wip on profile summary view

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 (
       <Fragment>
         <View style={[isColumn ? styles.textWithIconWrapperColumn : styles.textWithIconWrapper]}>
-          {!!location && (
-            <TextWithIcon
-              text={location}
-              iconName="near-me"
-              iconType="MaterialIcons"
-              iconSize={14}
-            />
-          )}
-          {!!link && (
-            <TextWithIcon
-              isClickable
-              onPress={() => this._handleOnPressLink(link)}
-              text={link}
-              iconSize={14}
-              iconName="earth"
-              iconType="MaterialCommunityIcons"
-            />
-          )}
-          {!!date && (
-            <TextWithIcon
-              text={date}
-              iconName="calendar"
-              iconType="MaterialCommunityIcons"
-              iconSize={14}
-            />
+          {ABOUT_DATA.map(
+            item =>
+              has(item, 'text') && (
+                <TextWithIcon
+                  isClickable={get(item, 'onPress')}
+                  onPress={get(item, 'onPress')}
+                  text={item.text}
+                  iconSize={14}
+                  iconName={item.icon}
+                  iconType="MaterialCommunityIcons"
+                />
+              ),
           )}
         </View>
         <Image
@@ -219,7 +213,7 @@ class ProfileSummaryView extends PureComponent {
                   isHasChildIcon
                   noHighlight
                   onSelect={this._handleOnDropdownSelect}
-                  options={dropdownOpions}
+                  options={dropdownOptions}
                 />
               )}
             </View>

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)));

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 });
     }
   }
 

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 {
             <ProfileSummaryPlaceHolder />
           ) : (
             <CollapsibleCard
-              title={_about}
+              title={get(about, 'about')}
               isTitleCenter
               defaultTitle={intl.formatMessage({
                 id: 'profile.details',
@@ -153,8 +143,8 @@ class ProfileScreen extends PureComponent {
               // locked={!isLoggedIn}
             >
               <ProfileSummary
-                coverImage={coverImage}
-                date={getFormatedCreatedDate(selectedUser && selectedUser.created)}
+                date={getFormatedCreatedDate(get(selectedUser, 'created'))}
+                about={about}
                 followerCount={follows.follower_count}
                 followingCount={follows.following_count}
                 handleFollowUnfollowUser={handleFollowUnfollowUser}
@@ -172,8 +162,6 @@ class ProfileScreen extends PureComponent {
                 isMuted={isMuted}
                 isOwnProfile={!isReverseHeader}
                 isProfileLoading={isProfileLoading}
-                link={website}
-                location={location}
                 percentRC={resourceCredits}
                 percentVP={votingPower}
                 handleOnPressProfileEdit={handleOnPressProfileEdit}