fix(profile): navigate to AuthProfile for current user (#263)

* fix(*): fix current user navigation Previously the current user could find and follow himself from the search screen. Need to navigate the current user to auth profile screen. Closes: #247 * refactor(*): change repeated logic * refactor(*): change variable style & remove ternary
gitpoint · Aug 16, 2017 · bfad60c · bfad60c
1 parent 182bc11
commit bfad60c
Showing 1 changed file with 99 additions and 83 deletions.
diff --git a/src/components/user-list-item.component.js b/src/components/user-list-item.component.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import {
   StyleSheet,
   View,
@@ -11,18 +12,6 @@ import { Icon } from 'react-native-elements';
 
 import { colors, fonts, normalize } from 'config';
 
-type Props = {
-  user: Object,
-  title: any,
-  subtitle: string,
-  onlyImageNavigate: boolean,
-  titleStyle: Object,
-  navigation: Object,
-  icon: string,
-  iconAction: Function,
-  noBorderBottom: boolean,
-};
-
 const styles = StyleSheet.create({
   borderContainer: {
     borderBottomColor: colors.greyLight,
@@ -72,81 +61,108 @@ const styles = StyleSheet.create({
   },
 });
 
-export const UserListItem = ({
-  user,
-  title,
-  subtitle,
-  titleStyle,
-  onlyImageNavigate,
-  navigation,
-  icon,
-  noBorderBottom,
-  iconAction,
-}: Props) => {
-  const ContainerComponent =
-    iconAction || onlyImageNavigate ? View : TouchableHighlight;
-  const UserComponent =
-    iconAction && !onlyImageNavigate ? TouchableOpacity : View;
-  const ImageContainerComponent = onlyImageNavigate ? TouchableOpacity : View;
-  const IconComponent = iconAction ? TouchableOpacity : View;
+const mapStateToProps = state => ({
+  authUser: state.auth.user,
+});
+
+class UserListItemComponent extends Component {
+  props: {
+    user: Object,
+    title: any,
+    subtitle: string,
+    onlyImageNavigate: boolean,
+    titleStyle: Object,
+    navigation: Object,
+    icon: string,
+    iconAction: Function,
+    noBorderBottom: boolean,
+    authUser: Object,
+  };
+
+  render() {
+    const {
+      user,
+      title,
+      subtitle,
+      titleStyle,
+      onlyImageNavigate,
+      navigation,
+      icon,
+      noBorderBottom,
+      iconAction,
+      authUser,
+    } = this.props;
+
+    const ContainerComponent =
+      iconAction || onlyImageNavigate ? View : TouchableHighlight;
+    const UserComponent =
+      iconAction && !onlyImageNavigate ? TouchableOpacity : View;
+    const ImageContainerComponent = onlyImageNavigate ? TouchableOpacity : View;
+    const IconComponent = iconAction ? TouchableOpacity : View;
 
-  return (
-    <ContainerComponent
-      onPress={() =>
-        navigation.navigate(
-          user.type === 'User' ? 'Profile' : 'Organization',
-          user.type === 'User' ? { user } : { organization: user }
-        )}
-      underlayColor={colors.greyLight}
-      style={!noBorderBottom && styles.borderContainer}
-    >
-      <View style={styles.wrapper}>
-        <UserComponent
-          style={styles.userInfo}
-          onPress={() =>
-            navigation.navigate('Profile', {
-              user,
-            })}
-        >
-          <ImageContainerComponent
-            style={styles.avatarContainer}
+    const userScreen =
+      authUser.login === user.login ? 'AuthProfile' : 'Profile';
+
+    return (
+      <ContainerComponent
+        onPress={() =>
+          navigation.navigate(
+            user.type === 'User' ? userScreen : 'Organization',
+            user.type === 'User' ? { user } : { organization: user }
+          )}
+        underlayColor={colors.greyLight}
+        style={!noBorderBottom && styles.borderContainer}
+      >
+        <View style={styles.wrapper}>
+          <UserComponent
+            style={styles.userInfo}
             onPress={() =>
-              navigation.navigate('Profile', {
+              navigation.navigate(userScreen, {
                 user,
               })}
           >
-            <Image
-              style={styles.avatar}
-              source={{
-                uri: user.avatar_url,
-              }}
-            />
-          </ImageContainerComponent>
+            <ImageContainerComponent
+              style={styles.avatarContainer}
+              onPress={() =>
+                navigation.navigate(userScreen, {
+                  user,
+                })}
+            >
+              <Image
+                style={styles.avatar}
+                source={{
+                  uri: user.avatar_url,
+                }}
+              />
+            </ImageContainerComponent>
+
+            <View style={styles.titleSubtitleContainer}>
+              <Text style={[styles.title, titleStyle && titleStyle]}>
+                {title || user.login}
+              </Text>
 
-          <View style={styles.titleSubtitleContainer}>
-            <Text style={[styles.title, titleStyle && titleStyle]}>
-              {title || user.login}
-            </Text>
+              {subtitle &&
+                <Text style={styles.subtitle}>
+                  {subtitle}
+                </Text>}
+            </View>
+          </UserComponent>
 
-            {subtitle &&
-              <Text style={styles.subtitle}>
-                {subtitle}
-              </Text>}
-          </View>
-        </UserComponent>
+          <IconComponent
+            style={styles.iconContainer}
+            onPress={() => iconAction(user.login)}
+          >
+            <Icon
+              color={colors.grey}
+              size={icon ? 24 : 28}
+              name={icon || 'chevron-right'}
+              type={icon && 'octicon'}
+            />
+          </IconComponent>
+        </View>
+      </ContainerComponent>
+    );
+  }
+}
 
-        <IconComponent
-          style={styles.iconContainer}
-          onPress={() => iconAction(user.login)}
-        >
-          <Icon
-            color={colors.grey}
-            size={icon ? 24 : 28}
-            name={icon || 'chevron-right'}
-            type={icon && 'octicon'}
-          />
-        </IconComponent>
-      </View>
-    </ContainerComponent>
-  );
-};
+export const UserListItem = connect(mapStateToProps)(UserListItemComponent);