1 files changed, 61 insertions, 22 deletions
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index 23ce28fe..5c724617 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,40 +1,53 @@
 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import {View, StyleSheet, Text, ScrollView} from 'react-native';
 import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
 import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
+import {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';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
   screenType: ScreenType;
+  userXId: string;
 }
 
-const Friends: React.FC<FriendsProps> = ({result, screenType}) => {
+const Friends: React.FC<FriendsProps> = ({result, screenType, userXId}) => {
   const navigation = useNavigation();
+
+  const state: RootState = useStore().getState();
+  const dispatch = useDispatch();
+
   return (
-    <>
-      <View style={styles.header}>
-        <Button
-          title="X"
-          buttonStyle={styles.button}
-          titleStyle={styles.buttonText}
-          onPress={() => {
-            navigation.pop();
-          }}
-        />
-        <Text style={styles.title}>Friends</Text>
-      </View>
+    <ScrollView
+      keyboardShouldPersistTaps={'always'}
+      stickyHeaderIndices={[4]}
+      style={styles.scrollView}
+      contentContainerStyle={styles.scrollViewContent}
+      showsVerticalScrollIndicator={false}>
       {result.map((profilePreview) => (
-        <ProfilePreview
-          style={styles.friend}
-          key={profilePreview.id}
-          {...{profilePreview}}
-          previewType={'Friend'}
-          screenType={screenType}
-        />
+        <View key={profilePreview.id}>
+          <ProfilePreview
+            style={styles.friend}
+            {...{profilePreview}}
+            previewType={'Friend'}
+            screenType={screenType}
+          />
+          <Button
+            title={'Unfriend'}
+            buttonStyle={styles.requestedButton}
+            titleStyle={styles.requestedButtonTitle}
+            onPress={() =>
+              handleUnfriend(screenType, profilePreview, dispatch, state)
+            } // unfriend, no record status
+          />
+        </View>
       ))}
-    </>
+    </ScrollView>
   );
 };
 
@@ -60,6 +73,32 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '400',
   },
+  scrollView: {},
+  scrollViewContent: {
+    paddingBottom: SCREEN_HEIGHT / 15,
+    paddingHorizontal: 15,
+    marginTop: '5%',
+    backgroundColor: 'lightgrey',
+  },
+  requestedButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    height: SCREEN_WIDTH * 0.075,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 0,
+    marginRight: '2%',
+    marginLeft: '1%',
+    padding: 0,
+    backgroundColor: 'transparent',
+  },
+  requestedButtonTitle: {
+    color: TAGG_LIGHT_BLUE,
+    padding: 0,
+    fontSize: 14,
+    fontWeight: '700',
+  },
 });
 
 export default Friends;