displaying mutual friends only if they exist

1 files changed, 56 insertions, 54 deletions

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index 32efd4a0..d8b37bca 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -31,63 +31,65 @@ const MutualFriends: React.FC = () => {
 
   return (
     <>
-      <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() ? '40%' : '45%'}
-              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>
+      {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>
-                </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>
+              )}
+              <BottomDrawer
+                initialSnapPosition={isIPhoneX() ? '40%' : '45%'}
+                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>
-        </View>
-      </SafeAreaView>
+        </SafeAreaView>
+      )}
       <TabsGradient />
     </>
   );