Merge pull request #243 from shravyaramesh/tma628-mutual-friends

[TMA-628] Mutual friends

8 files changed, 297 insertions, 4 deletions

diff --git a/src/components/index.ts b/src/components/index.ts
index 46a7773f..0a7c189b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,3 +5,5 @@ export * from './search';
 export * from './taggs';
 export * from './comments';
 export * from './moments';
+export * from './suggestedPeople';
+
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index fad3ec09..02ab94e7 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -18,6 +18,7 @@ import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {
   checkIfUserIsBlocked,
   fetchUserX,
+  isIPhoneX,
   normalize,
   SCREEN_WIDTH,
   userXInStore,
@@ -188,6 +189,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.friendUsername;
       nameStyle = styles.friendName;
       break;
+    case 'Suggested People Drawer':
+      containerStyle = styles.suggestedPeopleContainer;
+      avatarStyle = styles.suggestedPeopleAvatar;
+      nameContainerStyle = styles.suggestedPeopleNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.suggestedPeopleUsername;
+      nameStyle = styles.suggestedPeopleName;
+      break;
+    case 'Suggested People Screen':
+      avatarStyle = styles.suggestedPeopleScreenAvatar;
+      break;
     default:
       containerStyle = styles.searchResultContainer;
       avatarStyle = styles.searchResultAvatar;
@@ -229,6 +241,16 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
           </>
         )}
+        {previewType === 'Suggested People Drawer' && (
+          <>
+            <Text style={styles.suggestedPeopleName} numberOfLines={2}>
+              {first_name} {last_name}
+            </Text>
+            <Text
+              style={styles.suggestedPeopleUsername}
+              numberOfLines={1}>{`@${username}`}</Text>
+          </>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -340,6 +362,44 @@ const styles = StyleSheet.create({
     color: '#6C6C6C',
     letterSpacing: normalize(0.1),
   },
+  suggestedPeopleContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 25,
+    width: isIPhoneX() ? 80 : 65,
+  },
+  suggestedPeopleAvatar: {
+    alignSelf: 'center',
+    height: normalize(60),
+    width: normalize(60),
+    borderRadius: 60,
+  },
+  suggestedPeopleUsername: {
+    fontSize: normalize(10),
+    lineHeight: normalize(15),
+    fontWeight: '500',
+    color: '#828282',
+    textAlign: 'center',
+  },
+  suggestedPeopleNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+    marginTop: 10,
+  },
+  suggestedPeopleName: {
+    fontSize: normalize(12),
+    lineHeight: normalize(15),
+    fontWeight: '700',
+    color: '#3C3C3C',
+    textAlign: 'center',
+  },
+  suggestedPeopleScreenAvatar: {
+    height: normalize(33.5),
+    width: normalize(33.5),
+    marginRight: 15,
+    borderRadius: 50,
+  },
 });
 
 export default ProfilePreview;
diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
new file mode 100644
index 00000000..f99279c0
--- /dev/null
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -0,0 +1,213 @@
+import React, {useState} from 'react';
+import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {BottomDrawer, TabsGradient} from '../../components';
+import {RootState} from '../../store/rootReducer';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ProfilePreview} from '../profile';
+import {normalize} from 'react-native-elements';
+
+const MutualFriends: React.FC = () => {
+  // Requires user id of profile being viewed
+  const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';
+
+  // Fetch mutual friends of user X
+  let {friends} = userXId
+    ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
+    : useSelector((state: RootState) => state.friends);
+
+  // Getting list of first 4 friends to display on suggested people screen
+  const friendsPreview = friends.slice(0, 4);
+
+  // Extract username of user whose profile is being viewed
+  const username = '@' + '12345678901234';
+
+  // Count to be displayed after + symbol
+  const count = friends.length - friendsPreview.length;
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  return (
+    <>
+      {friends && friends.length > 0 && (
+        <SafeAreaView>
+          <View style={styles.body}>
+            <Text style={styles.title}>Mutual Friends</Text>
+            <View style={styles.previewProfilesContainer}>
+              {friendsPreview.map((profilePreview) => (
+                <ProfilePreview
+                  previewType={'Suggested People Screen'}
+                  screenType={ScreenType.SuggestedPeople}
+                  profilePreview={profilePreview}
+                />
+              ))}
+              {friends && friends.length > 4 && (
+                <TouchableOpacity onPress={() => setDrawerVisible(true)}>
+                  <View style={styles.mutualFriendsButton}>
+                    <Text style={styles.plusSign}>+</Text>
+                    <Text style={styles.count}>{count}</Text>
+                  </View>
+                </TouchableOpacity>
+              )}
+              <BottomDrawer
+                initialSnapPosition={isIPhoneX() ? '43%' : '50%'}
+                showHeader={false}
+                isOpen={drawerVisible}
+                setIsOpen={setDrawerVisible}>
+                <View style={styles.mainContainer}>
+                  <View style={styles.headerContainer}>
+                    <View style={styles.headerTextContainer}>
+                      <Text style={styles.headerTitle}>Mutual Friends</Text>
+                      <Text style={styles.headerDescription} numberOfLines={2}>
+                        {username} and you are both friends with
+                      </Text>
+                    </View>
+                  </View>
+                  <View style={styles.scrollViewContainer}>
+                    <ScrollView
+                      contentContainerStyle={styles.scrollView}
+                      horizontal
+                      showsHorizontalScrollIndicator={false}>
+                      {friends.map((profilePreview) => (
+                        <ProfilePreview
+                          previewType={'Suggested People Drawer'}
+                          screenType={ScreenType.SuggestedPeople}
+                          profilePreview={profilePreview}
+                        />
+                      ))}
+                    </ScrollView>
+                  </View>
+                  <TouchableOpacity
+                    style={styles.cancelButton}
+                    onPress={() => setDrawerVisible(false)}>
+                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                  </TouchableOpacity>
+                </View>
+              </BottomDrawer>
+            </View>
+          </View>
+        </SafeAreaView>
+      )}
+      <TabsGradient />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    width: SCREEN_WIDTH * 0.9,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.065 : SCREEN_HEIGHT * 0.08,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    marginBottom: isIPhoneX() ? 25 : 5,
+  },
+  title: {
+    fontSize: normalize(12),
+    lineHeight: normalize(12),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+    paddingBottom: '3.5%',
+  },
+  mutualFriendsButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  plusSign: {
+    fontSize: normalize(16),
+    lineHeight: normalize(18),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  count: {
+    fontSize: normalize(13),
+    lineHeight: normalize(16),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  previewProfilesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  mainContainer: {
+    flexDirection: 'column',
+    backgroundColor: '#f9f9f9',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.46,
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 0.5,
+    borderColor: '#fff',
+  },
+  headerContainer: {
+    width: SCREEN_WIDTH + 2,
+    height: isIPhoneX() ? '28%' : '35%',
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 1,
+    borderColor: '#fff',
+    backgroundColor: '#fff',
+    shadowColor: '#7D7D7D',
+    shadowOffset: {width: 3, height: 3},
+    shadowRadius: 5,
+    shadowOpacity: 0.15,
+    marginBottom: 5.5,
+    alignSelf: 'center',
+  },
+  headerTextContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    height: '100%',
+    width: '90%',
+    alignSelf: 'center',
+    marginTop: '4%',
+  },
+  headerTitle: {
+    fontSize: normalize(16),
+    fontWeight: '700',
+    lineHeight: normalize(20.29),
+    marginBottom: '0.5%',
+    letterSpacing: normalize(0.1),
+  },
+  headerDescription: {
+    fontSize: normalize(13),
+    lineHeight: normalize(15),
+    fontWeight: '600',
+    color: '#828282',
+    paddingTop: '2%',
+    letterSpacing: normalize(0.05),
+    textAlign: 'center',
+  },
+  scrollViewContainer: {
+    height: isIPhoneX() ? 153 : 135,
+    shadowColor: 'rgb(125, 125, 125)',
+    marginTop: '1%',
+  },
+  scrollView: {
+    height: '95%',
+    padding: 0,
+    marginHorizontal: '5%',
+  },
+  cancelButton: {
+    backgroundColor: '#F0F0F0',
+    height: 100,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  cancelButtonText: {
+    top: isIPhoneX() ? '6%' : '7%',
+    color: '#698DD3',
+    fontSize: normalize(16),
+    fontWeight: '700',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
+  },
+});
+
+export default MutualFriends;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
new file mode 100644
index 00000000..219ee2fe
--- /dev/null
+++ b/src/components/suggestedPeople/index.ts
@@ -0,0 +1 @@
+export {default as MutualFriends} from './MutualFriends';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index bb450b64..66694132 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -141,7 +141,12 @@ const Tagg: React.FC<TaggProps> = ({
             setModalVisible={setModalVisible}
             completionCallback={linkNonIntegratedSocial}
           />
-          <View style={styles.container}>
+          <View
+            style={
+              screenType === ScreenType.SuggestedPeople
+                ? styles.spcontainer
+                : styles.container
+            }>
             <TouchableOpacity
               style={styles.iconTap}
               onPress={modalOrAuthBrowserOrPass}>
@@ -174,6 +179,12 @@ const Tagg: React.FC<TaggProps> = ({
 };
 
 const styles = StyleSheet.create({
+  spcontainer: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginRight: 34,
+    height: normalize(60),
+  },
   container: {
     justifyContent: 'space-between',
     alignItems: 'center',
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index e7bdb0f2..c23f56a9 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -148,7 +148,7 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
     shadowOffset: {width: 0, height: 2},
     zIndex: 1,
-    paddingBottom: 5,
+    marginBottom: 25,
   },
   container: {
     backgroundColor: 'white',
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 4d0a9bd5..4d8607a4 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -16,6 +16,7 @@ import {ScreenType} from '../../types';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import {MutualFriends} from '../../components/suggestedPeople';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -83,7 +84,10 @@ const SuggestedPeopleScreen: React.FC = () => {
               profileBodyHeight={0}
               screenType={screenType}
             />
-            {/* TODO: Add MutualFriends here */}
+            {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends 
+              * Needs to be displayed only if userX !user himself
+              */}
+            <MutualFriends />
           </View>
         </View>
         <TabsGradient />
diff --git a/src/types/types.ts b/src/types/types.ts
index fe16fb8e..874b9eb7 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -109,7 +109,9 @@ export type PreviewType =
   | 'Search'
   | 'Recent'
   | 'Discover Users'
-  | 'Friend';
+  | 'Friend'
+  | 'Suggested People Drawer'
+  | 'Suggested People Screen';
 
 export enum ScreenType {
   Profile,