Allow navigation to profiles using channel intro icons and names (#644)

* Allow navigation to profiles using channel intro icons and names

* Add preventDoubleTap

app/components/channel_intro/channel_intro.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import {
     StyleSheet,
     Text,
+    TouchableOpacity,
     View
 } from 'react-native';
 import {getFullName} from 'mattermost-redux/utils/user_utils';
@@ -13,6 +14,7 @@ import {General} from 'mattermost-redux/constants';
 import {injectIntl, intlShape} from 'react-intl';
 
 import ProfilePicture from 'app/components/profile_picture';
+import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 class ChannelIntro extends PureComponent {
@@ -21,9 +23,30 @@ class ChannelIntro extends PureComponent {
         currentChannelMembers: PropTypes.array.isRequired,
         currentUser: PropTypes.object.isRequired,
         intl: intlShape.isRequired,
+        navigator: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired
     };
 
+    goToUserProfile = (userId) => {
+        const {intl, navigator, theme} = this.props;
+
+        navigator.push({
+            screen: 'UserProfile',
+            title: intl.formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'}),
+            animated: true,
+            backButtonTitle: '',
+            passProps: {
+                userId
+            },
+            navigatorStyle: {
+                navBarTextColor: theme.sidebarHeaderTextColor,
+                navBarBackgroundColor: theme.sidebarHeaderBg,
+                navBarButtonColor: theme.sidebarHeaderTextColor,
+                screenBackgroundColor: theme.centerChannelBg
+            }
+        });
+    };
+
     getDisplayName = (member) => {
         if (!member) {
             return null;
@@ -43,8 +66,9 @@ class ChannelIntro extends PureComponent {
         const style = getStyleSheet(theme);
 
         return currentChannelMembers.map((member) => (
-            <View
+            <TouchableOpacity
                 key={member.id}
+                onPress={() => preventDoubleTap(this.goToUserProfile, this, member.id)}
                 style={style.profile}
             >
                 <ProfilePicture
@@ -54,7 +78,7 @@ class ChannelIntro extends PureComponent {
                     statusSize={25}
                     statusIconSize={15}
                 />
-            </View>
+            </TouchableOpacity>
         ));
     };
 
@@ -62,9 +86,18 @@ class ChannelIntro extends PureComponent {
         const {currentChannelMembers, theme} = this.props;
         const style = getStyleSheet(theme);
 
-        const names = currentChannelMembers.map((member) => this.getDisplayName(member));
+        const names = currentChannelMembers.map((member, index) => (
+            <TouchableOpacity
+                key={member.id}
+                onPress={() => preventDoubleTap(this.goToUserProfile, this, member.id)}
+            >
+                <Text style={style.displayName}>
+                    {index === currentChannelMembers.length - 1 ? this.getDisplayName(member) : `${this.getDisplayName(member)}, `}
+                </Text>
+            </TouchableOpacity>
+        ));
 
-        return <Text style={style.displayName}>{names.join(', ')}</Text>;
+        return <View style={{flexDirection: 'row'}}>{names}</View>;
     };
 
     buildDMContent = () => {

app/components/post_list/post_list.js

@@ -101,7 +101,7 @@ export default class PostList extends Component {
     };
 
     renderChannelIntro = () => {
-        const {channel, channelIsLoading, posts} = this.props;
+        const {channel, channelIsLoading, navigator, posts} = this.props;
 
         if (channel.hasOwnProperty('id')) {
             const firstPostHasRendered = channel.total_msg_count ? posts.length > 0 : true;
@@ -112,7 +112,7 @@ export default class PostList extends Component {
 
             return (
                 <View>
-                    <ChannelIntro/>
+                    <ChannelIntro navigator={navigator}/>
                 </View>
             );
         }