created mutual friends preview and drawer

1 files changed, 206 insertions, 0 deletions

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
new file mode 100644
index 00000000..91f72254
--- /dev/null
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -0,0 +1,206 @@
+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 {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ProfilePreview} from '../profile';
+import {normalize} from 'react-native-elements';
+
+const MutualFriends: React.FC = () => {
+  const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';
+
+  let {friends} = userXId
+    ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
+    : useSelector((state: RootState) => state.friends);
+
+  const friendsPreview = friends.slice(0, 5);
+  const username = '@' + 'username';
+  const count = 4;
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  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 > 0 && (
+              <TouchableOpacity onPress={() => setDrawerVisible(true)}>
+                <View style={styles.mutualFriendsButton}>
+                  <Text style={styles.plusSign}>+</Text>
+                  <Text style={styles.count}>{count}</Text>
+                </View>
+              </TouchableOpacity>
+            )}
+            <BottomDrawer
+              initialSnapPosition={'38%'}
+              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>
+                    {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({
+  background: {
+    backgroundColor: 'white',
+    height: '100%',
+  },
+  body: {
+    marginTop: HeaderHeight,
+    width: SCREEN_WIDTH * 0.9,
+    height: SCREEN_HEIGHT * 0.08,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  title: {
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  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.4,
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 0.5,
+    borderColor: '#fff',
+  },
+  headerContainer: {
+    width: SCREEN_WIDTH + 2,
+    height: '28%',
+    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),
+  },
+  scrollViewContainer: {
+    height: 130,
+    shadowColor: 'rgb(125, 125, 125)',
+    marginTop: '1%',
+  },
+  scrollView: {
+    backgroundColor: '#F9F9F9',
+    height: '95%',
+    padding: 0,
+    marginHorizontal: '5%',
+  },
+  cancelButton: {
+    backgroundColor: '#F0F0F0',
+    height: '50%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelButtonText: {
+    color: '#698DD3',
+    fontSize: normalize(17),
+    fontWeight: '700',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
+  },
+});
+
+export default MutualFriends;