1 files changed, 111 insertions, 29 deletions

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index abc29422..af116dd3 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -13,7 +13,7 @@ import {useNavigation} from '@react-navigation/native';
 import RNFetchBlob from 'rn-fetch-blob';
 import AsyncStorage from '@react-native-community/async-storage';
 import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
-import {UserType} from '../../types';
+import {UserType, PreviewType} from '../../types';
 import {AuthContext} from '../../routes/';
 import {isUserBlocked} from '../../services';
 const NO_USER: UserType = {
@@ -33,12 +33,11 @@ const NO_USER: UserType = {
 
 interface ProfilePreviewProps extends ViewProps {
   profilePreview: ProfilePreviewType;
-  isComment: boolean;
+  previewType: PreviewType;
 }
 const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   profilePreview: {username, first_name, last_name, id},
-  isComment,
-  style,
+  previewType,
 }) => {
   const navigation = useNavigation();
   const {user: loggedInUser, logout} = React.useContext(AuthContext);
@@ -103,13 +102,13 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     };
 
     try {
-      //If the logged in user is blocked by the user being viewed, do not proceed.
-      const isUserBlocked = await checkIfUserIsBlocked(user.id);
-      if (isUserBlocked) {
-        Alert.alert('You cannot view this profile');
-        return;
-      }
-      if (!isComment) {
+      if (previewType !== 'Comment') {
+        //If the logged in user is blocked by the user being viewed, do not proceed.
+        const isUserBlocked = await checkIfUserIsBlocked(user.id);
+        if (isUserBlocked) {
+          Alert.alert('You cannot view this profile');
+          return;
+        }
         const jsonValue = await AsyncStorage.getItem(
           '@recently_searched_users',
         );
@@ -158,18 +157,51 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     }
   };
 
-  //With @ sign if on search screen.
-  const usernameToDisplay = !isComment ? '@' + username : username;
-  const usernameStyle = isComment
-    ? styles.commentUsername
-    : styles.searchUsername;
+  var containerStyle,
+    avatarStyle,
+    nameContainerStyle,
+    usernameToDisplay,
+    usernameStyle,
+    nameStyle;
 
-  const avatarStyle = !isComment ? styles.searchAvatar : styles.commentAvatar;
+  switch (previewType) {
+    case 'Search' || 'Recent':
+      containerStyle = styles.searchResultContainer;
+      avatarStyle = styles.searchResultAvatar;
+      nameContainerStyle = styles.searchResultNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.searchResultUsername;
+      nameStyle = styles.searchResultName;
+      break;
+    case 'Discover Users':
+      containerStyle = styles.discoverUsersContainer;
+      avatarStyle = styles.discoverUsersAvatar;
+      nameContainerStyle = styles.discoverUsersNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.discoverUsersUsername;
+      nameStyle = styles.discoverUsersName;
+      break;
+    case 'Comment':
+      containerStyle = styles.commentContainer;
+      avatarStyle = styles.commentAvatar;
+      nameContainerStyle = styles.commentNameContainer;
+      usernameToDisplay = username;
+      usernameStyle = styles.commentUsername;
+      nameStyle = styles.commentName;
+      break;
+    default:
+      containerStyle = styles.searchResultContainer;
+      avatarStyle = styles.searchResultAvatar;
+      nameContainerStyle = styles.searchResultNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.searchResultUsername;
+      nameStyle = styles.searchResultName;
+  }
 
   return (
     <TouchableOpacity
       onPress={addToRecentlyStoredAndNavigateToProfile}
-      style={[styles.container, style]}>
+      style={containerStyle}>
       <Image
         style={avatarStyle}
         source={
@@ -178,12 +210,21 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-      <View style={styles.nameContainer}>
-        <Text style={usernameStyle}>{usernameToDisplay}</Text>
-        {first_name ? (
-          <Text style={styles.name}>{first_name.concat(' ', last_name)}</Text>
-        ) : (
-          React.Fragment
+      <View style={nameContainerStyle}>
+        {(previewType === 'Search' || previewType === 'Recent') && (
+          <>
+            <Text style={usernameStyle}>{usernameToDisplay}</Text>
+            <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
+          </>
+        )}
+        {previewType === 'Comment' && (
+          <Text style={usernameStyle}>{usernameToDisplay}</Text>
+        )}
+        {previewType === 'Discover Users' && (
+          <>
+            <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
+            <Text style={usernameStyle}>{usernameToDisplay}</Text>
+          </>
         )}
       </View>
     </TouchableOpacity>
@@ -191,11 +232,23 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
+  searchResultContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginVertical: 10,
   },
-  searchAvatar: {
+  commentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  discoverUsersContainer: {
+    alignItems: 'center',
+    textAlign: 'center',
+    margin: '0.5%',
+    width: '32%',
+    marginVertical: 10,
+  },
+  searchResultAvatar: {
     height: 60,
     width: 60,
     borderRadius: 30,
@@ -208,11 +261,24 @@ const styles = StyleSheet.create({
     marginRight: 15,
     marginTop: '2%',
   },
-  nameContainer: {
+  discoverUsersAvatar: {
+    height: 60,
+    width: 60,
+    borderRadius: 30,
+  },
+  searchResultNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+  },
+  commentNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+  },
+  discoverUsersNameContainer: {
     justifyContent: 'space-evenly',
     alignSelf: 'stretch',
   },
-  searchUsername: {
+  searchResultUsername: {
     fontSize: 18,
     fontWeight: '500',
   },
@@ -220,10 +286,26 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '500',
   },
-  name: {
+  discoverUsersUsername: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: 'white',
+    textAlign: 'center',
+  },
+  searchResultName: {
+    fontSize: 16,
+    color: '#333',
+  },
+  commentName: {
     fontSize: 16,
     color: '#333',
   },
+  discoverUsersName: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: 'white',
+    textAlign: 'center',
+  },
 });
 
 export default ProfilePreview;