1 files changed, 96 insertions, 37 deletions

diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index 23ce28fe..9b9e5302 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,64 +1,123 @@
 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import {View, StyleSheet, ScrollView, Text} from 'react-native';
 import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
-import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {useDispatch, useStore} from 'react-redux';
+import {handleUnfriend} from '../../utils/friends';
+import {NO_USER} from '../../store/initialStates';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
   screenType: ScreenType;
+  userId: string;
 }
 
-const Friends: React.FC<FriendsProps> = ({result, screenType}) => {
-  const navigation = useNavigation();
+const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
+  const state: RootState = useStore().getState();
+  const dispatch = useDispatch();
+
+  const {user: loggedInUser = NO_USER} = state;
+
   return (
     <>
-      <View style={styles.header}>
-        <Button
-          title="X"
-          buttonStyle={styles.button}
-          titleStyle={styles.buttonText}
-          onPress={() => {
-            navigation.pop();
-          }}
-        />
-        <Text style={styles.title}>Friends</Text>
+      <View style={styles.subheader}>
+        <Text style={styles.subheaderText}>Friends</Text>
       </View>
-      {result.map((profilePreview) => (
-        <ProfilePreview
-          style={styles.friend}
-          key={profilePreview.id}
-          {...{profilePreview}}
-          previewType={'Friend'}
-          screenType={screenType}
-        />
-      ))}
+      <ScrollView
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollViewContent}
+        showsVerticalScrollIndicator={false}>
+        {result.map((profilePreview) => (
+          <View key={profilePreview.id} style={styles.container}>
+            <View style={styles.friend}>
+              <ProfilePreview
+                {...{profilePreview}}
+                previewType={'Friend'}
+                screenType={screenType}
+              />
+            </View>
+            {loggedInUser.userId === userId && (
+              <TouchableOpacity
+                style={styles.button}
+                onPress={() =>
+                  handleUnfriend(screenType, profilePreview, dispatch, state)
+                }>
+                <Text style={styles.buttonTitle}>Unfriend</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        ))}
+      </ScrollView>
     </>
   );
 };
 
 const styles = StyleSheet.create({
+  scrollView: {
+    flexDirection: 'column',
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_HEIGHT,
+  },
+  scrollViewContent: {
+    alignSelf: 'center',
+    paddingBottom: SCREEN_HEIGHT / 15,
+    width: SCREEN_WIDTH * 0.85,
+    height: SCREEN_HEIGHT * 0.75,
+    marginTop: '1%',
+  },
   header: {flexDirection: 'row'},
-  friend: {
-    marginVertical: 10,
+  subheader: {
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+    marginVertical: '3%',
+  },
+  subheaderText: {
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
   },
-  title: {
-    position: 'relative',
-    fontSize: 17,
-    fontWeight: 'bold',
-    paddingBottom: 10,
-    paddingTop: 10,
-    flexGrow: 1,
-    paddingLeft: '26%',
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '5%',
+  },
+  friend: {
+    alignSelf: 'center',
+    height: '100%',
   },
   button: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '55%',
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 2,
+    padding: 0,
     backgroundColor: 'transparent',
   },
-  buttonText: {
-    color: 'black',
-    fontSize: 18,
-    fontWeight: '400',
+  buttonTitle: {
+    color: TAGG_LIGHT_BLUE,
+    padding: 0,
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
   },
 });