full screen; with button; needs refresh&alignment;

5 files changed, 196 insertions, 72 deletions

diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
new file mode 100644
index 00000000..d47dc3b6
--- /dev/null
+++ b/src/components/common/FriendsButton.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Button} from 'react-native-elements';
+import {ScreenType} from '../../types';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {handleFriendUnfriend, SCREEN_WIDTH} from '../../utils';
+import {NO_PROFILE, NO_USER} from '../../store/initialStates';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
+
+interface ProfileBodyProps {
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+const FriendsButton: React.FC<ProfileBodyProps> = ({userXId, screenType}) => {
+  const dispatch = useDispatch();
+
+  const {user = NO_USER, profile = NO_PROFILE} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.user);
+
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  const state = useStore().getState();
+
+  const {friendship_status} = profile;
+
+  return (
+    <>
+      {friendship_status === 'no_record' && (
+        <Button
+          title={'Add Friend'}
+          buttonStyle={styles.button}
+          titleStyle={styles.buttonTitle}
+          onPress={() =>
+            handleFriendUnfriend(
+              screenType,
+              user,
+              profile,
+              dispatch,
+              state,
+              loggedInUser,
+            )
+          } // requested, requested status
+        />
+      )}
+      {friendship_status === 'friends' && (
+        <Button
+          title={'Unfriend'}
+          buttonStyle={styles.requestedButton}
+          titleStyle={styles.requestedButtonTitle}
+          onPress={() =>
+            handleFriendUnfriend(
+              screenType,
+              user,
+              profile,
+              dispatch,
+              state,
+              loggedInUser,
+            )
+          } // unfriend, no record status
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  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',
+  },
+  buttonTitle: {
+    color: 'white',
+    padding: 0,
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.4,
+    height: SCREEN_WIDTH * 0.075,
+    padding: 0,
+    borderWidth: 2,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderRadius: 0,
+    marginRight: '2%',
+    marginLeft: '1%',
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+});
+
+export default FriendsButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 61c7fa26..30ec6d02 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -20,3 +20,4 @@ export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
+export {default as FriendsButton} from './FriendsButton';
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index a35a5820..56ae1e51 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -216,31 +216,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     }
   }, [blockedUsers, user]);
 
-  // Handles click on friend/requested/unfriend button
-  /*
-   * When user logged in clicks on the friend button:
-   A request is sent.
-   Which means you have to update the status of their friendshpi to requested
-   When the status is changed to requested the button should change to requested.
-   When the button is changed to requested and thr user clicks on it,
-   a request much go to the backend to delete that request
-   When that succeeds, their friendship must be updated to no-record again;
-   When the button is changed to no_record, the add friends button should be displayed again
-   */
-  const handleFriendUnfriend = async () => {
-    const {friendship_status} = profile;
-    await dispatch(
-      friendUnfriendUser(
-        loggedInUser,
-        getUserAsProfilePreviewType(user, profile),
-        friendship_status,
-        screenType,
-      ),
-    );
-    await dispatch(updateUserXFriends(user.userId, state));
-    dispatch(updateUserXProfileAllScreens(user.userId, state));
-  };
-
   /**
    * Handles a click on the block / unblock button.
    * loadFriends updates friends list for the logged in user
@@ -332,7 +307,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           userXId,
           screenType,
           isFriend,
-          handleFriendUnfriend,
           handleBlockUnblock,
           isBlocked,
         }}
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;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 1ee3ae2b..555811c9 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -9,14 +9,17 @@ import {
 import ToggleButton from './ToggleButton';
 import {RootState} from '../../store/rootReducer';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {FriendshipStatusType, ScreenType} from '../../types';
-import {NO_PROFILE} from '../../store/initialStates';
-import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
-import {AcceptDeclineButtons} from '../common';
+import {ScreenType} from '../../types';
+import {NO_PROFILE, NO_USER} from '../../store/initialStates';
+import {
+  getUserAsProfilePreviewType,
+  handleFriendUnfriend,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {AcceptDeclineButtons, FriendsButton} from '../common';
 import {
   acceptFriendRequest,
   declineFriendRequest,
-  loadUserNotifications,
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
@@ -24,7 +27,6 @@ import {
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
   isBlocked: boolean;
-  handleFriendUnfriend: () => void;
   handleBlockUnblock: () => void;
   userXId: string | undefined;
   screenType: ScreenType;
@@ -32,7 +34,6 @@ interface ProfileBodyProps {
 const ProfileBody: React.FC<ProfileBodyProps> = ({
   onLayout,
   isBlocked,
-  handleFriendUnfriend,
   handleBlockUnblock,
   userXId,
   screenType,
@@ -41,6 +42,10 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
 
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+
   const {
     biography,
     website,
@@ -94,29 +99,23 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
       )}
       {userXId && !isBlocked && (
         <View style={styles.buttonsContainer}>
-          {friendship_status === 'no_record' && (
-            <Button
-              title={'Add Friend'}
-              buttonStyle={styles.button}
-              titleStyle={styles.buttonTitle}
-              onPress={handleFriendUnfriend} // requested, requested status
-            />
-          )}
-          {friendship_status === 'friends' && (
-            <Button
-              title={'Unfriend'}
-              buttonStyle={styles.requestedButton}
-              titleStyle={styles.requestedButtonTitle}
-              onPress={handleFriendUnfriend} // unfriend, no record status
-            />
-          )}
+          <FriendsButton userXId={userXId} screenType={screenType} />
           {(friendship_status === 'requested' &&
             friendship_requester_id !== userXId && (
               <Button
                 title={'Requested'}
                 buttonStyle={styles.requestedButton}
                 titleStyle={styles.requestedButtonTitle}
-                onPress={handleFriendUnfriend} // delete request, no record status
+                onPress={() =>
+                  handleFriendUnfriend(
+                    screenType,
+                    user,
+                    profile,
+                    dispatch,
+                    state,
+                    loggedInUser,
+                  )
+                } // delete request, no record status
               />
             )) ||
             (friendship_status === 'requested' &&